复杂的交叉布局架构和关注点分离
Posted
技术标签:
【中文标题】复杂的交叉布局架构和关注点分离【英文标题】：Complex cross layout architecture and separation of concerns 【发布时间】：2018-10-23 18:02:37 【问题描述】：我想实现一个交叉布局，就像 Wallapop 应用程序在其主提要上所做的那样。
如您所见，它由两组单元格（特色项目、您附近的项目）组成。第一组水平滚动，第二组垂直滚动。
我想到的第一个实现这种布局的 UIKit 组件是UICollectionView，每个滚动方向都有一个部分。不幸的是，UICollectionView 当前的实现非常有限，无论您声明多少个部分，都只能强制向一个方向滚动。
所以我想尝试一下香草 UIKit 组件，这就是我得到的；
我的解决方案的问题是垂直
UICollectionViewController（以绿色突出显示）自行滚动，而不是向上推动水平UICollectionViewControllers。
我还考虑过为垂直单元格使用单个 UICollectionViewController，并根据需要为水平单元格设置一个带有水平 UICollectionViewControllers 的 UIStackView，但这是一个混乱的解决方案，并且不能很好地扩展好吧，如果我选择这种方式，我什至无法为垂直单元格部分设置标题。
理想情况下，我希望每组可滚动单元格都是它自己的UIViewController，以便明确区分关注点和模块化。
有没有更好的方法来实现我想要的布局？
【问题讨论】：
【参考方案1】：最简单和最稳定的解决方案是使用以下视图层次结构：
-
使用一个
UICollectionView(1) 实例
水平可滚动部分可以实现为屏幕宽度 UICollectionViewCell 包含水平可滚动UICollectionView
可垂直滚动的部分应该只是UICollectionView(1) 的常规部分
优点
仅限 UIKit 不需要什么特别的东西 - 到处都是UICollectionViewFlowLayout
水平滚动单元格和垂直滚动单元格的单元格相同
良好的可扩展性和关注点分离。水平和垂直部分的独立行为，每个部分都可以有多个数据源。
缺点
可水平滚动的部分应具有固定高度。否则滚动行为将更难维护。
图片上的箭头表示用途！
【讨论】：
我看到这种设计的独特缺点是它不是模块化的。UICollectionView 的主要数据源必须处理占位符容器单元格（用于水平滚动）和产品模型，因此不能将每个部分*单独分开 UIViewController 以获得更好的模块化。 *（我的部分是指每个产品组（即：特色项目，在我之前的示例中靠近您的项目））
@Tylerian 每个设计都是一个权衡问题。不过我同意你的看法。
@Tylerian，对于数据源处理的情况，我建议您观看有关 AggregateDataSource 方法的 WWDC 会话。他们提供的示例与您需要的有点不同，但您可以接受。【参考方案2】：
您可以使用以下方式：
一个包含两个单元格的集合视图。第一个单元格用于特色项目，第二个单元格用于您附近的项目。第一个单元格将覆盖您设计所需的全部宽度和高度。
为了可扩展性，请使用嵌入了 CollectionViewController 的容器视图，该 CollectionViewController 将负责显示特色项目。这个嵌入的 CollectionViewController 将水平滚动。
您附近的项目是初始集合视图控制器的直接单元格。
因此，您对特色水平集合视图的实现保留在嵌入的 CollectionViewController 中，单元格的项目保留在主 CollectionViewController 中，其中还包含与特色项目的松散连接（嵌入到容器视图中）。
它也不会遇到垂直滚动待售商品不会向上滚动特色商品的问题。
这是一个描述这个想法的屏幕截图
【讨论】：
以上是关于复杂的交叉布局架构和关注点分离的主要内容，如果未能解决你的问题，请参考以下文章