A CAShapeLayer is added as a sublayer of a view in a certain position:

// Use Bezier Path to create a rectangle shape
let barRect = CGRect(x: 0, y: 0, width: 10, height: 100)
let barPath = UIBezierPath(rect: barRect)
let bar = CAShapeLayer()
bar.path = barPath.cgPath
bar.lineWidth = 0.5
// Place anchor on lower left corner of the rectangle
bar.anchorPoint = CGPoint(x: 0, y: 1)
bar.bounds = CGRect(origin: CGPoint.zero, size: barRect.size)
// Position bar in view
bar.position = CGPoint(x: 0, y: 200)
layer.addSublayer(bar)

Later on, an action attempts to increase the height of the rectangle:

bar.bounds.size.height = 150

When this action is executed, the rectangle changes it’s position in the view, but not it’s height. The top of the rectangle moves to where the rectangle should be if the height is increased, but the bottom of the rectangle also moves up, maintaining the original height of the rectangle. What is the problem here? Thanks

>Solution :

Changing the layer’s bounds does not change the layer’s .path.

If your goal is simple rectangles, you can use CALayer instead of CAShapeLayer with a path.

Here’s a quick example:

class BarView: UIView {
    
    let bar1 = CAShapeLayer()
    let bar2 = CALayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    func commonInit() -> Void {
        
        let barRect = CGRect(x: 0, y: 0, width: 10, height: 100)
        let barPath = UIBezierPath(rect: barRect)
        bar1.path = barPath.cgPath

        bar1.lineWidth = 0.5
        // Place anchor on lower left corner of the rectangle
        bar1.anchorPoint = CGPoint(x: 0, y: 1)
        bar1.bounds = CGRect(origin: CGPoint.zero, size: barRect.size)
        // Position bar in view
        bar1.position = CGPoint(x: 0, y: 200)
        layer.addSublayer(bar1)
        
        bar2.borderWidth = 0.5
        // Place anchor on lower left corner of the rectangle
        bar2.anchorPoint = CGPoint(x: 0, y: 1)
        bar2.bounds = CGRect(origin: CGPoint.zero, size: barRect.size)
        // Position bar in view
        bar2.position = CGPoint(x: 40, y: 200)
        layer.addSublayer(bar2)

        bar1.fillColor = UIColor.red.cgColor
        bar1.strokeColor = UIColor.cyan.cgColor
        
        bar2.backgroundColor = UIColor.cyan.cgColor
        bar2.borderColor = UIColor.red.cgColor

        self.backgroundColor = .yellow
        
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        // this does not change the layer's PATH
        bar1.bounds.size.height = bar1.bounds.size.height == 150 ? 100 : 150
        bar2.bounds.size.height = bar2.bounds.size.height == 150 ? 100 : 150
    }
    
}

and a sample controller:

class BarLayerVC: UIViewController {
    
    let someView = BarView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = UIColor(white: 0.95, alpha: 1.0)
        
        someView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(someView)
        
        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            
            someView.widthAnchor.constraint(equalToConstant: 100.0),
            someView.centerXAnchor.constraint(equalTo: g.centerXAnchor),
            
            someView.heightAnchor.constraint(equalToConstant: 200.0),
            someView.centerYAnchor.constraint(equalTo: g.centerYAnchor),
            
        ])
        
    }
    
}

Tapping the yellow "BarView" will toggle the bar bounds heights between 100 and 150 … Red bar is your original CAShapeLayer and Cyan bar is a CALayer: