如何使用 UICollectionView 创建此 UI，以便内容不受单元格边界的限制

Posted 2023-03-14

【中文标题】如何使用 UICollectionView 创建此 UI，以便内容不受单元格边界的限制

【英文标题】：How to create this UI using UICollectionView so that content isn't restricted by Cell boundaries

【发布时间】：2017-03-20 07:05:28

【问题描述】：

我需要在我的应用中使用此功能。我认为这可以通过UICollectionView 来实现，但问题是如果我每行取 3 个单元格，如何实现中间元素之间的间距？就像烹饪元素和健身之间的空间是重叠的。有什么有用的链接或建议吗？

【问题讨论】：

我发现了类似的东西 github.com/cyrilchandelier/CCHexagonFlowLayout ，但采用六边形布局而不是圆形布局。我认为这个链接可能会以某种方式帮助你。如果你能解决你的问题，请用答案更新你的问题。

严格考虑这是一个基于意见的问题，有许多种方法可以实现。在此处使用自定义 UICollectionViewFlowLayout 类是最佳解决方案 (IMO)。一个“hacky”解决方案是在集合视图上应用变换，并在每个单元格上应用变换。这里的集合将水平滚动，但应用变换后，它看起来像是垂直的。稍微修改一下。

【参考方案1】：

我认为一个好的方法是将三个 UICollectionView 嵌入到包装器 UICollectionView() 中。

获取一个包装器 UICollectionView 并将其绑定到窗口（或父视图）边缘 -

if let window = UIApplication.shared.keyWindow 
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .horizontal
    let wrapperCollectionView = UICollectionView(collectionViewLayout: layout)
    wrapperCollectionView.frame = CGRect(x:0, y:0, width: window.frame.width, height: window.frame.height)
    window.addSubview(wrapperCollectionView)

使用 UIBlurEffect() 添加背景模糊效果

来自 numberOfItemsInSection 的 wrapperCollectionView return 3

创建一个 UICollectionViews 数组

let gridCollectionViews: [UICollectionViews]!  
// Make this global variable so that you can refer to the 
// individual `UICollectionViews` by the indexes later gridCollectionViews[0] , [2] , [2]

在 wrapperCollectionView.viewDidLoad() 中实例化 3 个 CollectionViews

collectionViewCol1 = UICollectionView()
collectionViewCol2 = UICollectionView()
collectionViewCol3 = UICollectionView()

在wrapperCollectionView.cellForItemAt方法中，依次添加3个UICollectionView，并将它们绑定到单元格边缘

在collectionViewCol2 的viewDidLoad 内，给.contentOffset 等于cellHeight 的1/2 -

collectionView?.contentInset = UIEdgeInsetsMake(0.5 * cellHeight, 0, 0, 0)
// collectionView?.scrollIndicatorInsets = UIEdgeInsetsMake(0.5 * cellHeight, 0, 0, 0)
// scrollIndicatorInsets won't be required since you're not showing the scroll indicators

在 wrapperCollectionView 中保持启用滚动的同时禁用子视图中的滚动。将除模糊效果视图之外的所有背景设置为UIColor.clear，以便获得模糊效果。

在每个 UICollectionView 中布局单元格

【讨论】：

如何设置ColletionViewCell的contentOff以及在哪里？

在答案中添加了信息。

它对你有用还是你采取了另一种方法？我没有测试这个。希望没有错别字。

我没有得到在 wrapperview 中使用 3 个 collectionViews 然后再次将其嵌入到 collectionView 中的方法。