如何在UIImageView最底部的小区域应用CAGradientLayer？

Question

目前，我有以下入门屏幕。

我想在图像底部应用一些渐变效果。

我想应用透明颜色到黑色的过渡，从图像的 70% (0.7) 高度，直到图像的 100% (1.0) 高度。

它应该类似于以下示例（查看屏幕底部）

我认为以下代码可能有效（我从透明颜色更改为红色，以便更好地可视化场景背后发生的情况）

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    
    // Remove any existing gradient layers to prevent stacking
    demoImageView.layer.sublayers?.forEach { layer in
        if layer is CAGradientLayer {
            layer.removeFromSuperlayer()
        }
    }

    let gradientLayer = CAGradientLayer()

    // Set the gradient colors - from clear to black.
    // We use red so that we can have better visualization to see what's going on.
    gradientLayer.colors = [UIColor.red.cgColor, UIColor.black.cgColor]

    gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.7)
    gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)

    // Set the frame of the gradient layer to match the imageView's bounds
    gradientLayer.frame = demoImageView.bounds

    // Add the gradient layer to the imageView's layer
    demoImageView.layer.addSublayer(gradientLayer)
}

整个图像被红色（清晰的颜色）覆盖，看不到黑色。

有人知道我的代码有什么问题吗？我尝试尝试使用gradientLayer.locations。

但是，还是没能达到我想要的效果😔

谢谢你。

Answer 1

这是一个很常见的需求。让我们发明一个渐变视图。它从底部向上覆盖主视图，仅覆盖到渐变的高度。通过将视图的 layerClass 设置为

CAGradientLayer.self

，视图“托管”一个渐变层，不是作为子层，而是作为

its

层。然后我们必须配置视图的图层，如下所示：

• 它的

  startPoint

  和

  endPoint

  应该分别是

  (x: 0.5, y: 0)

  和

  (x: 0.5, y: 1)

  。这将为我们提供从上到下流动的垂直线性渐变。

• 它的颜色应该是（对于我们的第一次尝试）两个 CGColor 的数组，一个表示透明，一个表示黑色。

class GradientView: UIView {
    override class var layerClass: AnyClass { CAGradientLayer.self }

    override init(frame: CGRect) {
        super.init(frame: frame)
        isOpaque = false
        if let gradient = self.layer as? CAGradientLayer {
            gradient.startPoint = .init(x: 0.5, y: 0)
            gradient.endPoint = .init(x: 0.5, y: 1)
            gradient.colors = [UIColor.clear.cgColor, UIColor.black.cgColor]
        }
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

为了测试它，我们在视图控制器视图的底部插入一个：

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    let v = GradientView()
    v.frame = CGRect(x: 0, y: self.view.bounds.height - 100, width: self.view.bounds.width, height: 100)
    self.view.addSubview(v)
    self.view.backgroundColor = .green
}

结果：

现在，如果您不太喜欢这样，您可以使用 CAGradientLayer 的规范。例如，我们可以通过设置三个位置（而不是默认的两个位置）来为透明部分添加更多空间，例如 0.0、0.3 和 1.0；那么颜色将是三种颜色的数组：透明、透明和黑色。我们还可以添加第四个位置，以便尽早获得更多黑色。

gradient.locations = [0.0, 0.3, 0.9, 1.0]
gradient.colors = [UIColor.clear.cgColor, UIColor.clear.cgColor, UIColor.black.cgColor, UIColor.black.cgColor]

结果：

这个例子应该足以让你根据自己的喜好进行调整。