UICollectionViewCell

Question

TL;DR: Have 2 views (top and bottom) that need CAGradientLayer. Unexpected behavior is that only Top View displays gradient. Bottom doesn't display Gradient.

在我们的应用程序中，我有一个具有 UICollectionView 的视图，如图所示：

对于每个 UICollectionViewCell，我创建了一个自定义 class 来处理布局细节。在 UICollectionViewCell 上，我有一个 "topBackground" 和 "bottomBackground"，它们是包含每个 Cell 信息标签的视图：

@IBOutlet weak var topBackground: UIView! 
@IBOutlet weak var bottomBackground: UIView!

顶视图和底视图、标签显示正确且约束有效。

我们决定在顶视图和底视图上添加渐变效果（查看图像的详细信息，顶部渐变标记为红色，底部细节标记为黄色）。

对于代码，我们使用了以下内容：

override func layoutSubviews() {
        if !didLayout{                
             // Top View
            let gradientLayer: CAGradientLayer = CAGradientLayer()
            gradientLayer.frame = topBackground.frame
            gradientLayer.colors =
                [UIColor.black.withAlphaComponent(0.5).cgColor, UIColor.black.withAlphaComponent(0).cgColor]
            gradientLayer.startPoint = CGPoint(x: 0.5, y: 0)
            gradientLayer.endPoint = CGPoint(x: 0.5, y: 0.9)
            topBackground.layer.insertSublayer(gradientLayer, at: 0)
            topBackground.backgroundColor = .clear
            topBackground.alpha = 0.5

            // Bottom View
            let gradientLayerBottom: CAGradientLayer = CAGradientLayer()
            gradientLayerBottom.frame = bottomBackground.frame
            gradientLayerBottom.colors =
                [UIColor.black.withAlphaComponent(0.5).cgColor, UIColor.black.withAlphaComponent(0).cgColor]
            gradientLayerBottom.startPoint = CGPoint(x: 0.5, y: 0.9)
            gradientLayerBottom.endPoint = CGPoint(x: 0.5, y: 0)
            bottomBackground.layer.insertSublayer(gradientLayerBottom, at: 0)
            bottomBackground.backgroundColor = .clear
            bottomBackground.alpha = 0.5

            didLayout = true
        } else {
            print("already performed layout")
        }
    }

变量didLayout是为了避免在滚动集合视图时重叠多个渐变。

结果：

顶视图显示渐变（预期）。
底部视图未显示渐变（意外）。

我们知道底部视图在约束条件下工作，因为如果我们将颜色更改为 .clear 以外的颜色，它会显示其他颜色。只是gradientLayerBottom没有显示。

关于如何让 gradientLayerBottom 显示的任何想法？

Answer 1

试试这个

extension UIView{
    func setGradientBackgroundImage(colorTop: UIColor, colorBottom: UIColor) {
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [colorTop.cgColor, colorBottom.cgColor]
        gradientLayer.frame = bounds
        layer.insertSublayer(gradientLayer, at: 0)
    }
}

放入UICollectionViewCellclass

class CollVwCell : UICollectionViewCell{

    @IBOutlet weak var VwTop: UIView!
    @IBOutlet weak var VwBottom: UIView!

    override func awakeFromNib() {
        super.awakeFromNib()
        DispatchQueue.main.async {
            self.VwTop.setGradientBackgroundImage(colorTop: UIColor.red, colorBottom: UIColor.white)
            self.VwBottom.setGradientBackgroundImage(colorTop: UIColor.white, colorBottom: UIColor.purple)
        }
    }
}

输出：

UICollectionViewCell - 将不同的 CAGradientLayer 应用于不同的 UIView

UICollectionViewCell - Applying different CAGradientLayer to different UIView

ios

cagradientlayer

swift