How to set corner radius to a collection of UIButtons

Question

I'm new at using Xcode. My question is regarding "How to set corner.Radius for UIButtons (collection) instead of doing 1 by 1. Once the collection is created i'm using the following line: self.myButtons.layer.cornerRadius = 10 but that is for a single button. Is it possible to do this for a "collection" of buttons? enter image description here

any help is greatly appreciated.

@IBOutlet var myButtons: [UIButton]!

override func viewDidLoad() {
    super.viewDidLoad()

// Do any additional setup after loading the view.

self.myButtons.layer.conerRadius = 10

Answer 1

        extension UIView {

func addCornerRadius(_ radius: CGFloat) {
    self.layer.cornerRadius = radius
}

func applyBorder(_ width: CGFloat, borderColor: UIColor) {
    self.layer.borderWidth = width
    self.layer.borderColor = borderColor.cgColor
}

func addShadow(color: UIColor, opacity: Float, offset: CGSize, radius: CGFloat) {
    self.layer.shadowColor = color.cgColor
    self.layer.shadowOpacity = opacity
    self.layer.shadowOffset = offset
    self.layer.shadowRadius = radius
}

func displayToast(message: String) {

    let style = CSToastStyle(defaultStyle: ())

    style?.backgroundColor = UIColor.black
    style?.titleColor = UIColor.white
    style?.messageColor = UIColor.white
    makeToast(message, duration: 3.0, position: CSToastPositionTop, style: style)

}  }

Use As Below :

self.view.addCornerRadius(10)
self.view.addShadow(color: .lightGray, opacity: 1.0, offset: CGSize(width: 1, height: 1), radius: 2)

Answer 2

You can do this in interface builder. Select your button and then tap the "Identity Inspector" (3rd tab on the right). Under "User Defined Runtime Attributes" hit the plus button. and type layer.conerRadius for the key and 1 for the value. This will set the corner radius by KVO. you can now copy this button or duplicate it with alt+drag and the copies will also have the corner radius (note it doesn't show in the preview window, but it will show at run time).

Alternatively in code:

myButtons.forEach { button in
   button.layer.cornerRadius = 1
}

If you are using an outlet collection you can do this in a didSet since that will be called when iOS sets the outlet from the nib file/ storyboard.

Answer 3

 /// Other way to set Corner radius of view; also inspectable from Storyboard.
public extension UIView {
@IBInspectable public var cornerRadius: CGFloat {
    get {
        return layer.cornerRadius
    }
    set {
        //            layer.masksToBounds = true
        layer.cornerRadius = abs(CGFloat(Int(newValue * 100)) / 100)
    }
}}

By usisng this you can set border radius from storyboard

OR

for btn in yourbuttonCollectionName {btn.cornerRadius = 10.0}

Answer 4

Follow this below steps -

1.Choose UIButton from the object library

2.Drag to your storyboard

3.Choose border style as none.

4.Create a Swift file and add this below extension - extension UIView {

@IBInspectable var cornerRadius: CGFloat {

    get {

        return layer.cornerRadius

    }

    set {

        layer.cornerRadius = newValue

        layer.masksToBounds = newValue > 0

    }

}

@IBInspectable var borderWidth: CGFloat {

    get {

        return layer.borderWidth

    }

    set {

        layer.borderWidth = newValue

    }

}

@IBInspectable var borderColor: UIColor? {

    get {

        return UIColor(cgColor: layer.borderColor!)

    }

    set {

        layer.borderColor = newValue?.cgColor

    }

}

}

extension UIButton {

func roundedButton(){

    let maskPAth1 = UIBezierPath(roundedRect: self.bounds,

                                 byRoundingCorners: [.topLeft , .topRight],

                                 cornerRadii:CGSize(width:8.0, height:8.0))

    let maskLayer1 = CAShapeLayer()

    maskLayer1.frame = self.bounds

    maskLayer1.path = maskPAth1.cgPath

    self.layer.mask = maskLayer1

}

}

extension UITextField {

func setLeftPaddingPoints(_ amount:CGFloat){

    let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: amount, height: self.frame.size.height))

    self.leftView = paddingView

    self.leftViewMode = .always
}

func setRightPaddingPoints(_ amount:CGFloat) {
    let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: amount, height: self.frame.size.height))
    self.rightView = paddingView
    self.rightViewMode = .always
}

}

extension UITextField {

@IBInspectable var maxLength: Int {
    get {
        if let length = objc_getAssociatedObject(self, &kAssociationKeyMaxLength) as? Int {
            return length
        } else {
            return Int.max
        }
    }
    set {
        objc_setAssociatedObject(self, &kAssociationKeyMaxLength, newValue, .OBJC_ASSOCIATION_RETAIN)
        addTarget(self, action: #selector(checkMaxLength), for: .editingChanged)
    }
}

@objc func checkMaxLength(textField: UITextField) {
    guard let prospectiveText = self.text,
        prospectiveText.count > maxLength
        else {
            return
    }

    let selection = selectedTextRange

    let indexEndOfText = prospectiveText.index(prospectiveText.startIndex, offsetBy: maxLength)
    let substring = prospectiveText[..<indexEndOfText]
    text = String(substring)

    selectedTextRange = selection
}

} 5.Now you can access this extensions either from storyboard or from code to change the values and see the effects. 6.You can change the corner radius, border width, border colour for UIView,UIButton,UITexfield.Try this Method. Hope this method also helps.

Answer 5

A few options:

1. Iterate through them yourself:

   myButtons.forEach { $0.layer.cornerRadius = 10 }
   

2. Use NSArray and its setValue(_:forKey:)

   (myButtons as NSArray).setValue(10, forKey: "cornerRadius")
   

I’d lean towards the former, but the latter is the old Objective-C way of doing it (which is why we had to bridge to NSArray).

---

The other approach is to define your own UIButton subclass, e.g. RoundedButton that does this for you. Just set the base class for your button in IB to be your custom subclass.

E.g. for fixed corner radius (which you can also adjust right in IB):

@IBDesignable
class RoundedButton: UIButton {
    @IBInspectable var cornerRadius: CGFloat = 10 {
        didSet {
           layer.cornerRadius = cornerRadius
        } 
    }

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

    override init(frame: CGRect = .zero) {
        super.init(frame: frame)
        configure()
    }
}

private extension RoundedButton {
    func configure() {
        layer.cornerRadius = cornerRadius
    }
}

Or, if you want dynamic rounding based upon the height:

@IBDesignable
class RoundedButton: UIButton {

    override func layoutSubviews() {
        super.layoutSubviews()

        let radius = min(bounds.width, bounds.height) / 2
        layer.cornerRadius = radius
    }

}

The virtue of this approach is that you can see your rounded buttons rendered right in IB.