ios - 自定义 UICollectionViewFlowLayout

Question

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

我对配置文件的底部，白线和“跟我来”部分特别感兴趣。我的假设是这是使用 UICollectionView 完成的，但如果我弄错了，请纠正我，我会相应地编辑这个问题。对于 6 个元素， Collection View 看起来非常标准(其中 'o' 代表一个圆圈):
o o o
o o o

我不希望它们对每个低于 6 的数字都这样排列。我希望它们居中。例如，5 个元素看起来像:
o o o
o o --> (居中前三位 - Markdown 空格)

4:
哦哦
哦哦

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

2:
○
○

1:
○

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

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

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

感谢您提前提供任何建议。对不起，这个问题很长，我可以在必要时提供澄清。

Answer 1

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

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

[01234]
[56789]

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

6 项: @[0,2,4,5,7,9]
5 项: @[0,2,4,6,8]
等等...