淡出 UICollectionView 中的项目答案

【问题标题】：Fading out items in UICollectionView淡出 UICollectionView 中的项目
【发布时间】：2014-06-30 13:29:03
【问题描述】：

我有一个 UICollectionView，我正在按照这个链接实现粘性标题：http://blog.radi.ws/post/32905838158/sticky-headers-for-uicollectionview-using#notes

它工作得非常好，但是我的窗口应用了背景图像，并且我的标题视图具有透明背景。因此，当我的项目滚动到标题视图上方时，您仍然可以看到它们。

理想情况下，我会用渐变淡出单元格，直到它出现在标题视图后面时它是不可见的。

谢谢。

【问题讨论】：

你能再解释一下吗。当单元格在标题视图下时，是否要将单元格的 alpha 设置为 0.1？
@Ramshad 我添加了更多细节。理想情况下，我希望单元格开始以渐变方式淡出，并在它们位于标题视图后面时完全隐藏。

标签： ios objective-c cocoa-touch uikit uicollectionview

【解决方案1】：

您还没有发布任何代码，所以这里不看代码就试一试。只需在您的 UICollectionView 的超级视图上设置一个遮罩层，您就可以开始了：

CAGradientLayer *gradient = [CAGradientLayer layer];

gradient.frame = self.collectionView.superview.bounds;
gradient.colors = @[(id)[UIColor clearColor].CGColor, (id)[UIColor blackColor].CGColor];
// Here, percentage would be the percentage of the collection view
// you wish to blur from the top. This depends on the relative sizes
// of your collection view and the header.
gradient.locations = @[@0.0, @(percentage)];

self.collectionView.superview.layer.mask = gradient;

要使此解决方案正常工作，您必须将集合视图嵌入到它自己的超级视图中。

有关图层蒙版的更多信息，请查看the documentation.

【讨论】：

谢谢，我今晚试试。我试图在我的问题的链接中调整代码。

【解决方案2】：

我在具有这种效果的集合视图上创建了一个淡入淡出蒙版。也许您正在寻找类似的东西。

// This is in the UICollectionView subclass
private func addGradientMask() {
         let coverView = GradientView(frame: self.bounds)
         let coverLayer = coverView.layer as! CAGradientLayer
         coverLayer.colors = [UIColor.whiteColor().colorWithAlphaComponent(0).CGColor, UIColor.whiteColor().CGColor, UIColor.whiteColor().colorWithAlphaComponent(0).CGColor]
         coverLayer.locations = [0.0, 0.5, 1.0]
         coverLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
         coverLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
         self.maskView = coverView
    }

// Declare this anywhere outside the sublcass
class GradientView: UIView {
    override class func layerClass() -> AnyClass {
        return CAGradientLayer.self
    }
}

此外，您可以通过将其添加到 collectionview 子类来使其具有粘性（即，它总是会淡出边缘上的单元格，而不是随着集合滚动）。

func scrollViewDidScroll(scrollView: UIScrollView) {
    self.maskView?.frame = self.bounds
}

【讨论】：

这发生在addGradientMask的末尾

【解决方案3】：

在我看来，您正在关注/使用的代码已经为您完成了繁重的工作。据我所见（现在无法测试）只需传递 alpha 属性：

        layoutAttributes.zIndex = 1024;
        layoutAttributes.frame = (CGRect){
            .origin = origin,
            .size = layoutAttributes.frame.size

这样的

        layoutAttributes.zIndex = 1024;
        layoutAttributes.alpha = 0.1; //add this
        layoutAttributes.frame = (CGRect){
            .origin = origin,
            .size = layoutAttributes.frame.size

【讨论】：

这会将 alpha 应用到标题视图，而不是标题后面的单元格。
确实，但想法是遵循相同的逻辑，使用 layoutAttributesForElementsInRect 传递有问题的矩形（单元格）并设置属性 alpha

【解决方案4】：

我不会在您的标题上使用透明背景，而是创建一个渐变透明 png 并改用它。使用图像处理渐变比使用代码更高效、更容易。

【讨论】：

【解决方案5】：

您应该为CollectionView 使用UIScrollViewDelegate，并使用scrollviewdidscroll 方法来创建淡入淡出或UICollectionViewFlowLayout 的子类。

【讨论】：

【解决方案6】：

以下是我实现该效果的方法。我在 Photoshop 中创建了一个渐变图像，渐变为背景颜色，在我的情况下为黑色。这是它的样子：

我将 ImageView 放在了我的 ViewController 上。我将它拉伸到我想要的正确大小和位置，并使用 AutoLayout 约束将其锁定到位。（有时我不得不使用键盘上的箭头键来移动它，因为单击并拖动图像的位置往往会将其放到 CollectionView 中）

点击 ImageView，进入 Editor -> Arrange -> Send to Front 确保它位于 CollectionView 的顶部。

图像模式为 Scale to Fill，我已取消选择 User Interaction Enabled。

这需要一些调整才能让一切变得完美，但效果很好，看起来也不错。

我不完全确定你的背景图像是什么意思，但也许让渐变图像成为你实际背景图像的一部分，这样它就可以融入其中。

【讨论】：