UIView layer - remove one border

Question

I have created a swift extension so I can add a border to a UIView in Interface builder:

@IBDesignable public extension UIView {

    @IBInspectable var borderColor:UIColor? {
        set {
            layer.borderColor = newValue!.cgColor
        }
        get {
            if let color = layer.borderColor {
                return UIColor(cgColor: color)
            }
            else {
                return nil
            }
        }
    }
    @IBInspectable var borderWidth:CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }
    @IBInspectable var cornerRadius:CGFloat {
        set {
            layer.cornerRadius = newValue
            clipsToBounds = newValue > 0
        }
        get {
            return layer.cornerRadius
        }
    }
}

Now I need to remove the left side border, how do you do that? I have tried the following(inheriting from the following UIView base class) to add a layer on top with a white color:

class BaseViewWithLayers: UIView {

    var l: CALayer?
    override func layoutSubviews() {
        l!.frame = CGRect(x: 0, y: 0, width: 1, height: self.frame.size.height)
    }

    override func awakeFromNib() {
        self.l = CALayer()
        l?.borderColor = UIColor.red.cgColor
        l?.borderWidth = 1
        self.layer.insertSublayer(self.l!, above: self.layer)
//        self.layer.addSublayer(self.l!)
    }
}

Please note: it should work with all kinds of movements of the view, that is why I am using `layoutSubviews()

I kind of prefer adding one layer to hide one border, instead of creating 3 layers.

Basically can you add a white layer on top to hide the left border?

Do you have any idea? Thanks

Answer 1

No, you cannot hide the left border by this way. The default layer's border will be on the top always, so its sub layers will be covered by top layer border. Like this:

So please set 0 to layer.borderWidth, and draw the other 3 side borders manually.

For the cornerRadius, use CAShapeLayer and UIBezierPath to draw 1/4 circle to fulfill same effect:

    let cornerLayer = CAShapeLayer()
    cornerLayer.frame = self.bounds
    let path = UIBezierPath()

    path.move(to: CGPoint(x: 10, y: 0))
    path.addArc(withCenter: CGPoint(x: 10, y: 10), radius: 10, startAngle: CGFloat.pi * 3.0 / 2.0, endAngle: CGFloat.pi, clockwise: false)


    cornerLayer.strokeColor = UIColor.red.cgColor
    cornerLayer.fillColor = UIColor.clear.cgColor
    cornerLayer.lineWidth = 1;
    cornerLayer.path = path.cgPath

    self.layer.addSublayer(cornerLayer)

The corner will be like: