倾斜的渐变层 [英] 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.

当要指定在[c2>和endPoint之间的梯度应该在哪里发生时，使用locations数组.例如，如果您希望颜色仅出现在起点和终点范围的中间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设置为CGPoint(x: 1, y: 1)，将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的更改，该视图的frame的更改也一样. gradientLayer.但是，更好的是，重写视图的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屋！