CODEWITHSUNDEEP
ios
Chris G.
Chris G.

Reputation: 25964

UIView layer - remove one border

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

Upvotes: 0

Views: 2225

Answers (1)

Yun CHEN
Yun CHEN

Reputation: 6648

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: enter image description here

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: enter image description here

Upvotes: 1

Related Questions