左右两侧的UIButton边框

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:

Answer 1

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 !

Answer 2

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 eg

Snapshop of simulator as follows...

Answer 3

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.