有角度的渐变层 [英] Angled Gradient Layer

问题描述

我有自定义 UIView 类，它在 Swift 2 中呈现渐变.我正在努力制作一个有角度的渐变，以便它从左上角到右下角绘制.有人可以帮我一下吗?

I have custom UIView class that renders a gradient in Swift 2. I'm struggling with making an angled gradient so that it draws from the top-left to the bottom-right. Can somebody help me a bit?

import UIKit

class GradientView: UIView {

    let gradientLayer = CAGradientLayer()

    override func awakeFromNib() {
        // 1
        self.backgroundColor = ColorPalette.White

        // 2
        gradientLayer.frame = self.bounds

        // 3
        let color1 = ColorPalette.GrdTop.CGColor as CGColorRef
        let color2 = ColorPalette.GrdBottom.CGColor as CGColorRef
        gradientLayer.colors = [color1, color2]

        // 4
        gradientLayer.locations = [0.0, 1.0]

        // 5
        self.layer.addSublayer(gradientLayer)
    }

}

我怀疑这应该是别的东西，但无论我输入什么都没有改变.

I suspect this should be something else but whatever I input nothing changes.

gradientLayer.locations = [0.0, 1.0]

推荐答案

您不想使用 locations 来指定渐变的方向.而是使用 startPoint 和 endPoint 来实现这一点.

You don't want to use locations to specify the direction of the gradient. Instead use startPoint and endPoint for that.

locations 数组用于指定在 startPoint 和 endPoint 之间应该发生渐变的位置.例如，如果您希望颜色仅出现在起点和终点之间 10% 的范围内，您可以使用:

The locations array is used when one wants to specify where, in between startPoint and endPoint, the gradient should to take place. For example, if you want the colors to only take place in the middle 10% of the range from the start and end points, you'd use:

locations = [0.45, 0.55]

locations 数组不指定方向.startPoint 和 endPoint 可以.因此，对于从左上角到右下角的对角线渐变，您需要设置 CGPoint(x: 0, y: 0) 的 startPoint 和一个 endPoint 到 CGPoint(x: 1, y: 1).

The locations array doesn't dictate the direction. The startPoint and endPoint do. So, for a diagonal gradient from upper left to lower right, you would set startPoint of CGPoint(x: 0, y: 0) and an endPoint to CGPoint(x: 1, y: 1).

例如:

@IBDesignable
class GradientView: UIView {

    override class var layerClass: AnyClass { return CAGradientLayer.self }

    private var gradientLayer: CAGradientLayer { return layer as! CAGradientLayer }

    @IBInspectable var color1: UIColor = .white { didSet { updateColors() } }
    @IBInspectable var color2: UIColor = .blue  { didSet { updateColors() } }

    override init(frame: CGRect = .zero) {
        super.init(frame: frame)
        configureGradient()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        configureGradient()
    }

    private func configureGradient() {
        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
        gradientLayer.endPoint = CGPoint(x: 1, y: 1)
        updateColors()
    }

    private func updateColors() {
        gradientLayer.colors = [color1.cgColor, color2.cgColor]
    }

}

例如

注意，与当前问题无关:

Note, unrelated to the immediate issue:

• 如果您要将渐变添加为子图层，您需要在 layoutSubviews 中更新此子图层的 frame 以便作为视图的 bounds 发生变化，gradientLayer 的 frame 也会发生变化.但是，更好的是，覆盖视图的 layerClass，它不仅会为您实例化 CAGradientLayer，而且您还可以享受渐变的动态调整作为视图的大小变化，特别是更优雅地处理动画变化.

• If you’re going to add the gradient as a sublayer, you want to update this sublayer’s frame in layoutSubviews so that as the view's bounds changes, so does the frame of the gradientLayer. But, better than that, override the layerClass of the view, and it will not only instantiate the CAGradientLayer for you, but you also enjoy dynamic adjustments of the gradient as the view’s size changes, notably handling animated changes more gracefully.

同样，我设置了 color1 和 color2 以便它们触发渐变的更新，这样颜色的任何变化都会立即反映在视图.

Likewise, I set color1 and color2 such that they'll trigger an updating of the gradient, so that any changes in colors will be immediately reflected in the view.

我制作了这个 @IBDesignable，这样如果我把它放到自己的框架中，然后在 IB 中添加 GradientView，我会看到在 IB 中呈现的效果.

I made this @IBDesignable, so that if I drop this in its own framework, and then add the GradientView in IB, I'll see the effect rendered in IB.

有关 Swift 2 的实现，请参阅此答案的先前修订版.

For Swift 2 implementation, see previous revision of this answer.

这篇关于有角度的渐变层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！