本文將演示創建多種自定義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 }

[Swift通天遁地]九、拔劍吧-(3)創建多種自定義Segment分段樣式的控件