iOS 开发总结

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

作为一名 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