Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set corner radius to a collection of UIButtons

Tags:

xcode

swift

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
like image 741
Eddie Avatar asked Oct 22 '25 15:10

Eddie


2 Answers

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.

like image 140
Rob Avatar answered Oct 24 '25 07:10

Rob


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.

like image 44
Gurpreet Singh Avatar answered Oct 24 '25 06:10

Gurpreet Singh



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!