UI基础项目演练-商家分类 UICollectionView控件使用

如果你已经能写 UITableView，却在一排排横向排列的商家图标面前卡住，这门课就是冲这个缺口来的。UICollectionView 常被当成「UITableView 的加强版」草草带过，但真正动手做商家分类页面时，你会遇到一串 UITableView 里没出现过的问题：同一行放几个格子、格子之间怎么留缝、分组头怎么悬浮、点击后怎么把选中状态传出去。这些问题没有现成答案，只能靠一个具体项目把它们串起来。

先确认自己缺的是哪一块

UICollectionView 的知识点其实分三层，很多人是跳着学的，所以用起来总觉得别扭。

• 第一层是布局：UICollectionViewFlowLayout 的 itemSize、sectionInset、minimumLineSpacing、minimumInteritemSpacing 这几个参数怎么互相影响。调过一个不等于会调全部，商家的九宫格和横滑分类条用的就是两套参数。
• 第二层是数据源：numberOfSections、numberOfItemsInSection、cellForItemAt 的调用时机，以及复用池和 UITableView 有什么不一样。
• 第三层是交互：选中高亮、didSelectItemAt、以及选中状态怎么在滚动复用后不串位——这是最容易被忽略、也最容易出 bug 的地方。

如果你的问题集中在第一层，重点看布局参数和分组；如果卡在第三层，重点看选中状态与复用的配合。带着自己的缺口看，比从头到尾顺一遍有效得多。

商家分类这个场景为什么值得练

商家分类看着简单，其实是个很好的练手对象。它同时包含两种典型排布：顶部是横向滚动的一级分类，下面可能是多行多列的二级分类。前者考验的是横向滚动方向下的 itemSize 计算，后者考验的是根据屏幕宽度动态算格子宽度，而不是写死一个数字。

写死宽度在模拟器上往往没事，换一台设备就露馅。这门课把这个坑放在项目里，你会在调的過程中意识到：格子宽度应该是（屏宽 − 内边距 − 间距）除以列数算出来的，不是一个拍脑袋的常量。这种「算出来」的意识，比记住某个 API 更值钱。

看完应该能回答的问题

检验自己有没有真的学会，不看能不能照着敲出来，看能不能回答这几个问题。

• 为什么 UICollectionView 的 cell 必须注册复用标识？不注册会怎样？
• minimumLineSpacing 和 minimumInteritemSpacing 分别在什么方向上生效？横滑布局里它们的作用会不会互换？
• 点击一个商家分类后，用户快速上下滑动，为什么选中高亮可能跑到别的格子上？该怎么处理？
• 如果分类数量不定、需要换行，itemSize 该怎么设置才不出现半截格子？
• UICollectionViewFlowLayout 满足不了需求时，自定义 Layout 要从哪个方法入手？

能把这几个说清楚，说明你不只是「用过」，而是理解了布局和数据之间的配合关系。说不清的地方，就是接下来要补的地方。

练习建议

光看不动手，UICollectionView 是学不会的。建议按这样走：先照着项目把商家分类搭出来，跑通；然后把列数从固定改成可配置，试试三列和四列切换时布局是否还正常；再给其中一类加上选中态，滚动几屏看高亮有没有串位；最后试着去掉分组头，看布局会不会塌。每一次改动都在逼你回到上面那几个问题，这才是这门课真正的用法。

它适合的是已经写过基础列表、想把手感补齐的人。如果你连 cell 复用都还没接触过，先把 UITableView 那部分打牢再来，会顺很多。