https://github.com/IdleHandsApps/DesignableButton

A Custom UIButton with Centralised Styling and common styles available in Interface Builder
https://github.com/IdleHandsApps/DesignableButton

Last synced: about 1 month ago
JSON representation

A Custom UIButton with Centralised Styling and common styles available in Interface Builder

• Host: GitHub
• URL: https://github.com/IdleHandsApps/DesignableButton
• Owner: IdleHandsApps
• License: mit
• Created: 2017-02-12T22:57:34.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-07-01T03:37:19.000Z (about 5 years ago)
• Last Synced: 2024-08-04T17:07:22.971Z (about 2 months ago)
• Language: Swift
• Size: 12.1 MB
• Stars: 92
• Watchers: 6
• Forks: 11
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-ios - DesignableButton - UIButton subclass with centralised and reusable styles. View styles and customise in InterfaceBuilder in real time! (UI / Button)
• awesome-ios-star - DesignableButton - UIButton subclass with centralised and reusable styles. View styles and customise in InterfaceBuilder in real time! (UI / Button)

README

        


  



DesignableButton [![Language: Swift 4.0](https://img.shields.io/badge/Swift-4.0-orange.svg)](https://swift.org)

------------------------------

![alt demo](https://github.com/IdleHandsApps/DesignableButton/blob/files/DesButGif.gif)

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

```swift

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