本文将演示创建多种自定义Segment分段样式的控件。
首先确保已经安装了所需的第三方类库。双击查看安装配置文件【Podfile】
1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'PagingMenuController' 7 end
根据配置文件中的相关设置，安装第三方类库。
安装完成之后，双击打开项目文件【DemoApp.xcodeproj】
依次创建四个自定义的视图控制器，作为分段控件每个分段指向的页面。
在项目文件夹上点击鼠标右键，弹出右键菜单。
【New File】->【Cocoa Touch】->【Next】->
【Class】：ViewController1
【Subclass of】:UIView
【Language】：Swift
->【Next】->【Create】
点击打开【ViewController1.swift】,现在开始编写代码，创建一个包含多行文字的段落。
1 import UIKit 2 //引入已经安装的第三方类库 3 import PagingMenuController 4 5 class ViewController1: UIViewController { 6 override func viewDidLoad() { 7 super.viewDidLoad() 8 9 //初始化一个指定显示区域的标签对象 10 let textLabel = UILabel(frame: self.view.frame) 11 //设置标签对象的文字对齐方式为居中 12 textLabel.textAlignment = .center 13 //设置标签对象的字体属性 14 textLabel.font = UIFont.systemFont(ofSize: 24) 15 //设置标签对象的文字内容 16 textLabel.text = "View Controller 1" 17 //设置标签对象的背景颜色为橙色 18 textLabel.backgroundColor = UIColor.orange 19 20 //将标签对象添加到根视图 21 view.addSubview(textLabel) 22 } 23 }
在项目文件夹上点击鼠标右键，弹出右键菜单。
【New File】->【Cocoa Touch】->【Next】->
【Class】：ViewController2
【Subclass of】:UIView
【Language】：Swift
->【Next】->【Create】
点击打开【ViewController2.swift】,现在开始编写代码，创建一个包含多行文字的段落。
1 import UIKit 2 //引入已经安装的第三方类库 3 import PagingMenuController 4 5 class ViewController2: UIViewController { 6 override func viewDidLoad() { 7 super.viewDidLoad() 8 9 //初始化一个h指定显示区域的标签对象 10 let textLabel = UILabel(frame: self.view.frame) 11 //设置标签对象的文字对齐方式为居中 12 textLabel.textAlignment = .center 13 //设置标签对象的字体属性 14 textLabel.font = UIFont.systemFont(ofSize: 24) 15 //设置标签对象的文字内容 16 textLabel.text = "View Controller 2" 17 //设置标签对象的背景颜色为洋红色 18 textLabel.backgroundColor = UIColor.magenta 19 20 //将标签对象添加到根视图 21 view.addSubview(textLabel) 22 } 23 }
按下【Command】+【Shift】+【S】另存当前的类文件，作为第三个分段的页面。
【Save As】：ViewController3
点击打开【ViewController3.swift】,现在开始编写代码，创建一个包含多行文字的段落。
1 import UIKit 2 //引入已经安装的第三方类库 3 import PagingMenuController 4 5 //记得修改类的名称ViewController3 6 class ViewController3: UIViewController { 7 override func viewDidLoad() { 8 super.viewDidLoad() 9 10 //初始化一个h指定显示区域的标签对象 11 let textLabel = UILabel(frame: self.view.frame) 12 //设置标签对象的文字对齐方式为居中 13 textLabel.textAlignment = .center 14 //设置标签对象的字体属性 15 textLabel.font = UIFont.systemFont(ofSize: 24) 16 //修改此处的标签内容 17 textLabel.text = "View Controller 3" 18 //设置标签对象的背景颜色为紫色 19 textLabel.backgroundColor = UIColor.purple 20 21 //将标签对象添加到根视图 22 view.addSubview(textLabel) 23 } 24 }
按下【Command】+【Shift】+【S】另存当前的类文件，作为第三个分段的页面。
【Save As】：ViewController4
点击打开【ViewController4.swift】,现在开始编写代码，创建一个包含多行文字的段落。
1 import UIKit 2 //引入已经安装的第三方类库 3 import PagingMenuController 4 5 //记得修改类的名称ViewController4 6 class ViewController4: UIViewController { 7 override func viewDidLoad() { 8 super.viewDidLoad() 9 10 //初始化一个h指定显示区域的标签对象 11 let textLabel = UILabel(frame: self.view.frame) 12 //设置标签对象的文字对齐方式为居中 13 textLabel.textAlignment = .center 14 //设置标签对象的字体属性 15 textLabel.font = UIFont.systemFont(ofSize: 24) 16 //修改此处的标签内容 17 textLabel.text = "View Controller 4" 18 //设置标签对象的背景颜色为棕色 19 textLabel.backgroundColor = UIColor.brown 20 21 //将标签对象添加到根视图 22 view.addSubview(textLabel) 23 } 24 }
在左侧的项目导航区，打开视图控制器的代码文件【ViewController.swift】
现在开始编写代码，创建一个包含四个分段的自定义分段控件。
1 import UIKit 2 //引入已经安装的第三方类库 3 import PagingMenuController 4 5 //初始化一个结构体，用来对分段视图控件进行配置 6 private struct PagingMenuOptions: PagingMenuControllerCustomizable 7 { 8 //初始化一个控件类型属性，用来设置分段控件的样式和所有的子视图控制器。 9 fileprivate var componentType: ComponentType 10 { 11 //分段控件的样式，由另一个方法来设置，同时设置一个数组，作为分段控件的所有子视图控制器。 12 return .all(menuOptions: MenuOptions(), pagingControllers: pagingControllers) 13 } 14 15 //添加一个数组属性，作为分段控件的所有子视图控制器。 16 fileprivate var pagingControllers: [UIViewController] 17 { 18 //依次初始化四个子视图控制器 19 let viewController1 = ViewController1() 20 let viewController2 = ViewController2() 21 let viewController3 = ViewController3() 22 let viewController4 = ViewController4() 23 24 //返回四个子视图控制器，作为子视图控制器。 25 return [viewController1, viewController2, viewController3, viewController4] 26 } 27 28 //添加另一个结构体属性，用来设置分段控件的外观样式 29 fileprivate struct MenuOptions: MenuViewCustomizable 30 { 31 //给结构体添加一个属性， 32 //设置分段控件的显示模式为分段按钮。 33 //分段控件的样式共有：标准样式、分段按钮样式和无限样式三种。 34 var displayMode: MenuDisplayMode 35 { 36 return .segmentedControl 37 } 38 //添加一个属性，用来设置分段控件的焦点模式。 39 //焦点模式共有：空白、下划线、圆角三种。 40 var focusMode: MenuFocusMode 41 { 42 return .roundRect(radius: 12, horizontalPadding: 8, verticalPadding: 8, selectedColor: UIColor.orange) 43 } 44 //添加第三个属性，用来设置四个分段的内容。 45 var focusMode: MenuFocusMode 46 { 47 return .underline(height: 3, color: UIColor.blue, horizontalPadding: 10, verticalPadding: 0) 48 } 49 //添加一个结构体属性，用来设置第一个分段的内容。 50 var focusMode: MenuFocusMode 51 { 52 return .none 53 } 54 //设置第一个分段的文字内容 55 var itemsOptions: [MenuItemViewCustomizable] 56 { 57 return [MenuItem1(), MenuItem2(), MenuItem3(), MenuItem4()] 58 } 59 } 60 61 //添加一个结构体，用来设置第一个分段的内容 62 fileprivate struct MenuItem1: MenuItemViewCustomizable 63 { 64 //设置第一个分段的显示模式 65 var displayMode: MenuItemDisplayMode 66 { 67 //设置第一个分段的文字内容 68 return .text(title: MenuItemText(text: "News")) 69 } 70 } 71 72 //添加一个结构体，用来设置第二个分段的内容 73 fileprivate struct MenuItem2: MenuItemViewCustomizable 74 { 75 //设置第二个分段的显示模式 76 var displayMode: MenuItemDisplayMode 77 { 78 //初始化一个菜单文本对象，并设置对象的文字内容，字体颜色，高亮颜色，字体，高亮字体等属性。 79 let itemText = MenuItemText(text: "Message", color: .lightGray, selectedColor: .white, font: UIFont(name: "Arial", size: 16)!, selectedFont: UIFont(name: "Arial", size: 12)!) 80 //返回菜单文本对象，作为第二个分段的文字内容 81 return .text(title: itemText) 82 } 83 } 84 85 //添加一个结构体，用来设置第三个分段的内容 86 fileprivate struct MenuItem3: MenuItemViewCustomizable 87 { 88 //设置第三个分段的显示模式 89 var displayMode: MenuItemDisplayMode 90 { 91 //初始化一个指定显示区域的视图对象 92 let view = UIView(frame: CGRect(x: 0, y: 0, width: 80, height: 50)) 93 //初始化一个标签对象 94 let label = UILabel(frame: CGRect(x: 0, y: 0, width: 80, height: 50)) 95 //设置标签对象的文字对齐方式为居中 96 label.textAlignment = .center 97 //设置标签的文字内容 98 label.text = "Service" 99 //设置标签的字体的颜色 100 label.textColor = UIColor.purple 101 //将标签添加到根视图中 102 view.addSubview(label) 103 //返回视图对象 104 return .custom(view: view) 105 } 106 } 107 108 //添加一个结构体属性，用来设置第四个分段的内容 109 fileprivate struct MenuItem4: MenuItemViewCustomizable 110 { 111 //设置第四个分段的显示模式 112 var displayMode: MenuItemDisplayMode 113 { 114 //设置第四个分段的文字内容 115 return .text(title: MenuItemText(text: "Setting")) 116 } 117 } 118 } 119 120 class ViewController: UIViewController 121 { 122 override func viewDidLoad() 123 { 124 super.viewDidLoad() 125 // Do any additional setup after loading the view, typically from a nib. 126 //完成分段控件的属性设置之后，开始创建分段控件。 127 128 //首先设置根视图的背景颜色为白色 129 view.backgroundColor = UIColor.white 130 131 //初始化一个分段菜单设置选项 132 let options = PagingMenuOptions() 133 //初始化一个分段菜单控制器 134 let pagingMenuController = PagingMenuController(options: options) 135 //设置分段菜单的控制器的代理对象为当前的视图控制器 136 pagingMenuController.delegate = self 137 //设置控制器的视图的显示区域 138 pagingMenuController.view.frame.origin.y += 20 139 pagingMenuController.view.frame.size.height -= 20 140 141 //将分段菜单控制器，作为子视图控制器，添加到当前的视图控制器。 142 addChild(pagingMenuController) 143 //将分段菜单控制器中的视图对象，添加到根视图。 144 view.addSubview(pagingMenuController.view) 145 //当将子视图控制器添加到父控制器时，必须调用子视图控制器的移动方法。 146 pagingMenuController.didMove(toParent: self) 147 } 148 149 override func didReceiveMemoryWarning() { 150 super.didReceiveMemoryWarning() 151 // Dispose of any resources that can be recreated. 152 } 153 } 154 155 //添加一个扩展，用来实现协议中的方法 156 extension ViewController: PagingMenuControllerDelegate 157 { 158 //添加一个方法，用来监听子视图控制器在即将跳转时的事件 159 func willMove(toMenu menuController: UIViewController, fromMenu previousMenuController: UIViewController) 160 { 161 //在控制台输出当前方法的名称 162 print(#function) 163 //输出上一个视图控制器 164 print(previousMenuController) 165 //和即将跳转到的视图控制器的信息 166 print(menuController) 167 } 168 169 //添加一个方法，用来监听子视图控制器在完成跳转后的事件。 170 func didMove(toMenu menuController: UIViewController, fromMenu previousMenuController: UIViewController) 171 { 172 //在控制台输出当前方法的名称 173 print(#function) 174 //输出上一个视图控制器 175 print(previousMenuController) 176 //和当前的视图控制器的信息 177 print(menuController) 178 } 179 180 //添加一个方法，用来监听分段控件在即将切换时的事件 181 func willMove(toMenuItem menuItemView: MenuItemView, fromMenuItem previousMenuItemView: MenuItemView) 182 { 183 //在控制台输出当前方法的名称 184 print(#function) 185 //输出上一个分段的信息 186 print(previousMenuItemView) 187 //输出即将切换到的分段的信息 188 print(menuItemView) 189 } 190 191 //添加一个方法，用来监听分段在完成切换后的事件 192 func didMove(toMenuItem menuItemView: MenuItemView, fromMenuItem previousMenuItemView: MenuItemView) 193 { 194 //在控制台输出当前方法的名称 195 print(#function) 196 //输出上一个分段信息 197 print(previousMenuItemView) 198 //完成切换后的分段的信息 199 print(menuItemView) 200 } 201 }