CAGradientLayer 位置不正确

Question

我关注this 设置渐变位置的帖子。

我的代码：

let color1 = UIColor(red: 0.0/255.0, green: 231.0/255.0, blue: 198.0/255.0, alpha: 0.9).cgColor as CGColor
let color2 = UIColor(red: 0.0/255.0, green: 198.0/255.0, blue: 255.0/255.0, alpha: 0.9).cgColor as CGColor      
self.gradientLayer.colors = [color2, color1, color2]
self.gradientLayer.locations = [0.0, 0.10, 0.9]
self.gradientLayer.startPoint = CGPoint(x: 0, y: 0)
self.gradientLayer.endPoint = CGPoint(x: 1, y: 1)
viewMain.layer.insertSublayer(self.gradientLayer, at: 0)  

我的输出：

预期输出：

Answer 1

为了说明，我更改了startPoint/endPoint。 此代码可在 XCode Playground 中使用。这不是最好的 Swifty 代码，而是专注于逻辑/解释而不是纯 Swift 代码

共享设置：

import Foundation
import UIKit

let viewsWidth: CGFloat = 300.0
let viewsHeight: CGFloat = 400.0

修复代码的方法是修改locations:

let viewMain: UIView = UIView(frame: CGRect(x: 0, y: 0, width: viewsWidth, height: viewsHeight))
let color1 = UIColor(red: 0.0/255.0, green: 231.0/255.0, blue: 198.0/255.0, alpha: 0.9).cgColor
let color2 = UIColor(red: 0.0/255.0, green: 198.0/255.0, blue: 255.0/255.0, alpha: 0.9).cgColor
var gradientLayer = CAGradientLayer.init()
gradientLayer.frame = viewMain.bounds
gradientLayer.colors = [color2, color1, color1, color2]
gradientLayer.locations = [0.0, 0.2, 0.8, 1.0]
gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
viewMain.layer.insertSublayer(gradientLayer, at: 0)

viewMain //That's just for the Show Result action in Playground

ViewMain：

现在做一些解释。

让我们先在每个位置画一条线：

let otherView = UIView(frame: viewMain.bounds)
if let locations = gradientLayer.locations, let colors = gradientLayer.colors {
    for (index, aLocation) in locations.enumerated() {
        let aLine = UIView(frame: CGRect(x: viewsWidth*CGFloat(aLocation.floatValue)-2,
                                         y: 0,
                                         width: 4,
                                         height: viewsHeight))
        aLine.backgroundColor = UIColor(cgColor: colors[index] as! CGColor)
        otherView.addSubview(aLine)
    }
}

otherView //That's just for the Show Result action in Playground

其他视图：

现在，让我们为每一行绘制一个渐变，但只有一个（其余颜色设置为白色以简化）。

if let locations = gradientLayer.locations, let colors = gradientLayer.colors {
    let offset = 5
    let bigView = UIView(frame: CGRect(x: 0,
                                       y: 0,
                                       width: viewsWidth * CGFloat(locations.count) + CGFloat(offset),
                                       height: viewsHeight))

    for (index, _) in locations.enumerated() {

        let aGradientView = UIView(frame: CGRect(x: 0 + (viewsWidth + CGFloat(offset))*CGFloat(index),
                                                 y: 0,
                                                 width: viewsWidth,
                                                 height: viewsHeight))
        let aGradientLayer = CAGradientLayer()
        aGradientLayer.frame = aGradientView.bounds

        var aGradientColors = [CGColor](repeating: UIColor.white.cgColor, count: colors.count)
        aGradientColors[index] = colors[index] as! CGColor
        aGradientLayer.colors = aGradientColors
        aGradientLayer.locations = gradientLayer.locations
        aGradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
        aGradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
        aGradientView.layer.insertSublayer(aGradientLayer, at: 0)

        aGradientView.layer.borderColor = UIColor.black.cgColor
        aGradientView.layer.borderWidth = 2.0
        aGradientView.clipsToBounds = false
        bigView.addSubview(aGradientView)
    }

    bigView //That's just for the Show Result action in Playground
}

大视图：

图示说明了一切。

在每一“行”（图表 2），当您想要应用渐变（图表 3）时，颜色会从该行一直到下一行。这就是为什么您的第一个位置没有给出预期的结果。您需要放置中间步骤。