ios - 拆分不同颜色的自定义 UIView

Question

我从情节提要制作了这个阶梯式进度条，并通过传递字符串数组（每个字符串添加一个步骤，因此标签和图标）以编程方式配置步骤数（最多 8 个）。

白色视图是基础视图，绿色视图是进度条，当然是 UIView。

要为进度设置动画，我只需设置进度条的宽度约束（我可以为指定步骤的百分比设置动画）。

现在，我的目标是将每个步骤的进度条分成不同的颜色：

例如，“Primo”步骤可以是蓝色，第二个步骤是红色等等，每个步骤都有不同的颜色。

我敢打赌我应该为进度条子类化 UIView 并在 draw 方法中发挥作用，但我的目标是将一系列步骤 (UIStackView) 传递给进度条并使用 setColor(forStep:1, color: .blue ) 给定指定步骤的 frame.width。

你可以帮帮我吗？

最好的。

标签： iosswift

Answer 1

您可以在里面添加图层，UIView.layer如下所示 -

class CustomProgress: UIView {
    var layersCache: [Int: CALayer] = [:]
    
    func setColor(forStep step: Int, color: UIColor) {
        let stepLayer: CALayer
        if let layer = layersCache[step] {
            stepLayer = layer
        } else {
            stepLayer = CALayer()
            layersCache[step] = stepLayer
        }
        
        let size = self.bounds.size
        let stepWidth = size.width / 8 /// totalSteps
        stepLayer.frame = CGRect(x: CGFloat(step) * stepWidth, y: 0, width: stepWidth, height: size.height)
        
        stepLayer.backgroundColor = color.cgColor
        self.layer.insertSublayer(stepLayer, at: 0)
    }
}