今天的这篇博客就在上篇博客的基础上做些东西。做一个完整的资讯类App中的分类展示、分类切换、分类编辑这一套东西。当然，主要我们还是使用灵活多变的CollectionView来实现。下方我们将会给出程序的运行效果，然后给出核心的代码实现，在文章的末尾我们会给出github上源代码的分享链接。

一、运行效果展示

下方的GIF动图就是本篇博客所涉及Demo的运行效果了。首先我们点击第一个页面的“Show Menu Scroll”按钮Push到我们的主菜单页面。主菜单页面上方就是我们的菜单选项了，点击相应的菜单项，会显示相应的内容。当然你对下方内容进行滑动，菜单项也会随之改变。

点击菜单右边的加号，Present出菜单的编辑页面，该页面也就是我们上篇博客所介绍的页面。在该页面我们可以添加新的菜单项，并对已经添加的菜单项进行拖动排序。具体效果如下所示。

二、工程目录介绍

下方截图中是本篇博客所涉及到 工程目录。本部分将会对下方的目录进行介绍，从而对整个工程进行了解。

• 1、CEMenuScrollController：CEMenuScrollController控制类就是上面有菜单下方是内容的类，该类是整个实例的主控制器，起到整体的调度作用，负责将各个组件拼接到一块。
• 2、CEContentConllectionView: 该视图就是下方内容展示的视图，主要是随着菜单的改变而显示不同的内容。
• 3、CEScrollMenu: 该组件就是上面那个可以横向滚动的菜单了。
• 4、CESelectTheme: 该组件就是上篇博客所介绍的，负责编辑菜单的组件。

本部分先整体上看一下，下方将会逐步的对每个组件的具体实现进行介绍。

三、CEScrollMenu组件的介绍

该组件就是本示例上面横向滚动的菜单项，该组件的右边有一个“+”号按钮，点击该按钮将会通过闭包的形式将按钮的点击事件回调给CEMenuScrollController控制器，由该控制器Present出CESelectTheme组件进行数据源的操作。接下来我们将聊一下CEScrollMenu组件的核心代码。

1、点击Cell的操作

下方是位于CEMenuCollectionView中的代码段，也就是点击菜单对应的Cell时所执行的方法。在该方法中主要做了两件事情，第一件事情是点击的Cell如果可以移动到屏幕的中点。然后将Cell的点击事件回调给CEMenuCollectionView的使用者，在回调时，要传入当前点击Cell的indexPath。

2、计算菜单Cell的宽度

下方代码段是CEMenuCollectionView中设置Cell尺寸的布局回调。Cell的宽度是从我们的数据源中获取的，我们的Model中有一个itemWidth()方法用来提供显示该item的Cell的宽度。当然该宽度是根据我们菜单名字的个数来获取的。

3、点击菜单项将其置为选择状态

下方代码是CEMenuCollectionViewCell中负责根据Cell的Select状态来修改Cell的显示方案的，具体代码如下所示。当然，Cell是否处于Select状态，我们将此状态是记录在我们的Model中的，这就避免了因为Cell的重用机制而出现的状态不一致的问题。

下方代码就是CEMenuCollectionViewCell初始化时所进行的处理。从下方我们可以看出Cell的isSelected状态是从item中加载的，加载后，调用上述updateStelectState()方法。具体做法如下所示：

关于CEScrollMenu组件的介绍，本篇博客就先介绍这么多，更详细的代码请移步于文章后方的github地址。

四、CEContentCollectionView的介绍

CEContentCollectionView的主要功能是根据Menu的切换来显示相应的内容的，该视图中的内容比较简单。下方是对其核心技术点的介绍。

1、确定用户左右滑动后当前显示的页面

下方三个代理方法是用来确定用户左右滑动内容页后，所显示的Cell。当用户拖动后切换了相应的Cell时，会执行下方的的currentShowCellClosure()闭包，然后将当前显示Cell的indexPath回调给使用者。然后我们可以根据该IndexPath改变Menu当前显示的菜单项。

关于本篇博客所涉及Demo的源代码介绍，就先介绍这么多。在工程中添加了不少代码注释，如果你对真个工程的设计以及实现感兴趣话，请移步下方github源代码分享链接进行查看。作为一名程序员，其实好奇心还是蛮重要的。本篇博客的内容就先到这儿吧。

github分享链接：https://github.com/lizelu/CEScrollMenue