Swift-分页菜单的实现（使⽤PagingMenuController库实现tab
标签切换）
分页菜单（分段菜单）在许多 App 上都会⽤到。⽐如⼤多数新闻
App 上都会⽤到。⽐如⼤多数新闻 App，如⽹易新闻、今⽇头条等，顶部都有个导航菜单。这个导航
App，如⽹易新闻、今⽇头条等，顶部都有个导航菜单。这个导航菜单是⼀组标签的集合，每个标签表⽰⼀个新闻类别，我们点击这个标签后下⾯就会切换到相应的分页⾯。同时左右滑动分页⾯，上⽅的标签也会跟着移动。
本⽂介绍⼀个优秀的第三⽅分页视图控件： PagingMenuController，不仅可以⾃定义菜单，⽽且可以⾃由地修改样式。
⼀、安装配置
（1）从 GitHub 上下载最新的代码：
（2）将下载下来的源码包中 deproj 拖拽⾄你的⼯程中。
（3）⼯程 -> General ->
General -> Embedded Binaries 项，把
Embedded Binaries 项，把 PagingMenuController.framework 添加进来。
PagingMenuController.framework 添加进来。
（4）最后，在需要使⽤ PagingMenuController 的地⽅
PagingMenuController 的地⽅ import 进来就可以了。
import 进来就可以了。
1import PagingMenuController
⼆、纯代码使⽤样例
1，效果图
（1）主视图顶部分页菜单中有两个菜单标签，分别对应两个⼦视图。
（2）点击菜单标签，下⽅便会切换显⽰相应的⼦视图。
（3）也可以直接左右滑动⼦视图进⾏切换，上⽅的菜单标签状态也会同步更新。
2，样例代码
（1）⼦视图控制器1（ ViewController1.swift）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18import UIKit
//⼦视图控制器1
class ViewController1: UIViewController{
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = ange
let textLabel = UILabel(frame: CGRect(x: 0, y: 100, width: self.view.frame.width,
height: 30))
textLabel.font = UIFont.systemFont(ofSize: 33)
< = "电影"
view.addSubview(textLabel)
}
}
（2）⼦视图控制器2（ ViewController2.swift）
1 2 3import UIKit
//⼦视图控制器2
6 7 8 9 10 11 12 13 14 15 16 17 18
super.viewDidLoad()
view.backgroundColor = UIColor.darkGray
let textLabel = UILabel(frame: CGRect(x: 0, y: 100, width: self.view.frame.width,
height: 30))
textLabel.font = UIFont.systemFont(ofSize: 33)
< = "⾳乐"
view.addSubview(textLabel)
}
}
（3）主视图控制器（
导航菜单（3）主视图控制器（ViewController.swift）
ViewController.swift）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46import UIKit
import PagingMenuController
//分页菜单配置
private struct PagingMenuOptions: PagingMenuControllerCustomizable{ //第1个⼦视图控制器
private let viewController1 = ViewController1()
//第2个⼦视图控制器
private let viewController2 = ViewController2()
//组件类型
fileprivate var componentType: ComponentType{
return.all(menuOptions: MenuOptions(), pagingControllers: pagingControllers) }
//所有⼦视图控制器
fileprivate var pagingControllers: [UIViewController] {
return[viewController1, viewController2]
}
//菜单配置项
fileprivate struct MenuOptions: MenuViewCustomizable{
//菜单显⽰模式
var displayMode: MenuDisplayMode{
return.segmentedControl
}
//菜单项
var itemsOptions: [MenuItemViewCustomizable] {
return[MenuItem1(), MenuItem2()]
}
}
//第1个菜单项
fileprivate struct MenuItem1: MenuItemViewCustomizable{
//⾃定义菜单项名称
var displayMode: MenuItemDisplayMode{
<(title: MenuItemText(text: "电影"))
}
}
//第2个菜单项
fileprivate struct MenuItem2: MenuItemViewCustomizable{
//⾃定义菜单项名称
var displayMode: MenuItemDisplayMode{
<(title: MenuItemText(text: "⾳乐"))
}
48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73}
//主视图控制器
class ViewController: UIViewController{
override func viewDidLoad() {
super.viewDidLoad()
//分页菜单配置
let options = PagingMenuOptions()
//分页菜单控制器初始化
let pagingMenuController = PagingMenuController(options: options) //分页菜单控制器尺⼨设置
pagingMenuController.igin.y += 64
pagingMenuController.view.frame.size.height -= 64
//建⽴⽗⼦关系
addChildViewController(pagingMenuController)
/
/分页菜单控制器视图添加到当前视图中
view.addSubview(pagingMenuController.view)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
源码下载：
三、Storyboard 使⽤样例
1，效果图
具体功能同上⾯的是⼀样的。
2，Storyboard 相关操作
（1）在主视图中添加⼀个 Container View，并设置好相关约束。
（2） Container View 默认embed的是
Container View 默认embed的是 UIViewController，我们将其改成
UIViewController，我们将其改成 PagingMenuController。
PagingMenuController。3，样例代码
（1）⼦视图控制器（ ViewController1.swift、
ViewController1.swift、ViewController2.swift）
ViewController2.swift）
1//具体参考上⾯的纯代码实现部分
（2）主视图控制器（
（2）主视图控制器（ViewController.swift）
ViewController.swift）
⾼亮处表⽰与上⾯纯代码实现不相同的地⽅。
1 2 3 4 5 6 7 8 9import UIKit
import PagingMenuController
//分页菜单配置
private struct PagingMenuOptions: PagingMenuControllerCustomizable{ //第1个⼦视图控制器
private let viewController1 = ViewController1()
//第2个⼦视图控制器
private let viewController2 = ViewController2()
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
//组件类型
fileprivate var componentType: ComponentType{
return.all(menuOptions: MenuOptions(), pagingControllers: pagingControllers) }
//所有⼦视图控制器
fileprivate var pagingControllers: [UIViewController] {
return[viewController1, viewController2]
}
//菜单配置项
fileprivate struct MenuOptions: MenuViewCustomizable{
//菜单显⽰模式
var displayMode: MenuDisplayMode{
return.segmentedControl
}
//菜单项
var itemsOptions: [MenuItemViewCustomizable] {
return[MenuItem1(), MenuItem2()]
}
}
//第1个菜单项
fileprivate struct MenuItem1: MenuItemViewCustomizable{
//⾃定义菜单项名称
var displayMode: MenuItemDisplayMode{
<(title: MenuItemText(text: "电影"))
}
}
//第2个菜单项
fileprivate struct MenuItem2: MenuItemViewCustomizable{
//⾃定义菜单项名称
var displayMode: MenuItemDisplayMode{
<(title: MenuItemText(text: "⾳乐"))
}
}
}
//主视图控制器
class ViewController: UIViewController{
override func viewDidLoad() {
super.viewDidLoad()
//获取分页菜单配置
let options = PagingMenuOptions()
//设置分页菜单配置
let pagingMenuController = self.childViewControllers.first as! PagingMenuController pagingMenuController.setup(options)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
源码下载：
四、标签、页⾯切换响应
有时我们需要监听页⾯切换事件进⾏⼀些操作，⽐如当切换到新的页⾯时可以去请求数据等。这个通过 PagingMenuController 的
1，样例代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32//分页菜单控制器初始化
let pagingMenuController = PagingMenuController(options: options)
//....省略⼀些代码
view.addSubview(pagingMenuController.view)
//页⾯切换响应
switch state {
case let.willMoveItem(menuItemView, previousMenuItemView):
print("--- 标签将要切换 ---")
print("⽼标签：\(!)")
print("新标签：\(!)")
case let.didMoveItem(menuItemView, previousMenuItemView):
print("--- 标签切换完毕 ---")
print("⽼标签：\(!)")
print("新标签：\(!)")
case let.willMoveController(menuController, previousMenuController): print("--- 页⾯将要切换 ---")
print("⽼页⾯：\(previousMenuController)")
print("新页⾯：\(menuController)")
case let.didMoveController(menuController, previousMenuController): print("--- 页⾯切换完毕 ---")
print("⽼页⾯：\(previousMenuController)")
print("新页⾯：\(menuController)")
case.didScrollStart:
print("--- 分页开始左右滑动 ---")
case.didScrollEnd:
print("--- 分页停⽌左右滑动 ---")
}
}
2，运⾏效果
（1）我们点击顶部菜单标签进⾏页⾯切换，可以看到控制台打印出如下信息：
（2）⽽如果通过⼿指滑动切换页⾯，控制台打印出如下信息：
五、使⽤代码切换标签
⽐如下⾯代码⾃动将分页菜单控制器切换到第 2 个页⾯。
六、⾃定义分页控制器样式
PagingMenuControllerCustomizable 对象有如下⼏个属性可以对整个视图控制器进⾏⾃定义：1，defaultPage: Int
设置默认页⾯的索引，如果不指定则默认显⽰第⼀个视图页。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论