自定义 UICollectionViewFlowLayout

Question

我正在尝试创建一个具有如下用户配置文件的应用程序（第一张图片）：https://dribbble.com/shots/1642506-Messaging-app-Viber/attachments/257232

我对个人资料底部的白线和“关注我”部分特别感兴趣。我的假设是这是使用 UICollectionView 完成的，但如果我弄错了，请纠正我，我会相应地编辑这个问题。对于 6 个元素，集合视图看起来很标准（其中 'o' 代表一个圆圈）：
o o o
o o o

我不希望每个小于 6 的数字都这样布置它们。我希望它们居中。例如，5 个元素看起来像：
o o o
o o --> （居中前三位 - Markdown 空格）

4:
o o
哦哦

3：
o o 或 o o o（可能是以前的，空的底线看起来很乱）
o --> (居中在前两个之间 - Markdown 空格)

2：
o
o

1：
o

如果您有更好的布局建议，请告诉我。因此，正如您从上面看到的，我希望布局根据集合视图的数据源中的元素数量进行更改。元素的数量永远不会超过 6 个。

此外，用户可能能够编辑其中一个配置文件，其中会出现一个“+”图标，从而使集合视图以 (n+1) 布局显示。例如，用户编辑包含 4 个元素的配置文件时，将查看集合视图布局，就好像它有 5 个元素一样，第五个是“+”号以添加另一个元素。用户将只能从已包含 6 个元素的配置文件中删除元素。

最初，我正在考虑根据集合视图的 indexPath.row 和数据源中的元素数量使用一堆“if”和“switch”语句。但是，这似乎很草率。有没有办法使用自定义 UICollectionViewFlowLayout 来做到这一点？无论哪种方式，如何实现这样的布局？

提前感谢您的任何建议。抱歉，这个问题很长，我可以在必要时提供说明。

Answer 1

我觉得集合视图是错误的解决方案。它们旨在在滚动网格或其他程序布局中显示任意数量的内容。您有 1-6 个按钮，其布局美观，算法不易生成。

真的，您有 10 个 5x2 排列的“插槽”，您想在其中放置按钮：

[01234]
[56789]

您需要做的就是以编程方式生成这些位置，然后将您的布局定义为“插槽”数组：

6 项：@[0,2,4,5,7,9]

5 项：@[0,2,4,6,8]

等等……