iOS Swift圓圖

Question

任何建議如何為 iOS Swift 實施以下進度表？

Answer 1

只需將其分解為單獨的步驟即可。

第一個問題是如何繪制各個刻度線。

一種方法是使用UIBezierPath繪制四個筆畫：

• 外徑順時針圓弧；
• 到內徑的一條線；
• 在內半徑處的逆時針圓弧； 和
• 一條線回到外半徑。

事實證明，您可以跳過這兩行，只需添加這兩條弧線，然后關閉路徑即可。 UIBezierPath將為您添加兩條弧線之間的線。 例如：

let startAngle: CGFloat = 2 * .pi * (CGFloat(i) - 0.2) / CGFloat(tickCount)
let endAngle: CGFloat = 2 * .pi * (CGFloat(i) + 0.2) / CGFloat(tickCount)

// create path for individual tickmark

let path = UIBezierPath()
path.addArc(withCenter: center, radius: outerRadius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
path.addArc(withCenter: center, radius: innerRadius, startAngle: endAngle, endAngle: startAngle, clockwise: false)
path.close()

// use that path in a `CAShapeLayer`

let shapeLayer = CAShapeLayer()
shapeLayer.fillColor = …
shapeLayer.strokeColor = UIColor.clear.cgColor
shapeLayer.path = path.cgPath

// add it to our view’s `layer`

view.layer.addSublayer(shapeLayer)

在0和tickCount之間對i重復此操作，其中tickCount為90 ，並且您有 n.nety 刻度線：

顯然，使用任何你想要的 colors，將你的進度范圍之外的那些設為灰色，等等。但希望這說明了如何使用UIBezierPath渲染兩個弧並用指定顏色填充每個相應刻度線的形狀的基本思想。

---

例如

class CircularTickView: UIView {
    var progress: CGFloat = 0.7 { didSet { setNeedsLayout() } }

    private var shapeLayers: [CAShapeLayer] = []
    private let startHue: CGFloat = 0.33
    private let endHue: CGFloat = 0.66
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        shapeLayers.forEach { $0.removeFromSuperlayer() }
        shapeLayers = []
        
        let outerRadius = min(bounds.width, bounds.height) / 2
        let innerRadius = outerRadius * 0.7
        let center = CGPoint(x: bounds.midX, y: bounds.midY)
        let tickCount = 90
        
        for i in 0 ..< tickCount {
            let shapeLayer = CAShapeLayer()
            shapeLayer.fillColor = color(percent: CGFloat(i) / CGFloat(tickCount)).cgColor
            shapeLayer.strokeColor = UIColor.clear.cgColor
            
            let startAngle: CGFloat = 2 * .pi * (CGFloat(i) - 0.2) / CGFloat(tickCount)
            let endAngle: CGFloat = 2 * .pi * (CGFloat(i) + 0.2) / CGFloat(tickCount)
            
            let path = UIBezierPath()
            path.addArc(withCenter: center, radius: outerRadius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
            path.addArc(withCenter: center, radius: innerRadius, startAngle: endAngle, endAngle: startAngle, clockwise: false)
            path.close()
            shapeLayer.path = path.cgPath
            
            layer.addSublayer(shapeLayer)
            shapeLayers.append(shapeLayer)
        }
    }

    private func color(percent: CGFloat) -> UIColor {
        if percent > progress {
            return .lightGray
        } 
        
        let hue = (endHue - startHue) * percent + startHue
        return UIColor(hue: hue, saturation: 1, brightness: 1, alpha: 1)
    }
}

顯然，您會希望根據自己的需要進行調整。 也許改變顏色算法。 也許從 12 點而不是 3 點開始。 等等。細節不如摸索如何將帶有路徑的形狀圖層添加到 UI 的基本概念重要。