本文将演示使用第三方类库，创建旋转和弹性的页面切换效果。
首先确保已经安装了所需的第三方类库。双击查看安装配置文件【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。
以上就完成了所有的代码编写和界面绘制工作。