swift 如何正确地将视图添加到图层中

问题描述

我有一个仪表视图。这里最小化的代码：

class GaugeView: UIView {
    // MARK: PROPERTIES

    private let labelFactory = LabelFactory()
    
    /// Minimum value.
    var minValue: Double = 0
    /// Maximum value.
    var maxValue: Double = 100
    
    /// The thickness of the ring.
    private var ringThickness: CGFloat = 30
    
    private var startAngle: CGFloat = .pi * 3/4 + .pi/20
    private var endAngle: CGFloat = .pi/4 + .pi * 2
    private let points = 24
    
    private lazy var ellipseLayer: CAShapeLayer = {
        let layer = CAShapeLayer()
        layer.contentsScale = UIScreen.main.scale
        layer.fillColor = UIColor.clear.cgColor
        layer.lineCap = CAShapeLayerLineCap.butt
        layer.lineJoin = CAShapeLayerLineJoin.bevel
        layer.strokeEnd = 0
        return layer
    }()
    
    // MARK: DRAWING
    
    override open func draw(_ rect: CGRect) {
        
        addLayer(ellipseLayer)
        drawBorderedLayer(&ellipseLayer)
        
        let subView = buildCircleView(text: "1",size: 50)
        addSubview(subView)
        subView.snp.makeConstraints {
            $0.size.equalTo(50)
        }
    }
    
    private func drawBorderedLayer(_ subLayer: inout CAShapeLayer) {
        let thickness: CGFloat = 30
        let center = CGPoint(x: bounds.width/2,y: bounds.height / 2)
        let radius: CGFloat = min(bounds.width,bounds.height) / 2 + 40
        
        subLayer.strokeEnd = CGFloat((30 - minValue)/(maxValue - minValue))
        subLayer.strokeColor = UIColor.white.cgColor
        
        subLayer.frame = CGRect(x: center.x - radius - thickness / 2,y: center.y - radius - thickness / 2,width: (radius + thickness / 2 ) * 2,height: (radius + thickness / 2) * 2)
        subLayer.bounds = subLayer.frame
        let smoothedpath = UIBezierPath(arcCenter: subLayer.position,radius: radius,startAngle: startAngle,endAngle: endAngle,clockwise: true)
        subLayer.path = smoothedpath.cgPath
        subLayer.linewidth = CGFloat(thickness)
    }
    
    private func addLayer(_ subLayer: CAShapeLayer) {
        if subLayer.superlayer == nil {
            layer.addSublayer(subLayer)
        }
    }
    
    private func addView(_ subView: UIView) {
        if subView.superview == nil {
            addSubview(subView)
        }
    }
    
    private func buildCircleView(
        text: String,size: CGFloat) -> UIView {
        let containerView = UIView()
        let circleView = UIView(frame: .init(x: 0,y: 0,width: size,height: size))
        circleView.layer.cornerRadius = size / 2
        circleView.layer.borderWidth = 2
        circleView.layer.borderColor = UIColor.white.cgColor
        circleView.backgroundColor = Color.grayBackground
        
        let label = labelFactory.make(withStyle: .headingH2,text: text,textColor: .white,textAlignment: .center)
        circleView.addSubview(label)
        label.snp.makeConstraints { $0.center.equalToSuperview() }
        
        containerView.addSubview(circleView)
        return containerView
    }
}

图片：

我想在椭圆层中添加圆形视图：

...
let subView = buildCircleView(text: "1",size: 50)
ellipseLayer.addSublayer(subView.layer)
subView.snp.makeConstraints {
  $0.size.equalTo(50)
}
...

屏幕上只显示结果：

如何将圆形视图以正确的方式添加到椭圆中。喜欢这里：

这是我的视图控制器：

class ViewController {

  override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .black

    private let gaugeView = GaugeView()
    gaugeView.layer.masksToBounds = false
    gaugeView.setNeedsdisplay()

    [gaugeView].forEach(view.addSubview(_:))
    gaugeView.snp.makeConstraints {
      $0.size.equalTo(300)
      $0.center.equalToSuperview()
    }
  }
} 

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）