问题在圆形视图的边框周围添加图层答案

【问题标题】：issue adding layer around a circular view's border问题在圆形视图的边框周围添加图层
【发布时间】：2020-09-06 11:59:50
【问题描述】：

我在我的圆形视图周围添加一个圆形图层并将其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
        
    }
}

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

【问题讨论】：

标签： ios view calayer uibezierpath

【解决方案1】：

您希望在实例化/初始化视图时设置图层属性，但其大小可以（并且通常会）在此期间和自动布局将其调整为当前设备尺寸时发生变化。

与UIView 本身不同，图层不会自动调整大小。

所以，你想在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）：

【讨论】：

我知道，我只应该在 layoutSubviews 中进行框架和边界相关的更改。我只是在一个地方找到了我的问题。然而，在看到你的代码之后，我意识到我从来不需要指定位置。设定界限就足够了。感谢您提供更好的解决方案。

【解决方案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
    }
   
}

【讨论】：