如何在具有组合布局的新集合视图中将 CAGradientLayer 添加到 UIBackgroundConfiguration？

Posted 2023-02-23

【中文标题】如何在具有组合布局的新集合视图中将 CAGradientLayer 添加到 UIBackgroundConfiguration？

【英文标题】：How do you add a CAGradientLayer to a UIBackgroundConfiguration in the new collection views with compositional layouts?

【发布时间】：2020-10-15 23:29:22

【问题描述】：

我想在具有组合布局的新集合视图的上下文中向集合视图单元格的背景添加渐变。下面是一个如何从 Apple 的示例代码 Implementing Modern Collection Views 在EmojiExplorerViewController 的第 180 行中配置单元格背景的示例：

func configuredGridCell() -> UICollectionView.CellRegistration<UICollectionViewCell, Emoji> 
    return UICollectionView.CellRegistration<UICollectionViewCell, Emoji>  (cell, indexPath, emoji) in
        var content = UIListContentConfiguration.cell()
        content.text = emoji.text
        content.textProperties.font = .boldSystemFont(ofSize: 38)
        content.textProperties.alignment = .center
        content.directionalLayoutMargins = .zero
        cell.contentConfiguration = content
        var background = UIBackgroundConfiguration.listPlainCell()
        background.cornerRadius = 8
        background.strokeColor = .systemGray3
        background.strokeWidth = 1.0 / cell.traitCollection.displayScale
        cell.backgroundConfiguration = background
    

由于新的UIBackgroundConfiguration 是一个结构而不是一个层支持的UIView 子类，我不能只添加一个CAGradientLayer 实例作为子层。

向单元格背景配置添加渐变的好方法是什么？

【问题讨论】：

“由于新的 UIBackgroundConfiguration 是一个结构而不是一个层支持的 UIView 子类，我不能只添加一个 CAGradientLayer 实例作为子层。”其实 UIBackgroundConfiguration 有一个背景视图，一个视图可以作为渐变层的载体，所以很难看出有什么难度。 developer.apple.com/documentation/uikit/…

我相信我尝试将customView 设置为渐变层载体无济于事，但我还设置了预设列表单元配置之一的事实可能是问题所在。不知何故，我错过了您的链接文档中有一个空视图配置，所以当我在一小时后回到我的计算机时，我将使用空背景视图和设置自定义视图进行测试。

@matt 我刚刚测试并验证了backgroundConfiguration.customView?.layer.insertSublayer(gradientLayer, at: 0) 不显示渐变，仅显示预设的背景配置，在这种情况下为UIBackgroundConfiguration.listPlainCell()。将配置更改为UIBackgroundConfiguration.clear() 会显示清晰的视图。

好吧，你的测试是错误的。举个实际例子。

抱歉造成误会，谢谢。作为 Core Animation 的新手，根据参考文档 (developer.apple.com/documentation/quartzcore/calayer) 在背景上插入子图层 customView 似乎是为背景提供 CALayer 的正确方法。当您说“渐变层载体”时，我并没有想到这是一种特定的模式（override static var layerClass: AnyClass CAGradientLayer.self ），据我所知，Apple 没有包括这一点的概念解释。鉴于投反对票，我该如何改进问题？

【参考方案1】：

由于新的 UIBackgroundConfiguration 是一个结构，而不是一个层支持的 UIView 子类，我不能只添加一个 CAGradientLayer 实例作为子层。

是的，你可以。 UIBackgroundConfiguration 是一个结构的事实是无关紧要的。它有一个customView 属性，它是一个视图，将用作单元格中的背景视图（在内容视图后面）。因此，将该视图设置为某些内容（默认为 nil），一切就绪。

这是一个例子。这是一个用于测试目的的玩具表视图，但测试完全是关于配置对象的，因此它很容易适应演示该技术。只要您使用的是具有 UIBackgroundConfiguration 属性的东西，您使用的是表格视图、集合视图还是两者都没有关系。如您所见，我制作了从黑色到红色的垂直渐变作为单元格的背景。

这是相关代码。首先，我定义了一个梯度载体视图类型：

class MyGradientView : UIView 
    override static var layerClass: AnyClass  CAGradientLayer.self 

然后，我在配置单元格时将该视图用作背景视图：

var back = UIBackgroundConfiguration.listPlainCell()
let v = MyGradientView()
(v.layer as! CAGradientLayer).colors = 
    [UIColor.black.cgColor, UIColor.red.cgColor]
back.customView = v
cell.backgroundConfiguration = back

您想要实现的任何其他目标都只是上述内容的变体。例如，您可以使用图像视图或纯色背景视图并将它们与渐变视图相结合。关键是，customView 是背景视图，无论你设置它的任何视图都将显示在单元格的背景中。

我还应该指出，还有另一种方法可以做到这一点，即使用单元子类并实现updateConfigurationUsingState:。这种方法的优点是，一旦您为后台配置提供了customView，您就可以在每次调用该方法时修改该customView。您可以使用这种技术来响应选择，例如，正如我在此处的其他答案中所展示的那样（例如 https://***.com/a/63064099/341994）。