一个月之前认为不可能做到的事情,今天做到了,很高兴,深夜来篇总结,梳理一下。

作为一名 iOS 新手,过去只在 Android 开发之余看过一些教程,再加上对 OC 的强烈排斥,对这个需求一拖再拖,终于搞定了,长嘘一口气。

最终效果

其中的难点在于点击一个 Cell 后,会在这个 cell 与下一行之间插入一个菜单。

思路

在 UICollectionView 中插入一个 Cell 作为 Menu,宽度设为 UICollectionView 的宽度,高度为0。

-------------------------------------
|     |     |     |     |     |     |
|     |     |     |     |     |     |
|     |     |     |     |     |     |
----------------MENU-----------------
|     |     |
|     |     |
|     |     |
-------------

当点击第一行的某个 Cell 之后,让高度大于0,Menu 显示。

-------------------------------------
|     |     |     |     |     |     |
|     |     |     |     |     |     |
|     |     |     |     |     |     |
-------------------------------------
|                                   |
|              MENU                 |
|                                   |
-------------------------------------
|     |     |
|     |     |
|     |     |
-------------

如果有的行 Cell 数小于6,可以填充一些 Dummy Cell。

-------------------------------------
|     |     |     |     |     |     |
|     |     |     |     |     |     |
|     |     |     |     |     |     |
-------------------------------------
|     |     | --  | --  | --  | --  |
|     |     |  D  |  U  |  M  |  Y  |
|     |     | --  | --  | --  | --  |
----------------MENU-----------------

当点击第二行的某个 Cell 之后,显示隐藏在第三行的 Menu Cell。

-------------------------------------
|     |     |     |     |     |     |
|     |     |     |     |     |     |
|     |     |     |     |     |     |
-------------------------------------
|     |     | --  | --  | --  | --  |
|     |     |  D  |  U  |  M  |  Y  |
|     |     | --  | --  | --  | --  |
-------------------------------------
|                                   |
|                MENU               |
|                                   |
-------------------------------------

按照以上思路,可以实现基本效果,中间遇到一个问题还是挺有意思的。

遇到的问题

刚开始的时候,只是把 Menu 的宽度和高度都设置为0,效果如下:

-------------------------------------
|     |     |     |     |     |     |
|     |     |     |     |     |     |
|     |     |     |     |     |     |
-------------------------------------
M     |     |
E     |     |
N     |     |
U------------
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.minimumInteritemSpacing = 4.0f;
layout.minimumLineSpacing = 2.0f;
[layout setSectionInset:UIEdgeInsetsMake(0, 4, 0, 4)];

结果当 Menu 不显示的时候,第二行只能显示5个 Cell,剩下的一个被挤到了第三行。

这是因为虽然 Menu 的宽度为0,但 flow layout 设置的 Margin 对它依然有效,从而导致第二行放不下6个 Cell。

iOS 的 UI 元素居然没有类似 android:visibility=”gone” 的属性。。。。:(

源码请戳 => UICollectionViewWithMenu

更新时间:

留下评论