2

I am using Swift 2.3 now. I've added borders to the button with this code:

self.history.layer.borderWidth = 1
self.history.layer.borderColor = UIColor.mainColor().CGColor

And as a result I got: History button borders

Now, I need to remove left and right borders and have only top and bottom borders left. How can I manage it?

Additions: thnx to @Teja, I've seen another question CALayer: add a border only at one side But, the thing is I need bottom and top. However, after adding -1, -1 CALayer only the bottom one has been added.

2

5 Answers 5

5

You could try something like below.

let topBorder = CALayer()
topBorder.borderColor = UIColor.black.cgColor;
topBorder.borderWidth = 1;
topBorder.frame = CGRect(x: 0, y: 0, width: label.frame.width, height: 1)
label.layer.addSublayer(topBorder)

let bottomBorder = CALayer()
bottomBorder.borderColor = UIColor.black.cgColor;
bottomBorder.borderWidth = 1;
bottomBorder.frame = CGRect(x: 0, y: label.frame.height, width: label.frame.width, height: 1)
label.layer.addSublayer(bottomBorder)
2
  • Thank you! Exactly that's what I did Oct 13, 2016 at 21:12
  • This code helped a lot. Thank you for the solution.
    – Badrinath
    Aug 24, 2019 at 6:17
1

I've solved my problem by adding this two CALayers:

let bottomBorder: CALayer = CALayer()
let topBorder: CALayer = CALayer()
bottomBorder.borderColor = UIColor.mainColor().CGColor
topBorder.borderColor = UIColor.mainColor().CGColor
bottomBorder.borderWidth = 1
topBorder.borderWidth = 1
bottomBorder.frame =  CGRectMake(0, CGRectGetHeight(history.frame), CGRectGetWidth(history.frame), 1)
topBorder.frame = CGRectMake(0, 0, CGRectGetWidth(history.frame), 1)
history.layer.addSublayer(bottomBorder)
history.layer.addSublayer(topBorder)

Great thanks to @Teja and @Rajan!

1

[SWIFT 4.2]

I was trying to show that the bottom border to have this result :

enter image description here

I improved the extension of the post above to add the margins..

extension UIButton {

     func drawBorder(edges: [UIRectEdge], borderWidth: CGFloat, color: UIColor, margin: CGFloat) {
        for item in edges {
            let borderLayer: CALayer = CALayer()
            borderLayer.borderColor = color.cgColor
            borderLayer.borderWidth = borderWidth
            switch item {
            case .top:
                borderLayer.frame = CGRect(x: margin, y: 0, width: frame.width - (margin*2), height: borderWidth)
            case .left:
                borderLayer.frame =  CGRect(x: 0, y: margin, width: borderWidth, height: frame.height - (margin*2))
            case .bottom:
                borderLayer.frame = CGRect(x: margin, y: frame.height - borderWidth, width: frame.width - (margin*2), height: borderWidth)
            case .right:
                borderLayer.frame = CGRect(x: frame.width - borderWidth, y: margin, width: borderWidth, height: frame.height - (margin*2))
            case .all:
                drawBorder(edges: [.top, .left, .bottom, .right], borderWidth: borderWidth, color: color, margin: margin)
            default:
                break
            }
            self.layer.addSublayer(borderLayer)
        }
    }

}

Use :

mybutton.drawBorder(edges: [.bottom], borderWidth: 1, color: UIColor.darkGray, margin: 20)

It's works perfectly :)

1

You can add several layers instead of border, but you cannot affect corner radius to these like border, by the way here is just add borders to your project

import UIKit

extension UIView {

    func drawBorder(edges: [UIRectEdge], borderWidth: CGFloat, color: UIColor) {
        for item in edges {
            let borderLayer: CALayer = CALayer()
            borderLayer.borderColor = color.cgColor
            borderLayer.borderWidth = borderWidth
            switch item {
            case .top:
                borderLayer.frame = CGRect(x: 0, y: 0, width: frame.width, height: borderWidth)
            case .left:
                borderLayer.frame =  CGRect(x: 0, y: 0, width: borderWidth, height: frame.height)
            case .bottom:
                borderLayer.frame = CGRect(x: 0, y: frame.height - borderWidth, width: frame.width, height: borderWidth)
            case .right:
                borderLayer.frame = CGRect(x: frame.width - borderWidth, y: 0, width: borderWidth, height: frame.height)
            case .all:
                drawBorder(edges: [.top, .left, .bottom, .right], borderWidth: borderWidth, color: color)
            default:
                break
            }
            self.layer.addSublayer(borderLayer)
        }
    }
}
0

Another way of doing this is to add UIView as borders with height or width as a borderWidth. You can add them all hide/show depend on your use or only add top and bottom view for it.

This is really useful if you are not programmatically creating the view and need to use constraints.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.