CODEWITHSUNDEEP
iosswiftuibuttonswift2
kelsheikh
kelsheikh

Reputation: 1338

UIButton border on right and left sides

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:

enter image description here

The hierarchy I have for it in a table cell:

enter image description here

Upvotes: 1

Views: 4572

Answers (3)

billgert
billgert

Reputation: 76

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.

example

Upvotes: 0

Udaya Sri
Udaya Sri

Reputation: 2452

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 !

Upvotes: 5

devim1
devim1

Reputation: 532

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.

enter image description here

Snapshop of simulator as follows...

enter image description here

Upvotes: 0

Related Questions