Make all buttons rounded

Question

Using swift, I tried with this code to make a button rounded, and it works:

button.layer.borderColor = UIColor.grayColor().CGColor
button.layer.borderWidth = 1
button.layer.cornerRadius = 8

Unfortunately, I've got a lot of buttons and I would like to know if there's a way to make all buttons rounded without doing "copy and paste" of the code above every time.

Answer 1

You can do this via UIAppearance, which is a proxy that allows you to configure properties for all objects of a UIKit class.

Firstly, as UIAppearance works on properties on the UIView itself and the ones you want to control are on the button layer, you need to expose this to the appearance:

@objc extension UIButton {
    dynamic var borderColor: UIColor? {
        get {
            if let cgColor = layer.borderColor {
                return UIColor(CGColor: cgColor)
            }
            return nil
        }
        set { layer.borderColor = newValue?.CGColor }
    }

    dynamic var borderWidth: CGFloat {
        get { return layer.borderWidth }
        set { layer.borderWidth = newValue }
    }

    dynamic var cornerRadius: CGFloat {
        get { return layer.cornerRadius }
        set { layer.cornerRadius = newValue }
    }
}

in Swift, the dynamic keyword instructs the compile to generate getters and setters for the property, so that UIAppearance that identify it as configurable, (see this SO question, and Apple's documentation for more details).

You can then set the properties on the ui appearance of the UIButton class:

UIButton.appearance().borderColor = UIColor.grayColor();
UIButton.appearance().borderWidth = 2;
UIButton.appearance().cornerRadius = 20;

You should do the configuration during the application startup, as the appearance changes apply when the view is added to the window (see the note on the UIAppearance documentation).

If you want to give these default properties only for some buttons in your class, you can subclass UIButton, and use the appearance on that class instead of UIButton. For example:

class MyButton: UIButton {}

...

MyButton.appearance().borderColor = UIColor.grayColor();
MyButton.appearance().borderWidth = 2;
MyButton.appearance().cornerRadius = 20;

will apply the styling only to buttons of the MyButton class. This allows you to define different look&feel for buttons in your class by simply subclassing UIButton and working on the appearance of the subclass.

Answer 2

With this, you can apply to all buttons. Copy/paste to your helper and use.

You can modify button from a storyboard. Just, add this class to any button. (Add this class to any button in a storyboard)

@IBDesignable
class RoundedButton: UIButton {

    override func awakeFromNib() {
        super.awakeFromNib()

        layer.cornerRadius = frame.size.height / 2
        clipsToBounds = true
        imageView?.contentMode = .scaleAspectFit
    }

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

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

    @IBInspectable var bgColor: UIColor? {
        didSet {
            backgroundColor = bgColor
        }
    }

    override var isHighlighted: Bool {
        didSet {
            if isHighlighted{
                backgroundColor = backgroundColor?.alpha(0.6)
            }else{
                backgroundColor = backgroundColor?.alpha(1)
            }
        }
    }
}

Answer 3

You should subclass UIbutton. In your subclass, override awakeFromNib and paste the code there. In Storyboard, when referring to your button, open the assistant editor and choose the third tab in. You can provide your custom class name here.

Answer 4

Use this code to get story board outlet as property

extension UIView {
@IBInspectable var cornerRadius: CGFloat
    {
    get {
        return layer.cornerRadius
    }
    set {
        layer.cornerRadius = newValue
        layer.masksToBounds = newValue > 0
    }
}
@IBInspectable var cornerWidth: CGFloat
    {
    get {
        return layer.borderWidth
    }
    set {
        layer.borderWidth = newValue
    }
}
@IBInspectable var borderColor: UIColor
    {
    set{ self.layer.borderColor = newValue.cgColor }
    get{ return UIColor(cgColor: self.layer.borderColor!) }
}

}

Answer 5

Select the button and go to the Identity inspector, click the Add button (+) in the lower left of the user defined runtime attributes editor. Double click on the Key Path field of the new attribute to edit the key path for the attribute to layer.cornerRadius Set the type to Number and the value to 8. To make a circular button from a square button, the radius is set to half the width of the button. Or you can add this code, I find the first way easier but you can decide which one to use.

button.layer.borderWidth = 2
button.layer.cornerRadius = 8
button.clipsToBounds = true