Swift - 分页菜单的实现（使用PagingMenuController库实现tab标签切换）

分页菜单（分段菜单）在许多 App 上都会用到。比如大多数新闻 App，如网易新闻、今日头条等，顶部都有个导航菜单。这个导航菜单是一组标签的集合，每个标签表示一个新闻类别，我们点击这个标签后下面就会切换到相应的分页面。同时左右滑动分页面，上方的标签也会跟着移动。
本文介绍一个优秀的第三方分页视图控件：PagingMenuController，不仅可以自定义菜单，而且可以自由地修改样式。

一、安装配置

（1）从 GitHub 上下载最新的代码：https://github.com/kitasuke/PagingMenuController
（2）将下载下来的源码包中 PagingMenuController.xcodeproj 拖拽至你的工程中。





（3）工程 -> General -> Embedded Binaries 项，把 PagingMenuController.framework 添加进来。





（4）最后，在需要使用 PagingMenuController 的地方 import 进来就可以了。

二、纯代码使用样例

1，效果图

（1）主视图顶部分页菜单中有两个菜单标签，分别对应两个子视图。
（2）点击菜单标签，下方便会切换显示相应的子视图。
（3）也可以直接左右滑动子视图进行切换，上方的菜单标签状态也会同步更新。

2，样例代码

（1）子视图控制器1（ViewController1.swift）

（2）子视图控制器2（ViewController2.swift）

（3）主视图控制器（ViewController.swift）

源码下载：

hangge_1656.zip

三、Storyboard 使用样例

1，效果图

具体功能同上面的是一样的。

2，Storyboard 相关操作

（1）在主视图中添加一个 Container View，并设置好相关约束。





（2）Container View 默认embed的是 UIViewController，我们将其改成 PagingMenuController。

3，样例代码

（1）子视图控制器（ViewController1.swift、ViewController2.swift）

（2）主视图控制器（ViewController.swift）

高亮处表示与上面纯代码实现不相同的地方。

源码下载：

hangge_1656.zip

四、标签、页面切换响应

有时我们需要监听页面切换事件进行一些操作，比如当切换到新的页面时可以去请求数据等。这个通过 PagingMenuController 的 onMove 回调就可以实现。每当菜单移动前后、页面切换前后、手指滑动页面前后，该方法都会被调用。

1，样例代码

2，运行效果

（1）我们点击顶部菜单标签进行页面切换，可以看到控制台打印出如下信息：





（2）而如果通过手指滑动切换页面，控制台打印出如下信息：

五、使用代码切换标签

比如下面代码自动将分页菜单控制器切换到第 2 个页面。

六、自定义分页控制器样式

PagingMenuControllerCustomizable 对象有如下几个属性可以对整个视图控制器进行自定义：

1，defaultPage: Int

设置默认页面的索引，如果不指定则默认显示第一个视图页。

2，animationDuration: TimeInterval

页面切换动画时间。

3，isScrollEnabled: Bool

是否允许手指左右滑动进行页面切换，设置为 false 则只能点击菜单标签切换页面。

4，backgroundColor: UIColor

设置页面背景色。

5，lazyLoadingPage: LazyLoadingPage

lazy loading 的页面数量，这个是一个枚举，可选值如下：

6，menuControllerSet: MenuControllerSet

这个不太清楚做什么用的，也是一个枚举可选值如下：

7，componentType: ComponentType

这个很重要，用来配置整个分页菜单控制器包含的页面和菜单标签。这也是一个枚举，可选值如下：

8，下面是一个完整的配置样例

七、自定义菜单栏样式

MenuViewCustomizable 对象有如下几个属性对菜单栏进行自定义：

1，backgroundColor: UIColor

设置未选中的菜单标签背景色。

2，selectedBackgroundColor: UIColor

设置选中的菜单标签背景色。

3，height: CGFloat

设置菜单标签的高度。

4，animationDuration: TimeInterval

设置菜单标签切换时动画持续时长。

5，deceleratingRate: CGFloat

设置菜单切换动画减速率（默认为：UIScrollViewDecelerationRateFast）

6，menuSelectedItemCenter: Bool

不太清楚干嘛的。

7，displayMode: MenuDisplayMode

菜单显示模式，它是一个枚举有三个可选值：

其中的 MenuItemWidthMode、MenuScrollingMode 也是枚举：

样例1：分段模式





样例2：标准模式，这里我让选中标签始终居中







样例3：无限循环模式（这个必需至少有三个菜单项）

8，focusMode: MenuFocusMode

选中菜单标签的样式，这个也是枚举：

样例1：无样式





样例2：下划线样式





样例3：圆角矩形背景样式

9，dummyItemViewsSet: Int

不太清楚干嘛用的。

10，menuPosition: MenuPosition

菜单栏的位置，我们可以指定菜单栏在页面视图的上方还是下方。





这个也是个枚举：

11，dividerImage: UIImage?

菜单标签间的分隔图片，显示在每个标签的右侧。

12，下面是完整的使用样例

八、自定义单独的菜单标签样式

MenuItemViewCustomizable 对象有如下几个属性可以对单独的菜单项进行自定义：

1，horizontalMargin: CGFloat

设置该菜单标签的左右水平间距。

2，displayMode: MenuItemDisplayMode

设置该菜单标签的显示模式，它是一个枚举：

样例1：标签显示为标题+描述文本





样例2：将菜单标签显示为图片





原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1656.html