DesignableButton 
DesignableButton is a UIButton subclass that uses a centralised and reusable styling. In InterfaceBuilder, drag and drop a DesignableButton, choose your style and its applied instantly in InterfaceBuilder
Features
- One centralised class to define you main button styles so they can be reused
- Different styles for different button states: Normal/Selected/Disabled
- The centralised styles can be set in IB (no more IBOutlets needed for programatical styling)
- View the style in IB in realtime. Even changing button to selected state will update IB
- Individual buttons can override their centralised styles in IB
- Rounded corners and borders are easy with DesignableButton
- Buttons with an image above text are easy with DesignableButton
How to install
Add this to your CocoaPods Podfile. Note the IH prefix
pod 'IHDesignableButton'
How to use
Create an DesignableButton+Styles.swift extension file in your project
import UIKit
import IHDesignableButton // if DesignableButton is in CocoaPod
extension DesignableButton {
override open func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
DesignableButton.setDesignableStyles(isInterfaceBuilder: true)
}
static func setDesignableStyles(isInterfaceBuilder: Bool = false) {
// example style
DesignableButton.setStyle(style: { (designableButton: DesignableButton) -> Void in
if designableButton.isHighlighted || designableButton.isSelected {
// replace this with your style for selected/highlighted states
designableButton.setTitleColor(designableButton.customTextColor ?? UIColor.white, for: UIControlState())
designableButton.backgroundColor = designableButton.selectedColor ?? UIColor.red
designableButton.layer.borderColor = designableButton.selectedColor?.cgColor ?? UIColor.red.cgColor
designableButton.layer.borderWidth = designableButton.borderWidth ?? 0
} else if designableButton.isEnabled {
// replace this with your style for the normal state
designableButton.setTitleColor(designableButton.customTextColor ?? UIColor.white, for: UIControlState())
designableButton.backgroundColor = designableButton.defaultColor ?? UIColor.blue
designableButton.layer.borderColor = designableButton.defaultColor?.cgColor ?? UIColor.blue.cgColor
designableButton.layer.borderWidth = designableButton.borderWidth ?? 0
}
else {
// replace this with your style for the disabled state
designableButton.setTitleColor(designableButton.customTextColor ?? UIColor.lightGray, for: UIControlState())
designableButton.backgroundColor = designableButton.disabledColor ?? UIColor.lightGray()
designableButton.layer.borderColor = designableButton.borderColor?.cgColor ?? UIColor.gray.cgColor
designableButton.layer.borderWidth = designableButton.borderWidth ?? 1
}
// replace this with your style for all states
designableButton.layer.cornerRadius = designableButton.cornerRadius ?? 12
designableButton.setTitle(designableButton.titleLabel?.text, for: .normal)
}, for: "primary") // this is the name/key of your style
}
}
In the setDesignableStyles() method you can call DesignableButton.setStyle() to create a new style. Most projects will only need a few button styles
In you AppDelegate's application(_ , didFinishLaunchingWithOptions() call DesignableButton.setDesignableStyles()
Now in Interface Builder, drag a UIButton onto a view
Change the class to DesignableButton and the module to IHDesignableButton
Change the button type from System to Custom
Set the Button Style to "primary" or any other button style you're created
Half price for a limited time only :)
A Codable extension to decode arrays and to catch & log all decoding failures https://github.com/IdleHandsApps/SafeDecoder
An elegant solution for keeping views visible when the keyboard is being shown https://github.com/IdleHandsApps/IHKeyboardAvoiding
A fully automatic status bar overlay for No Internet Connection messages https://github.com/IdleHandsApps/StatusBarOverlay
Author
- Fraser Scott-Morrison ([email protected])
It'd be great to hear about any cool apps that are using DesignableButton
License
Distributed under the MIT License
98 Dec 5, 2022
34 Nov 8, 2022
542 Dec 13, 2022
77 Jun 10, 2021
76 Oct 7, 2022
2 Aug 18, 2022
13 Oct 28, 2022
1.1k Dec 18, 2022
3.3k Dec 21, 2022
476 Sep 1, 2022
8.6k Jan 2, 2023
88 Jun 30, 2022
15k Jan 8, 2023
0 Dec 17, 2021
10 Mar 28, 2022
41 Dec 19, 2022
1.4k Dec 1, 2022
461 Dec 29, 2022
566 Dec 9, 2022
1.4k Dec 25, 2022
83 Oct 11, 2022
720 Nov 17, 2022
129 Mar 19, 2022
12 May 9, 2022
2 Sep 6, 2022
1 Dec 14, 2022
116 May 29, 2022
465 Dec 24, 2022