[Swift通天遁地]九、拔剑吧-(3)创建多种自定义Segment分段样式的控件

本文将演示创建多种自定义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 }

原文地址:https://www.cnblogs.com/strengthen/p/10355565.html

时间: 2024-10-13 10:42:42

[Swift通天遁地]九、拔剑吧-(3)创建多种自定义Segment分段样式的控件的相关文章

[Swift通天遁地]九、拔剑吧-(4)使用开源类库创建可滑动的Segment分段控件

本文将演示创建多种自定义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 'TwicketSegmentedControl' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双

[Swift通天遁地]九、拔剑吧-(14)创建更美观的景深视差滚动效果

景深视差经常被应用在游戏项目中. 本文将演示创建更美观的景深视差滚动效果. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'Presentation' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击

[Swift通天遁地]九、拔剑吧-(7)创建旋转和弹性的页面切换效果

本文将演示使用第三方类库,创建旋转和弹性的页面切换效果. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'GuillotineMenu' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击打开项目文件[

[Swift通天遁地]九、拔剑吧-(8)创建气泡式页面切换效果

本文将演示使用第三方类库,创建页面之间的气泡式切换效果. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'BubbleTransition' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击打开项目文

[Swift通天遁地]九、拔剑吧-(9)创建支持缩放、移动、裁切的相机视图控制器

本文将演示创建支持缩放.移动.裁切的相机视图控制器. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod "ALCameraViewController" 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之

[Swift通天遁地]九、拔剑吧-(10)快速创建美观的聊天界面:可发送文字、表情、图片

本文将演示如何快速搭建一个强大的聊天界面. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 7 pod 'Chatto', '= 3.3.1' 8 pod 'ChattoAdditions', '= 3.3.1' 9 end 根据配置文

[Swift通天遁地]九、拔剑吧-(12)创建Preview-Transition图像预览界面

本文将演示如何创建一个漂亮的图像预览界面. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, ‘12.0’ 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod "PreviewTransition" 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击打开项目文件

[Swift通天遁地]九、拔剑吧-(13)创建页面的景深视差滚动效果

景深视差经常被应用在游戏项目中. 本文将演示创建一个简单的景深视差滚动效果 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'Presentation' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击

[Swift通天遁地]九、拔剑吧-(5)创建Tab图标具有多种样式的Tab动画

本文将演示创建动画样式的底部标签条的切换效果. Github项目地址:[animated-tab-bar],下载项目,解压成文件夹窗口. 将第三方类库的标签控制器文件夹[RAMAnimatedTabBarConroller]拖动到项目中. 在弹出的文件导入确认窗口中,点击[Finish]完成按钮,确认文件的导入. 在左侧的项目导航区打开视图控制器的代码文件[Main.storyboard] 选择故事板中的视图控制器.依次点击: [Editor]编辑- >[Embed In]植入- >[Tab