复杂的交叉布局架构和关注点分离

Question

我想像Wallapop应用在其主供稿上那样实现交叉布局。

---

---

如您所见，它由两组单元格（精选商品，您附近的商品）组成。第一组水平滚动，第二组垂直滚动。

我想到的第一个进行此类布局的UIKit组件是UICollectionView，每个滚动方向都有一个部分。不幸的是，UICollectionView当前的实现方式非常有限，无论您声明了多少段，都只能强制向一个方向滚动。

所以我想尝试一下使用普通UIKit组件，这就是我得到的；

---

---

我的解决方案的问题在于，垂直UICollectionViewController（以绿色突出显示）正在单独滚动，而不是将水平UICollectionViewController向上推。

我还考虑过对垂直单元格使用单个UICollectionViewController，并根据水平单元格的需要设置水平水平UIStackView的{​​{1}}，但这是一个麻烦的解决方案而且缩放效果不太好，如果我选择这种方式，我什至无法为垂直单元格部分设置标题。

理想情况下，我希望每组可滚动的单元格都是它自己的UICollectionViewController，以便将关注点和模块性明确分开。

是否有更好的方法来实现像我希望使用普通UIKit组件那样的布局？

Answer 1

最简单，最稳定的解决方案是使用以下视图层次结构：

1. 使用一个UICollectionView（1）实例
2. 可水平滚动的部分可以实现为屏幕宽度 UICollectionViewCell，其中包含可水平滚动的UICollectionView
3. 垂直滚动部分应该只是UICollectionView（1）的常规部分

专业人士

• 仅UIKit
• 不需要特别的东西-到处都是UICollectionViewFlowLayout
• 水平滚动单元和垂直滚动单元的单元格相同
• 良好的可伸缩性和关注点分离。水平和垂直部分的独立行为，每个部分可以具有多个数据源。

缺点

水平滚动部分应具有固定的高度。否则，滚动行为将难以维护。

图像上的箭头表示正在使用！

Answer 2

您可以使用以下方式：

其中有两个单元格的集合视图。第一个单元格用于特色商品，第二个单元格用于您附近的商品。第一个单元将覆盖您设计所需的全部宽度和高度。

为实现可伸缩性，请使用包含CollectionViewController的容器视图，该视图将负责显示特色项目。此嵌入式CollectionViewController将水平滚动。

您附近的项目是初始集合视图控制器的直接直接单元。

因此，您对特色水平集合视图的实现仍保留在嵌入式CollectionViewController中，而单元格的项目保留在主CollectionViewController中，该主CollectionViewController也包含与特色项目的松散连接（嵌入到容器视图中）。

它也不会出现垂直滚动待售商品不会使特色商品向上滚动的问题。

以下是描述该想法的屏幕截图