UIButton border on right and left sides

Question

I've been having trouble getting a border or shadow between three buttons to show some separation. I have tried getting a border or shadow on just the left and right side of the middle button but I could only get the shadow on one side. Any help is greatly appreciated.

What I have tried to user to get a shadow but only shows on right side:

    middleButton.layer.backgroundColor = UIColor.whiteColor().CGColor
    middleButton.layer.borderColor =  UIColor(red: 208/255, green: 208/255, blue: 208/255, alpha: 1.0).CGColor
    middleButton.layer.borderWidth = 0.0
    middleButton.layer.masksToBounds = false
    middleButton.layer.shadowColor = UIColor(red: 208/255, green: 208/255, blue: 208/255, alpha: 1.0).CGColor
    middleButton.layer.shadowOffset = CGSizeMake(0.5, 1.0)
    middleButton.layer.shadowOpacity = 1.0
    middleButton.layer.shadowRadius = 1.0

Below is my current view with the three buttons that I am trying to add a separator between:

The hierarchy I have for it in a table cell:

Look at the answers here: http://stackoverflow.com/questions/7666863/uiview-bottom-border — beyowulf, May 28 '16 at 13:56

score 5 · Answer 1 · answered Jul 15 '17 at 09:15

Swift 3 Answer

You can make an extension for UIButton

extension UIButton {

 func addRightBorder(borderColor: UIColor, borderWidth: CGFloat) {
    let border = CALayer()
    border.backgroundColor = borderColor.cgColor
    border.frame = CGRect(x: self.frame.size.width - borderWidth,y: 0, width:borderWidth, height:self.frame.size.height)
    self.layer.addSublayer(border)
 }

 func addLeftBorder(color: UIColor, width: CGFloat) {
    let border = CALayer()
    border.backgroundColor = color.cgColor
    border.frame = CGRect(x:0, y:0, width:width, height:self.frame.size.height)
    self.layer.addSublayer(border)
 }
}

Then you can use this for any of your buttons.

middleButton.addRightBorder(borderColor: UIColor.white, borderWidth: 1.0)

middleButton.addLeftBorder(borderColor: UIColor.white, borderWidth: 1.0)

Should work fine. Happy Coding !

how to add up side border in uibutton ? – Abhishek Mitra Mar 21 '18 at 11:03 — Abhishek Mitra, Mar 21 '18 at 11:03

score 0 · Answer 2 · answered May 31 '16 at 20:59

Where there are limits on the actual code possibilities, the solution lay with the graphic icons you have for 'Favourite', 'Share', Map'.

A separator border / line between the buttons can be done in the graphic icon creation for the buttons you have. Adobe illustrator or photoshop. I have recreated a sample in illustrator, brought it over to 'Assets.xcassets' as an image and added it as background image to the button.

Button e.g.

Snapshop of simulator as follows...

score 0 · Answer 3 · edited Jul 15 '17 at 10:00

0

Another approach is to add your buttons to UIStackView. With it you can easily manage how you want the subviews to be arranged and distributed.

Add UIView's as separators with a width constraint of 1 point. After setting your constraints on the UIStackView, set distribution property to "Equal Spacing" and the views will align according to it.

edited Jul 15 '17 at 10:00

saurabh

6,687
7
42
63

answered Jul 15 '17 at 09:56

billgert

66
6

UIButton border on right and left sides

3 Answers3