Apply custom UIButton styling to all Buttons

Question

I want to apply some styling to all my viewcontrollers from multiple storyboards. I have many viewcontrollers so applying the styling to every viewcontroller sounds rather silly. I want to do it in the most code lean way as possible. I was thinking to do it in the AppDelegate file since you can also change your navigationcontroller styling there, but so far no succes. Not even in the slightest way.

So does anyone know how I can do this?

I am using Swift for the app.

The following styling principles have to be applied: cornerRadius, shadowColor, shadowOffset, shadowRadius, shadowOpacity, maskToBounds.

Why don't you create a subclass of `UIButton` which contains all these styling attributes and make all your buttons use that subclass instead of `UIButton` — Lamour, Sep 16 '17 at 17:38

score 18 · Accepted Answer · edited Oct 07 '19 at 10:51

Create extensions for UIComponents you wanna add common style.

Like in case of UIButton

extension UIButton {
    open override func draw(_ rect: CGRect) {
        //provide custom style
        self.layer.cornerRadius = 10 
        self.layer.masksToBounds = true
    }
}

Or create a subclass of UIButton and provide all the styling u wanna apply and make sure your buttons extends from your custom class

class MyButton : UIButton {

   override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
      }

   required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
      }

   private func setup() {
        self.layer.cornerRadius = 10
        self.layer.masksToBounds = true
      }

}

@lamar : Thank u for refactoring code :) Much appreciated – Sandeep Bhandari Sep 16 '17 at 17:50 — Sandeep Bhandari, Sep 16 '17 at 17:50

arpita · Answer 2 · 2018-02-19T11:00:11.563

You can make custom class using IBInspectable. so you can change from UI.====>

class NSCustomButton: UIButton {

    @IBInspectable var borderColor: UIColor = UIColor.clear {
        didSet {
            layer.borderColor = borderColor.cgColor
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadius
            self.clipsToBounds = true
            self.layer.masksToBounds = true
        }
    }

    @IBInspectable var cornerRadiusByHeight: Bool = false {
        didSet {
            layer.cornerRadius = self.frame.size.height/2
        }
    }

    @IBInspectable var roundButton: Bool = false {
        didSet {
            layer.cornerRadius = self.frame.size.width / 2
            self.clipsToBounds = true
            self.layer.masksToBounds = true
        }
    }


    @IBInspectable var shadowColor: UIColor = UIColor.clear {

        didSet {

            layer.shadowColor = shadowColor.cgColor
            layer.masksToBounds = false
        }
    }


    @IBInspectable var shadowOpacity: CGFloat = 0.0 {

        didSet {

            layer.shadowOpacity = Float(shadowOpacity.hashValue)
            layer.masksToBounds = false
        }
    }

    @IBInspectable var shadowRadius: CGFloat = 0.0 {

        didSet {

            layer.shadowOpacity = Float(shadowRadius.hashValue)
            layer.masksToBounds = false
        }
    }

    override internal func awakeFromNib() {
        super.awakeFromNib()
    }

}

Nice solution. But bear in mind IBInspectable is a bit of a mess and unreliable once your project gets huge. We had to remove all this stuff from IB on a large project as it was causing long compiles and fans spinning like crazy. — SmileBot, Feb 23 '21 at 23:19

score 2 · Answer 3 · answered Sep 16 '17 at 17:54

You can use the UIAppearance api, like this:

UIButton.appearance().layer.cornerRadius = 4
UIButton.appearance().layer.shadowColor = UIColor.white.cgColor
UIButton.appearance().layer.shadowOffset = CGSize(width: 2, height: 2)
UIButton.appearance().layer.shadowRadius = 5
UIButton.appearance().layer.shadowOpacity = 0.5
UIButton.appearance().layer.masksToBounds = true

By using this, every UIButton on your application will have these visual properties set to what you've defined.

You can find more information about this API at https://developer.apple.com/documentation/uikit/uiappearance

score 2 · Answer 4 · answered Sep 10 '19 at 10:41

You can define a class and just set it to your button and configure it in the awakeFromNib() method.

@IBOutlet weak var myButton: MyCustomButton!


class MyCustomButton : UIButton{
    override func awakeFromNib() {
        super.awakeFromNib()
        setTitleColor(UIColor.black, for: .normal)
        layer.cornerRadius = 6
        backgroundColor = UIColor.red
        layer.borderWidth = 0.5
        layer.borderColor = UIColor.VFGGray.cgColor
    }
}

This way all your buttons will have the same appearance. Hope it helps

score 0 · Answer 5 · answered Sep 16 '17 at 19:17

0

use the UIButton api a that will hold the button style and then conforms all the buttons to it.

answered Sep 16 '17 at 19:17

Ingo

11
2

Apply custom UIButton styling to all Buttons

5 Answers5