Cannot properly add borders on a UIButton

Question

I tried to add a border to a collections of button but seems can't do it right. What's wrong with the code?

I tried add a border with details like :

key 1, 4, 7, delete : top
key 2, 5, 8, 0 : top, left, right
key 3, 6, 9, continue : top

Here is the code (I differ each border's colour for easily identify the border added by the code) :

class BM_BlipulsaViewController: UIViewController {
    @IBOutlet var keysCollection: [UIButton]!

    override func viewWillLayoutSubviews() {
        keysAppearance()
    }

    func keysAppearance() {
        for key in keysCollection {
            var border = CALayer()

            if(key.restorationIdentifier == "key1"
                || key.restorationIdentifier == "key4"
                || key.restorationIdentifier == "key7"
                || key.restorationIdentifier == "keyDelete") {

                // top
                border.frame = CGRectMake(0, 0, CGRectGetWidth(key.frame), 1.0)
                border.backgroundColor = UIColor.yellowColor().CGColor
                key.layer.addSublayer(border)

            } else if(key.restorationIdentifier == "key2"
                || key.restorationIdentifier == "key5"
                || key.restorationIdentifier == "key8"
                || key.restorationIdentifier == "key0") {

                // top
                border.frame = CGRectMake(0, 0, CGRectGetWidth(key.frame), 1.0)
                border.backgroundColor = UIColor.grayColor().CGColor
                key.layer.addSublayer(border)

                // left
                border.frame = CGRectMake(0, 0, 1.0, CGRectGetHeight(key.frame))
                border.backgroundColor = UIColor.blueColor().CGColor
                key.layer.addSublayer(border)

                // right
                border.frame = CGRectMake(CGRectGetWidth(key.frame) - 1.0, 0, 1.0, CGRectGetHeight(key.frame))
                border.backgroundColor = UIColor.redColor().CGColor
                key.layer.addSublayer(border)

            } else if(key.restorationIdentifier == "key3"
                || key.restorationIdentifier == "key6"
                || key.restorationIdentifier == "key9"
                || key.restorationIdentifier == "keyContinue") {

                // top
                border.frame = CGRectMake(0, 0, CGRectGetWidth(key.frame), 1.0)
                border.backgroundColor = UIColor.brownColor().CGColor
                key.layer.addSublayer(border)
            }

        }
    }

}

Or is there any better way to add a border to the UIButton? Many thanks.

@Caleb: It should be bordered on each side, just like keyboard in the devices. Ignore the colour. — mrjimoy_05, Dec 22 '15 at 02:28
Just a border around each button? The `border.frame` thing is the part that I do not understand. — Caleb, Dec 22 '15 at 02:33
@Caleb : Yes, mmm, the code is taken from http://stackoverflow.com/questions/17355280/how-to-add-a-border-just-on-the-top-side-of-a-uiview/30519213#30519213 with some modification. I think the `border.frame` is intended to create a line — mrjimoy_05, Dec 22 '15 at 02:37

score 1 · Accepted Answer · edited May 23 '17 at 10:27

If you just want a border around each UIButton you can do this:

for key in keysCollection {
    key.layer.borderColor = UIColor.blackColor().CGColor
    key.layer.borderWidth = 0.5
}

You could even use an extension (source) to create just the top/bottom/left/right borders:

extension CALayer {
    func addBorder(edge: UIRectEdge, color: UIColor, thickness: CGFloat) {
        let border = CALayer()
        switch edge {
            case UIRectEdge.Top:
                border.frame = CGRectMake(0, 0, CGRectGetWidth(self.frame), thickness)
                break
            case UIRectEdge.Bottom:
                border.frame = CGRectMake(0, (CGRectGetHeight(self.frame)) - thickness, CGRectGetWidth(self.frame), thickness)
                break
            case UIRectEdge.Left:
                border.frame = CGRectMake(0, 0, thickness, CGRectGetHeight(self.frame))
                break
            case UIRectEdge.Right:
                border.frame = CGRectMake(CGRectGetWidth(self.frame) - thickness, 0, thickness, CGRectGetHeight(self.frame))
                break
            default:
                break
        }
        border.backgroundColor = color.CGColor;
        self.addSublayer(border)
    }
}

Example:

for key in keysCollection {
    key.layer.addBorder(.Top, UIColor.yellowColor(), 0.5)
    key.layer.borderWidth = 0.5
}

Wow, thanks! The first code works for me. It's that simple, arrrghh, it took me 2 day looking for the solution.. Haha, thank you so much! — mrjimoy_05, Dec 22 '15 at 02:43

Cannot properly add borders on a UIButton

1 Answers1