对 UICollectionView 的顶部和底部应用淡入淡出效果答案

【问题标题】：Apply fade effect to top and bottom of UICollectionView对 UICollectionView 的顶部和底部应用淡入淡出效果
【发布时间】：2017-11-03 13:13:50
【问题描述】：

我已经阅读了这里的示例，但我无法按照我想要的方式进行操作，不知何故，我的渐变示例卡在屏幕中间，无法按预期工作。

我有一个UICollectionView，它用垂直滚动填充整个屏幕。

我希望UICollectionView 的顶部和底部为黑色，中间为透明（因为我使用的是黑色 blackgroundColor）。

我尝试应用渐变，但不知何故未能完成我想要的。

这是我的代码：

let gradient = CAGradientLayer()
gradient.frame = view.bounds
gradient.colors = [UIColor.black.cgColor, UIColor.clear.cgColor, UIColor.black.cgColor]
gradient.startPoint = CGPoint(x: 1, y: 0)
gradient.endPoint = CGPoint(x: 1, y: 1)
view.layer.mask = gradient

上面的代码将渐变放置在屏幕中间，但是是倒置的。它在屏幕的顶部和底部以及中间部分是透明的，如果褪色到完全黑色。

我正在尝试创建这样的东西：

感谢您的帮助

【问题讨论】：

标签： ios swift uicollectionview calayer

【解决方案1】：

你可以通过改变你的颜色线来实现这一点：

gradient.colors = [
    UIColor(white: 1.0, alpha: 0).cgColor,
    UIColor(white: 1.0, alpha: 1).cgColor,
    UIColor(white: 1.0, alpha: 0).cgColor
]

或者，如果您想更好地控制渐变，您还可以使用下面的代码并使用位置和/或颜色 alpha 值：

let gradient = CAGradientLayer()
gradient.frame = view.bounds
gradient.colors = [
    UIColor(white: 1, alpha: 0).cgColor,
    UIColor(white: 1, alpha: 1).cgColor,
    UIColor(white: 1, alpha: 1).cgColor,
    UIColor(white: 1, alpha: 0).cgColor
]
gradient.locations = [0, 0.4, 0.6, 1]
view.layer.mask = gradient

文档中的原因；

一个可选层，其 alpha 通道用于屏蔽层的内容。

图层的 Alpha 通道决定了图层的内容和背景有多少可以透过。完全或部分不透明的像素允许底层内容显示出来，但完全透明的像素会阻挡该内容。

【讨论】：