使用CAGradientLayer旋转UIControl无法正确更新Swift

时间:2019-04-10 10:04:01

标签: swift cglayer

我没有使用常规按钮,而是将UIControl细分为子类,因为我需要为其添加渐变。我还提供一种方法来添加阴影和活动指示器(在下图中不可见)作为有状态的按钮,以防止用户(例如,在进行API调用时)敲击该按钮。

尝试旋转UIControl确实很棘手,为了做到这一点,我将阴影作为一个单独的视图添加到了包含UIControl的容器视图中,因此阴影可以被添加。

现在的问题是控件的行为不像旋转视图-让我为您展示上下文的屏幕抓取: enter image description here

这是旋转中点,但几乎可以看到-图像显示,渐变是图像中蓝色UIView长度的75%。

https://github.com/stevencurtis/statefulbutton

为了执行此旋转,我移除了shadowview,然后将渐变框架的框架更改为其边界,这就是问题所在。

func viewRotated() {
    CATransaction.setDisableActions(true)

    shadowView!.removeFromSuperview()
    shadowView!.frame = self.frame
    shadowView!.layer.masksToBounds = false
    shadowView!.layer.shadowOffset = CGSize(width: 0, height: 3)
    shadowView!.layer.shadowRadius = 3
    shadowView!.layer.shadowOpacity = 0.3
    shadowView!.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: 20, height: 20)).cgPath
    shadowView!.layer.shouldRasterize = true
    shadowView!.layer.rasterizationScale = UIScreen.main.scale

    self.gradientViewLayer.frame = self.bounds
    self.selectedViewLayer.frame = self.bounds

    CATransaction.commit()

    self.insertSubview(shadowView!, at: 0)

}

因此通过父视图控制器调用此旋转方法:

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)
    coordinator.animate(alongsideTransition: { context in
        context.viewController(forKey: UITransitionContextViewControllerKey.from)
        //inform the loginButton that it is being rotated
        self.loginButton.viewRotated()
    }, completion: { context in
        //  can call here when completed the transition
    })
}

我知道这是问题所在,我想这不是在正确的时间以与UIView相同的方式发生的。现在的问题是,我已经尝试了很多方法来使其正常工作,而我的最佳解决方案(上述)还不存在。

建议使用UIButton,将图像用于渐变(请不要使用渐变图像作为UIButton的背景,我已经尝试过)是没有帮助的第三方图书馆。这是我的工作,它可以正常运行,但对我来说不是可以接受的工作,我希望它能像通常的视图一样工作(或至少知道为什么不这样)。我也尝试了上面的其他解决方案,并尝试了自己的UIControl。我知道如果有API调用,我可以锁定视图,或者使用其他方式来阻止用户多次按下按钮。我正在尝试解决我的问题,而不是提出使用CAGradientLayer解决此问题的方法。

问题:我需要以UIControlView为背景,以CAGradientLayer为背景的UIView旋转,并且不显示上图中显示的问题。

完整示例: https://github.com/stevencurtis/statefulbutton

1 个答案:

答案 0 :(得分:6)

这是工作代码:

https://gist.github.com/alldne/22d340b36613ae5870b3472fa1c64654

这些是我对您的代码的建议:

1。设置大小和子层位置的合适地方

视图的大小(即按钮)是在布局完成后确定的。您应该做的只是在布局后设置适当的子层大小。因此,我建议您在layoutSubviews中设置渐变子层的大小和位置。

    override func layoutSubviews() {
        super.layoutSubviews()

        let center = CGPoint(x: self.bounds.width / 2, y: self.bounds.height / 2)
        selectedViewLayer.bounds = self.bounds
        selectedViewLayer.position = center
        gradientViewLayer.bounds = self.bounds
        gradientViewLayer.position = center
    }

2。您无需使用多余的视图即可绘制阴影

删除shadowView,然后设置图层属性:

layer.shadowOffset = CGSize(width: 0, height: 3)
layer.shadowRadius = 3
layer.shadowOpacity = 0.3
layer.shadowColor = UIColor.black.cgColor
clipsToBounds = false

如果您必须使用额外的视图来绘制阴影,则可以在init()中添加一次视图,并在layoutSubviews中设置适当的大小和位置,也可以通过编程方式设置自动布局约束到超级视图。

3。动画时长和定时功能

设置适当的尺寸后,渐变图层和容器视图的动画无法很好地同步。

似乎:

  • 在旋转过渡期间,协调器(UIViewControllerTransitionCoordinator)具有其自己的过渡持续时间和缓动功能。
  • 持续时间和缓动功能会自动应用于所有子视图(UIView)。
  • 但是,如果没有关联的CALayer,这些值将不会应用于UIView。因此,它使用CoreAnimation的默认计时功能和持续时间。

要同步动画,请显式设置动画持续时间和计时功能,如下所示:

class ViewController: UIViewController {
    ...

    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransition(to: size, with: coordinator)
        CATransaction.setAnimationDuration(coordinator.transitionDuration)
        CATransaction.setAnimationTimingFunction(coordinator.completionCurve.timingFunction)
    }

    ...
}

// Swift 4
extension UIView.AnimationCurve {
    var timingFunction: CAMediaTimingFunction {
        let functionName: CAMediaTimingFunctionName
        switch self {
        case .easeIn:
            functionName = kCAMediaTimingFunctionEaseIn as CAMediaTimingFunctionName
        case .easeInOut:
            functionName = kCAMediaTimingFunctionEaseInEaseOut as CAMediaTimingFunctionName
        case .easeOut:
            functionName = kCAMediaTimingFunctionEaseOut as CAMediaTimingFunctionName
        case .linear:
            functionName = kCAMediaTimingFunctionLinear as CAMediaTimingFunctionName
        }
        return CAMediaTimingFunction(name: functionName as String)
    }
}