本文将演示使用第三方类库，创建旋转和弹性的页面切换效果。
首先确保已经安装了所需的第三方类库。双击查看安装配置文件【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
根据配置文件中的相关设置，安装第三方类库。
安装完成之后，双击打开项目文件【DemoApp.xcodeproj】
在左侧的项目导航区，打开视图控制器的代码文件【ViewController.swift】
现在开始编写代码，实现菜单的选择切换效果。
1 import UIKit
2 //引入已经安装的第三方类库
3 import GuillotineMenu
4
5 //使当前的视图控制器类，遵循表格的代理协议和数据源协议。
6 class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
7
8 //初始化两个浮点类型的属性，作为单元格的高度。
9 fileprivate let cellHeight: CGFloat = 210
10 fileprivate let cellSpacing: CGFloat = 20
11 //初始化一个断头台切换动画属性，
12 //第三方类库之所以名为断头台，是因为页面的切换效果，
13 //有点类似于断头刀斜落到样式。
14 fileprivate lazy var presentationAnimator = GuillotineTransitionAnimation()
15
16 override func viewDidLoad() {
17 super.viewDidLoad()
18
19 //获得当前导航控制器的导航条。
20 let navBar = self.navigationController!.navigationBar
21 //设置导航条的前景颜色。
22 navBar.barTintColor = UIColor(red: 65.0 / 255.0, green: 62.0 / 255.0, blue: 79.0 / 255.0, alpha: 1)
23 //设置导航条的富文本属性
24 navBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
25
26 //初始化一个矩形区域，作为表格视图的显示区域。
27 let rect = CGRect(x: 0, y: 0, width: 320, height: 508)
28 //初始化一个指定显示区域的表格视图
29 let tableView = UITableView(frame: rect)
30
31 //设置表格对象的数据源和代理对象。
32 tableView.dataSource = self
33 tableView.delegate = self
34 //设置表格对象的分隔线为空白。
35 tableView.separatorStyle = .none
36
37 //将表格对象，添加到根视图。
38 self.view.addSubview(tableView)
39 }
40
41 //添加一个代理方法，用来设置表格的行数。
42 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
43 {
44 //在此设置表格的行数拥有5行单元格。
45 return 5
46 }
47
48 //添加一个代理方法，用来设置单元格的高度。
49 func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
50 {
51 //在此设置单元格的高度为160
52 return 160
53 }
54
55 //添加一个代理方法，用来初始化或复用表格中的单元格。
56 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
57 {
58 //创建一个字符串常量，作为单元格的复用标识，
59 let identifier = "reusedCell"
60 //然后根据复用标识，从表格中获得可以复用的单元格。
61 var cell = tableView.dequeueReusableCell(withIdentifier: identifier)
62
63 //如果没有可以复用的单元格，
64 if(cell == nil)
65 {
66 //则初始化一个自定义的单元格，并设置单元格的复用标识。
67 cell = UITableViewCell(style: .default, reuseIdentifier: identifier)
68 //从项目中读取一张图片素材
69 let image = UIImage(named: "content_1")
70 //初始化一个图像视图对象，用来显示加载的图片。
71 let imageView = UIImageView(frame: CGRect(x: 30, y: 30, width: 250, height: 144))
72 //设置图像视图的显示内容。
73 imageView.image = image
74 //设置图像视图的标识值为1，
75 imageView.tag = 1
76 //然后将图像视图添加到单元格。
77 cell?.addSubview(imageView)
78 }
79
80 //设置单元格的背景颜色
81 cell?.backgroundColor = UIColor(red: 51.0/255, green: 51.0/255, blue: 51.0/255, alpha: 1.0)
82
83 //返回设置好的单元格。
84 return cell!
85 }
86
87 //添加一个方法，作为故事板中的按钮控件所绑定的动作。
88 @IBAction func showMenuAction(_ sender: UIButton)
89 {
90 //从故事板中，获得指定标识符的视图控制器。
91 let menuViewController = storyboard!.instantiateViewController(withIdentifier: "MenuViewController")
92 //设置视图控制器的展示方式为自定义
93 menuViewController.modalPresentationStyle = .custom
94 //设置视图控制器的转换代理对象为当前的视图控制器。
95 menuViewController.transitioningDelegate = self
96
97 //设置断头台切换动画属性的动画代理对象。
98 presentationAnimator.animationDelegate = menuViewController as? GuillotineAnimationDelegate
99 //设置动画属性的支持视图，为导航控制器的导航控件条。
100 presentationAnimator.supportView = navigationController!.navigationBar
101 //设置动画属性的展现按钮，为当前事件的按钮控件。
102 //当点击该按钮时，执行断头台式的切换动画。
103 presentationAnimator.presentButton = sender
104 //在当前的控制器，展示菜单视图控制器。
105 present(menuViewController, animated: true, completion: nil)
106 }
107 }
108
109 //对视图控制器类进行扩展
110 extension ViewController: UIViewControllerTransitioningDelegate
111 {
112 //创建一个扩展方法，用来设置菜单视图控制器在斜落时的动画模式。
113 func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning?
114 {
115 //设置动画的模式为展示，共有两种模式，
116 //一种为展示模式，另一种为消失模式。
117 presentationAnimator.mode = .presentation
118 return presentationAnimator
119 }
120
121 //创建另一个扩展方法，用来设置菜单视图控制器在返回时的动画模式。
122 func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning?
123 {
124 //设置动画的模式为消失
125 presentationAnimator.mode = .dismissal
126 return presentationAnimator
127 }
128 }
在项目文件夹上点击鼠标右键，弹出右键菜单。
【New File】->【Cocoa Touch】->【Next】->
【Class】：MenuViewController
【Subclass of】:UIViewController
【Language】：Swift
->【Next】->【Create】
点击打开【MenuViewController.swift】,
现在开始编写代码，创建一个菜单视图控制器。
1 import UIKit
2 //引入已经安装的第三方类库
3 import GuillotineMenu
4
5 //使当前的视图控制器类，
6 //遵循断头台菜单，表格的代理协议，和数据源协议。
7 class MenuViewController: UIViewController, GuillotineMenu, UITableViewDelegate, UITableViewDataSource {
8
9 //添加一个按钮属性，和一个标签对象。
10 //按钮控件用于隐藏菜单视图控制器，
11 var dismissButton: UIButton?
12 //标签用于菜单视图控制器的顶部标题。
13 var titleLabel: UILabel?
14
15 override func viewDidLoad() {
16 super.viewDidLoad()
17
18 //初始化按钮控件
19 dismissButton = {
20 //设置按钮控件的显示区域。
21 let button = UIButton(frame: .zero)
22 //给按钮控件设置正常状态下的图标。
23 button.setImage(UIImage(named: "ic_menu"), for: .normal)
24 //给按钮绑定点击事件
25 button.addTarget(self, action: #selector(dismissButtonTapped(_:)), for: .touchUpInside)
26 //然后返回设置好的按钮控件。
27 return button
28 }()
29
30 //对另一个标签属性进行初始化操作。
31 titleLabel = {
32 //初始化标签对象
33 let label = UILabel()
34 //设置标签控件允许显示一行的文字。
35 label.numberOfLines = 1
36 //设置标签控件的字体属性和文字颜色。
37 label.text = "Activity"
38 //设置标签控件的尺寸符合其内容的长度，
39 label.font = UIFont.boldSystemFont(ofSize: 17)
40 label.textColor = UIColor.white
41 label.sizeToFit()
42 //返回设置好的标签控件
43 return label
44 }()
45
46 //创建一个矩形区域，作为表格视图的显示区域。
47 let rect = CGRect(x: 0, y: 60, width: 320, height: 448)
48 //初始化一个指定显示区域的表格对象。
49 let tableView = UITableView(frame: rect)
50
51 //设置表格对象的数据源和代理对象，为当前的视图控制器对象。
52 tableView.dataSource = self
53 tableView.delegate = self
54 //设置表格对象的分割线为空白。
55 tableView.separatorStyle = .none
56
57 //将表格视图添加到根视图中。
58 self.view.addSubview(tableView)
59
60 //初始化一个按钮控件，作为菜单视图控制器的关闭按钮。
61 let close = UIButton(frame: CGRect(x: 20, y: 520, width: 280, height: 40))
62 //设置按钮在正常状态下的标题文字。
63 close.setTitle("Close", for: .normal)
64 //给按钮绑定点击事件。
65 close.addTarget(self, action: #selector(MenuViewController.dismissButtonTapped(_:)), for: .touchUpInside)
66
67 //将按钮添加到根视图中。
68 self.view.addSubview(close)
69 }
70
71 //添加一个代理方法，用来设置表格的行数，
72 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
73 {
74 //在此设置表格拥有5行单元格。
75 return 5
76 }
77
78 //添加一个代理方法，用来设置单元格的高度。
79 func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
80 {
81 //在此设置单元格的高度为160
82 return 160
83 }
84
85 //添加一个代理方法，用来初始化或复用表格中的单元格。
86 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
87 {
88 //创建一个字符串常量，作为表格的复用标识。
89 let identifier = "reusedCell"
90 //然后根据复用标识，从表格中获取可以复用的单元格。
91 var cell = tableView.dequeueReusableCell(withIdentifier: identifier)
92
93 //如果没有可以复用的单元格，
94 if(cell == nil)
95 {
96 //则初始化一个自定义的单元格，并设置单元格的复用标识。
97 cell = UITableViewCell(style: .default, reuseIdentifier: identifier)
98 //从项目中读取一张图片素材
99 let image = UIImage(named: "content_2")
100 //初始化一个指定显示区域的视图对象。
101 let imageView = UIImageView(frame: CGRect(x: 30, y: 30, width: 250, height: 144))
102 //设置图像视图的内容，
103 imageView.image = image
104 //并设置图像视图的标记的值为1。
105 imageView.tag = 1
106 //将图像视图添加到根视图
107 cell?.addSubview(imageView)
108 }
109
110 //设置按钮的背景颜色
111 cell?.backgroundColor = UIColor(red: 76.0/255, green: 74.0/255, blue: 88.0/255, alpha: 1.0)
112 //然后返回设置好的单元格。
113 return cell!
114 }
115
116 //添加一个方法，用来响应关闭按钮的点击事件。
117 @objc func dismissButtonTapped(_ sender: UIButton)
118 {
119 //当关闭按钮被点击时，隐藏菜单视图控制器。
120 presentingViewController!.dismiss(animated: true, completion: nil)
121 }
122 }
123
124 //对菜单视图控制器进行扩展。
125 extension MenuViewController: GuillotineAnimationDelegate
126 {
127 //添加一个方法，用来监听展现动画完成的事件。
128 func animatorDidFinishPresentation(_ animator: GuillotineTransitionAnimation)
129 {
130 print("menuDidFinishPresentation")
131 }
132
133 //添加一个方法，用来监听消失动画完成的事件。
134 func animatorDidFinishDismissal(_ animator: GuillotineTransitionAnimation)
135 {
136 print("menuDidFinishDismissal")
137 }
138
139 //添加一个方法，用来监听展现动画即将开始的事件。
140 func animatorWillStartPresentation(_ animator: GuillotineTransitionAnimation)
141 {
142 print("willStartPresentation")
143 }
144
145 //添加一个方法，用来监听消失动画即将开始的事件。
146 func animatorWillStartDismissal(_ animator: GuillotineTransitionAnimation)
147 {
148 print("willStartDismissal")
149 }
150 }
在左侧的项目导航区，打开故事板文件。选择故事板中的初始视图控制器。
依次点击：
【Editor】编辑器->【Embed In】植入->【Navigation Controller】导航控制器
属性检查器：【Status Bar】：Light Content
选择另一个视图控制器的根视图，设置背景颜色Background。
选择控制器的导航条。设置导航条的标题文字。【Title】:Activity
点击控件库图标。打开控件库的列表窗口。
在按钮控件上双击，往故事板中插入一个按钮。点击创建的按钮控件。
设置按钮的标题文字。设置按钮的图标。
点击尺寸检查器图标，进入尺寸设置面板。设置按钮的宽度和高度。
选择当前的视图控制器。点击辅助编辑器图标，打开辅助编辑器。隐藏右侧的面板区。
将类文件中的方法和故事板中的按进行连接。
完成控件和属性的连接之后，点击顶部的显示标准编辑器图标，
切换至标准编辑器模式。显示右侧的面板区。
点击控件库图标，打开控件库的列表窗口。
然后在视图控制器控件的上方双击，往故事板中插入一个控制器。
选择左边的视图控制器，在视图控制器图标上按下鼠标右键，
并拖动到右侧的视图控制器。以创建两者之间的连接。
在弹出的选项列表中，选择【Show】显示选项。
点击身份检查器图标，进行身份设置面板。
【Class】：MenuViewController，设置视图控制器所绑定的类名。
在此设置新的视图控制器，和菜单视图控制器类进行绑定，
接着设置视图控制器，在故事板中的唯一标识符。
【Storyboard ID】:MenuViewController
选择菜单视图控制器的根视图。点击属性检查器图标，进行属性设置面板。
设置背景颜色Background。
以上就完成了所有的代码编写和界面绘制工作。
原文地址：https://www.cnblogs.com/strengthen/p/10356817.html
时间： 2024-10-13 10:42:41