向 UICollectionViewCell 添加覆盖视图 - 不断覆盖

Posted

技术标签:

【中文标题】向 UICollectionViewCell 添加覆盖视图 - 不断覆盖【英文标题】:Adding an overlay view to UICollectionViewCell - keeps overlaying 【发布时间】:2017-08-02 17:45:57 【问题描述】:

我正在尝试在每个集合视图单元格上添加 50% 黑色的 alpha 视图。集合视图单元格顶部有背景照片和文本。希望覆盖视图位于两者之间。

在我的 cellForItemAt 方法中,我使用以下内容:

let overlayView = UIView()
overlayView.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5)
overlayView.frame = cell.bounds
cell.addSubview(overlayView)

问题是当我向下滚动然后向上滚动时,叠加层不断添加,使 alpha 比 50% 暗得多。此外,overlayView 被添加到我的文本之上(我需要它在文本下方。)

如何防止叠加层多次添加,并将其添加到单元格的正确层之间?

【问题讨论】:

你在哪里在单元格初始化文件或 cellfortematindex 方法上添加覆盖视图? 【参考方案1】:

UITableView 有一种方法可以重用单元以提高效率(仅在内存中保留所需的单元)。因此,重用的单元格可能已经有这个子视图,因此再次调用addSubview 会导致在其上添加另一个视图。

解决方法如下:

addSubview(overlayView) 移动到单元格子类中的layoutSubviews() 方法。

override func layoutSubviews() 
    super.layoutSubviews()
    addSubview(overlayView)

删除单元格子类中prepareForReuse() 方法中的覆盖视图。

override func prepareForReuse() 
    super.prepareForReuse()
    overlayView.removeFromSuperview()

请注意,这需要您在单元格的子类中定义覆盖视图(您可能应该这样做,因为单元格本身应该负责它自己的子视图)。

【讨论】:

【参考方案2】:

发生这种情况是因为您的单元格被多次出队和重复使用,因此,您添加了多个层。

将此代码放入单元格的类中

override func awakeFromNib() 
    super.awakeFromNib()
    let overlayView = UIView()
    overlayView.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5)
    overlayView.frame = self.bounds
    self.addSubview(overlayView)

或者如果你想达到同样的效果,你可以设置黑色背景颜色并将imageView的alpha设置为50%

cell.backgroundColor = .black
cell.imageView.alpha = 0.5

【讨论】:

这似乎可以让叠加层不重叠! 在两层之间添加子视图怎么样? 如果您不需要额外的视图,请查看我的更新答案。【参考方案3】:

避免在 cellForItem 中添加它。单元格被重复使用,因此如果您继续添加视图,它将添加一个顶部。在重用单元格时,不会删除先前添加的视图。相反,您可以在 Prototype 单元格或 XIB 中添加视图,并将其 alpha 设置为您想要的任何内容。或者,如果您以编程方式创建单元格,您可以在 awakeFromNib() 中使用它

【讨论】:

以上是关于向 UICollectionViewCell 添加覆盖视图 - 不断覆盖的主要内容,如果未能解决你的问题,请参考以下文章

向 UICollectionViewCell 添加覆盖视图 - 不断覆盖

如何使用清晰的背景颜色向 UICollectionViewCell 添加阴影?

使用 xib 将手势添加到 UICollectionViewCell 子视图

延迟加载 UICollectionViewCell 的自定义子视图

UICollectionViewCell 向 UICollectionView didSelect 发出信号

将 UILabel 固定到 UICollectionViewCell contentView 按钮的自动布局约束