围绕圆形视图的边框添加图层

Question

我在我的圆形视图周围添加了一个圆形层，并将其 position 设置为视图的中心，但该层被添加到不同的位置。以下是代码。

class CustomView: UIView {
    
    let outerLayer = CAShapeLayer()
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        self.layer.addSublayer(outerLayer)
    }
    override func layoutSubviews() {
        super.layoutSubviews()
        self.backgroundColor = UIColor.systemBlue
        self.layer.cornerRadius = self.bounds.height/2
        self.layer.borderWidth = 2.0
        self.layer.borderColor = UIColor.white.cgColor

        let outerLayerFrame = self.bounds.insetBy(dx: -5.0, dy: -5.0)
        outerLayer.frame = outerLayerFrame
        
        let path = UIBezierPath(ovalIn: outerLayerFrame)
        outerLayer.path = path.cgPath
        outerLayer.position = self.center

        outerLayer.strokeColor = UIColor.systemBlue.cgColor
        outerLayer.fillColor = UIColor.clear.cgColor
        outerLayer.lineWidth = 3
        
    }
}

谁能告诉我这里出了什么问题。

Answer 1

您想在实例化/初始化视图时设置图层属性，但它的大小可以（并且通常会）在那时和 auto-layout 将其调整为当前设备尺寸之间发生变化。

与 UIView 本身不同，图层不 auto-resize。

因此，您想在 layoutSubviews() 中设置框架和图层路径：

class CustomView: UIView {
    
    let outerLayer = CAShapeLayer()

    override init(frame: CGRect) {
        super.init(frame: frame)
        configure()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        configure()
    }

    // layoutSubviews is where you want to set your size
    //  and corner radius values
    override func layoutSubviews() {
        super.layoutSubviews()

        // make self "round"
        self.layer.cornerRadius = self.bounds.height/2

        // add a round path for outer layer
        let path = UIBezierPath(ovalIn: bounds)
        outerLayer.path = path.cgPath
        
    }
    
    private func configure() {
        
        self.backgroundColor = UIColor.systemBlue
        
        // setup layer properties here
        self.layer.borderWidth = 2.0
        self.layer.borderColor = UIColor.white.cgColor
        
        outerLayer.strokeColor = UIColor.systemBlue.cgColor
        outerLayer.fillColor = UIColor.clear.cgColor
        outerLayer.lineWidth = 3
        
        // add the sublayer here
        self.layer.addSublayer(outerLayer)

    }
    
}

结果（视图设置为 120 x 120 pts）：

Answer 2

所以，我意识到，是位置导致图层未居中对齐。

这是解决方案，我想-

class CustomView: UIView {
    
    let outerLayer = CAShapeLayer()
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        self.layer.addSublayer(outerLayer)
    }
    override func layoutSubviews() {
        super.layoutSubviews()
        self.backgroundColor = UIColor.systemBlue
        self.layer.cornerRadius = self.bounds.height/2
        self.layer.borderWidth = 2.0
        self.layer.borderColor = UIColor.white.cgColor

        let outerLayerBounds = self.bounds.insetBy(dx: -5.0, dy: -5.0)
        outerLayer.bounds = outerLayerBounds // should be bounds not frame
      
        let path = UIBezierPath(ovalIn: outerLayerBounds)
        outerLayer.path = path.cgPath
        outerLayer.position = CGPoint(x: outerLayerBounds.midX , y: outerLayerBounds.midY) //self.center doesn't center the layer, had to calculate the center of the layer manually

        outerLayer.strokeColor = UIColor.systemBlue.cgColor
        outerLayer.fillColor = UIColor.clear.cgColor
        outerLayer.lineWidth = 3
    }
   
}

围绕圆形视图的边框添加图层

issue adding layer around a circular view's border

ios

view

calayer

uibezierpath