在收集视图中添加淡出效果

Question

如下图所示，我想在收集视图的顶部添加淡出效果。这张照片中的列表是Instagram实时广播中存在的功能。我尝试了Cagradientlayer，但没有得到我想要的结果。事先感谢您的帮助。

： https://i.sstatic.net/guj7777.jpg

Instagram实时列表 希望这种效果始终保持在列表的顶部。顺便说一句，我尝试使用Cagradientlayer尝试的事情：

private func setFadeOut() {
let collectionViewGradient = CAGradientLayer()
collectionViewGradient.colors = [
    UIColor.gray.withAlphaComponent(0.2).cgColor,
    UIColor.gray.withAlphaComponent(0.1).cgColor,
    UIColor.clear.cgColor
]
collectionViewGradient.frame = view.bounds
collectionViewGradient.startPoint = CGPoint(x: 0, y: 0)
collectionViewGradient.endPoint = CGPoint(x: 0, y: 1)
collectionView.layer.insertSublayer(collectionViewGradient, at: 0)
}

Answer 1

您没有正确配置梯度。您的颜色顺序不正确，您缺少位置。

尝试以下操作：

    private func setFadeOut() {
    let collectionViewGradient = CAGradientLayer()
    collectionViewGradient.colors = [
        UIColor.gray.cgColor,
        UIColor.white.cgColor,
        UIColor.white.cgColor,
        UIColor.gray.cgColor
    ]
    collectionViewGradient.locations = [0, 0.1, 0.9, 1.0]
    collectionViewGradient.frame = view.bounds
    collectionView.layer.insertSublayer(collectionViewGradient, at: 0)
}

Answer 2

您可以尝试使用下面的视图类。
将梯度视图放置在任何位置（顶部，底部），设置其框架，并确保Z订购还可以（如果需要，将其放在前面）。
距离参数确定点中的过渡区域。

一个示例 - 如果将其放在顶部并将其框架高度设置为150，并且距离为100，则梯度将超过100点，其余50点在顶部将是纯黑色（或您设置的任何颜色）。

通常，您要放置它，以使其在安全区域过渡，其余不安全的区域是纯黑色（凹口等）。

查看实例需要以编程方式创建，但这无论如何您似乎都在做。对于接口构建器的使用，修改它并不困难。

import UIKit

class EdgeGradientView: UIView {
    
    static override var layerClass: AnyClass {
        return CAGradientLayer.self
    }
    
    enum Placement {
        case top
        case bottom
    }
    
    private let placement: Placement
    private let distance: Int
    private let color: UIColor
    
    init(placement: Placement, distance: Int, color: UIColor) {
        self.placement = placement
        self.distance = distance
        self.color = color
        
        super.init(frame: .zero)
        
        isUserInteractionEnabled = false

        configureGradient()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        updateGradient()
    }

    private func configureGradient() {
        let gradientLayer = layer as! CAGradientLayer
        gradientLayer.colors = [
            color.cgColor,
            color.cgColor,
            color.withAlphaComponent(0.0).cgColor
        ]
        switch placement {
        case .top:
            gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.0)
            gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)
        case .bottom:
            gradientLayer.startPoint = CGPoint(x: 0.5, y: 1.0)
            gradientLayer.endPoint = CGPoint(x: 0.5, y: 0.0)
        }
        
        updateGradient()

    }
    
    private func updateGradient() {
        let gradientLayer = layer as! CAGradientLayer
        gradientLayer.locations = [0.0, 1.0 - Double(distance) / Double(bounds.height), 1.0] as [NSNumber]
    }
}

实例化：

let gradient = EdgeGradientView(placement: .top, distance: 100, color: .black)