1

我通过子类化制作了一个自定义的圆形进度视图UIView，将CAShapeLayer子图层添加到其图层并覆盖drawRect()以更新形状图层的path属性。

通过制作 view@IBDesignable和progressproperty @IBInspectable，我能够在 Interface Builder 中编辑其值并实时查看更新后的贝塞尔路径。非必需品，但真的很酷！

接下来，我决定使路径动画化：每当您在代码中设置新值时，指示进度的弧线应该从零长度“增长”到达到圆的百分比（想想 Apple Watch 中 Activity 应用程序中的弧线） ）。

为了实现这一点，我用具有( ) 属性CAShapeLayer的自定义子类交换了我的子层，该属性被观察为动画的关键（我实现了,等）。CALayer@dynamic@NSManagedneedsDisplayForKey()actionForKey()drawInContext()

我的视图代码（相关部分）如下所示：

// Triggers path update (animated)
private var progress: CGFloat = 0.0 {
    didSet {
        updateArcLayer()
    }
}

// Programmatic interface:
// (pass false to achieve immediate change)
func setValue(newValue: CGFloat, animated: Bool) {
    if animated {
        self.progress = newValue
    } else {
        arcLayer.animates = false
        arcLayer.removeAllAnimations()
        self.progress = newValue
        arcLayer.animates = true
    }
}

// Exposed to Interface Builder's  inspector: 
@IBInspectable var currentValue: CGFloat {
    set(newValue) {
        setValue(newValue: currentValue, animated: false)
        self.setNeedsLayout()
    }
    get {
        return progress
    }
}

private func updateArcLayer() {
    arcLayer.frame = self.layer.bounds
    arcLayer.progress = progress
}

和层代码：

var animates: Bool = true
@NSManaged var progress: CGFloat

override class func needsDisplay(forKey key: String) -> Bool {
    if key == "progress" {
        return true
    }
    return super.needsDisplay(forKey: key)
}

override func action(forKey event: String) -> CAAction? {
    if event == "progress" && animates == true {
        return makeAnimation(forKey: event)
    }
    return super.action(forKey: event)
}

override func draw(in ctx: CGContext) {
    ctx.beginPath()

    // Define the arcs...
    ctx.closePath()
    ctx.setFillColor(fillColor.cgColor)
    ctx.drawPath(using: CGPathDrawingMode.fill)
}

private func makeAnimation(forKey event: String) -> CABasicAnimation? {
    let animation = CABasicAnimation(keyPath: event)

    if let presentationLayer = self.presentation() {
        animation.fromValue = presentationLayer.value(forKey: event)
    }

    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
    animation.duration = animationDuration
    return animation
}

动画有效，但现在我无法在 Interface Builder 中显示我的路径。

我试过prepareForInterfaceBuilder()像这样实现我的视图：

override func prepareForInterfaceBuilder() {
    super.prepareForInterfaceBuilder()

    self.topLabel.text = "Hello, Interface Builder!"
    updateArcLayer()
}

...并且标签文本更改反映在 Interface Builder 中，但路径未呈现。

我错过了什么吗？

4

1 回答 1

1

好吧，这不是很有趣吗...原来我的@Inspectable财产声明有一个非常愚蠢的错误。

你能发现吗？

@IBInspectable var currentValue: CGFloat {
    set(newValue) {
        setValue(newValue: currentValue, animated: false)
        self.setNeedsLayout()
    }
    get {
        return progress
    }
}

它应该是：

@IBInspectable var currentValue: CGFloat {
    set(newValue) {
        setValue(newValue: newValue, animated: false)
        self.setNeedsLayout()
    }
    get {
        return progress
    }
}

也就是说，我丢弃了传递的值 ( newValue) 并使用当前值 ( currentValue) 来设置内部变量。将值（始终为 0.0）“记录”到 Interface Builder（通过我的标签text属性！）给了我一个线索。

现在它工作正常，不需要drawRect()等。

于 2016-12-02T11:43:50.460 回答