DesignableButton
  • November 11, 2023

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

GitHub


View Github

#ibdesiganble #interfacebuilder #swift #uibutton
YOU MIGHT ALSO LIKE...
🧭 NavigationKit

NavigationKit is a lightweight library which makes SwiftUI navigation super easy to use. 💻 Installation 📦 Swift Package Manager Using Swift Package Manager, add ...

swiftui-navigation-stack

An alternative SwiftUI NavigationView implementing classic stack-based navigation giving also some more control on animations and programmatic navigation. NavigationStack Installation ...

Stinsen

Simple, powerful and elegant implementation of the Coordinator pattern in SwiftUI. Stinsen is written using 100% SwiftUI which makes it ...

SwiftUI Router

With SwiftUI Router you can power your SwiftUI app with path-based routing. By utilizing a path-based system, navigation in your app becomes ...

FlowStacks

This package takes SwiftUI's familiar and powerful NavigationStack API and gives it superpowers, allowing you to use the same API not just ...