Question

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

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

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

感谢。

Answer 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.

Answer 2

我在具有这种效果的collectionview上创建了一个淡入淡出遮罩。也许你正在寻找类似的东西。

// 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
}

Answer 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

Answer 4

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

Answer 5

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

Answer 6

以下是我实现这种效果的方法。我在photoshop中创建了一个渐变图像，淡化为背景的颜色，在我的情况下是黑色的。这是它的样子： enter image description here

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

单击ImageView，转到编辑器 - ＆gt;安排 - ＆gt;发送到前面以确保它位于CollectionView的顶部。

图像模式是“缩放至填充”，我已取消选择“启用用户交互”。

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

我不完全确定你的背景图像和诸如此类的意思，但可能会使渐变图像成为你所拥有的实际背景图像的一部分，因此它会融合在一起。

淡出UICollectionView中的项目

6 个答案: