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

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号：山青咏芝（shanqingyongzhi）
➤博客园地址：山青咏芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：https://www.cnblogs.com/strengthen/p/10356817.html 
➤如果链接不是山青咏芝的博客园地址，则可能是爬取作者的文章。
➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

热烈欢迎，请直接点击！！！

进入博主App Store主页，下载使用各个作品！！！

注：博主将坚持每月上线一个新app！！！

目录：[Swift]通天遁地Swift

本文将演示使用第三方类库，创建旋转和弹性的页面切换效果。

首先确保已经安装了所需的第三方类库。双击查看安装配置文件【Podfile】

platform :ios, '12.0'
use_frameworks!

target 'DemoApp' do
    source 'https://github.com/CocoaPods/Specs.git'
    pod 'GuillotineMenu'
end

根据配置文件中的相关设置，安装第三方类库。

安装完成之后，双击打开项目文件【DemoApp.xcodeproj】

在左侧的项目导航区，打开视图控制器的代码文件【ViewController.swift】

现在开始编写代码，实现菜单的选择切换效果。

import UIKit
//引入已经安装的第三方类库
import GuillotineMenu

//使当前的视图控制器类，遵循表格的代理协议和数据源协议。
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    //初始化两个浮点类型的属性，作为单元格的高度。
    fileprivate let cellHeight: CGFloat = 210
    fileprivate let cellSpacing: CGFloat = 20
    //初始化一个断头台切换动画属性，
    //第三方类库之所以名为断头台，是因为页面的切换效果，
    //有点类似于断头刀斜落到样式。
    fileprivate lazy var presentationAnimator = GuillotineTransitionAnimation()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //获得当前导航控制器的导航条。
        let navBar = self.navigationController!.navigationBar
        //设置导航条的前景颜色。
        navBar.barTintColor = UIColor(red: 65.0 / 255.0, green: 62.0 / 255.0, blue: 79.0 / 255.0, alpha: 1)
        //设置导航条的富文本属性
        navBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
        
        //初始化一个矩形区域，作为表格视图的显示区域。
        let rect = CGRect(x: 0, y: 0, width: 320, height: 508)
        //初始化一个指定显示区域的表格视图
        let tableView = UITableView(frame: rect)
        
        //设置表格对象的数据源和代理对象。
        tableView.dataSource = self
        tableView.delegate = self
        //设置表格对象的分隔线为空白。
        tableView.separatorStyle = .none
        
        //将表格对象，添加到根视图。
        self.view.addSubview(tableView)
    }
    
    //添加一个代理方法，用来设置表格的行数。
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
    {
        //在此设置表格的行数拥有5行单元格。
        return 5
    }
    
      //添加一个代理方法，用来设置单元格的高度。
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
    {
        //在此设置单元格的高度为160
        return 160
    }
    
     //添加一个代理方法，用来初始化或复用表格中的单元格。
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
    {
        //创建一个字符串常量，作为单元格的复用标识，
        let identifier = "reusedCell"
        //然后根据复用标识，从表格中获得可以复用的单元格。
        var cell = tableView.dequeueReusableCell(withIdentifier: identifier)
        
        //如果没有可以复用的单元格，
        if(cell == nil)
        {
            //则初始化一个自定义的单元格，并设置单元格的复用标识。
            cell = UITableViewCell(style: .default, reuseIdentifier: identifier)
            //从项目中读取一张图片素材
            let image = UIImage(named: "content_1")
            //初始化一个图像视图对象，用来显示加载的图片。
            let imageView = UIImageView(frame: CGRect(x: 30, y: 30, width: 250, height: 144))
            //设置图像视图的显示内容。
            imageView.image = image
            //设置图像视图的标识值为1，
            imageView.tag = 1
            //然后将图像视图添加到单元格。
            cell?.addSubview(imageView)
        }
        
        //设置单元格的背景颜色
        cell?.backgroundColor = UIColor(red: 51.0/255, green: 51.0/255, blue: 51.0/255, alpha: 1.0)
        
        //返回设置好的单元格。
        return cell!
    }
    
    //添加一个方法，作为故事板中的按钮控件所绑定的动作。
    @IBAction func showMenuAction(_ sender: UIButton)
    {
        //从故事板中，获得指定标识符的视图控制器。
        let menuViewController = storyboard!.instantiateViewController(withIdentifier: "MenuViewController")
        //设置视图控制器的展示方式为自定义
        menuViewController.modalPresentationStyle = .custom
        //设置视图控制器的转换代理对象为当前的视图控制器。
        menuViewController.transitioningDelegate = self
        
        //设置断头台切换动画属性的动画代理对象。
        presentationAnimator.animationDelegate = menuViewController as? GuillotineAnimationDelegate
        //设置动画属性的支持视图，为导航控制器的导航控件条。
        presentationAnimator.supportView = navigationController!.navigationBar
        //设置动画属性的展现按钮，为当前事件的按钮控件。
        //当点击该按钮时，执行断头台式的切换动画。
        presentationAnimator.presentButton = sender
        //在当前的控制器，展示菜单视图控制器。
        present(menuViewController, animated: true, completion: nil)
    }
}

//对视图控制器类进行扩展
extension ViewController: UIViewControllerTransitioningDelegate
{
    //创建一个扩展方法，用来设置菜单视图控制器在斜落时的动画模式。
    func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning?
    {
        //设置动画的模式为展示，共有两种模式，
        //一种为展示模式，另一种为消失模式。
        presentationAnimator.mode = .presentation
        return presentationAnimator
    }
    
    //创建另一个扩展方法，用来设置菜单视图控制器在返回时的动画模式。
    func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning?
    {
        //设置动画的模式为消失
        presentationAnimator.mode = .dismissal
        return presentationAnimator
    }
}

在项目文件夹上点击鼠标右键，弹出右键菜单。

【New File】->【Cocoa Touch】->【Next】->

【Class】：MenuViewController

【Subclass of】:UIViewController

【Language】：Swift

->【Next】->【Create】

点击打开【MenuViewController.swift】,

现在开始编写代码，创建一个菜单视图控制器。 

import UIKit
//引入已经安装的第三方类库
import GuillotineMenu

//使当前的视图控制器类，
//遵循断头台菜单，表格的代理协议，和数据源协议。
class MenuViewController: UIViewController, GuillotineMenu, UITableViewDelegate, UITableViewDataSource {
    
    //添加一个按钮属性，和一个标签对象。
    //按钮控件用于隐藏菜单视图控制器，
    var dismissButton: UIButton?
    //标签用于菜单视图控制器的顶部标题。
    var titleLabel: UILabel?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //初始化按钮控件
        dismissButton = {
            //设置按钮控件的显示区域。
            let button = UIButton(frame: .zero)
            //给按钮控件设置正常状态下的图标。
            button.setImage(UIImage(named: "ic_menu"), for: .normal)
            //给按钮绑定点击事件
            button.addTarget(self, action: #selector(dismissButtonTapped(_:)), for: .touchUpInside)
            //然后返回设置好的按钮控件。
            return button
        }()
        
        //对另一个标签属性进行初始化操作。
        titleLabel = {
            //初始化标签对象
            let label = UILabel()
            //设置标签控件允许显示一行的文字。
            label.numberOfLines = 1
            //设置标签控件的字体属性和文字颜色。
            label.text = "Activity"
            //设置标签控件的尺寸符合其内容的长度，
            label.font = UIFont.boldSystemFont(ofSize: 17)
            label.textColor = UIColor.white
            label.sizeToFit()
            //返回设置好的标签控件
            return label
        }()
        
        //创建一个矩形区域，作为表格视图的显示区域。
        let rect = CGRect(x: 0, y: 60, width: 320, height: 448)
        //初始化一个指定显示区域的表格对象。
        let tableView = UITableView(frame: rect)
        
        //设置表格对象的数据源和代理对象，为当前的视图控制器对象。
        tableView.dataSource = self
        tableView.delegate = self
        //设置表格对象的分割线为空白。
        tableView.separatorStyle = .none
        
        //将表格视图添加到根视图中。
        self.view.addSubview(tableView)
        
        //初始化一个按钮控件，作为菜单视图控制器的关闭按钮。
        let close = UIButton(frame: CGRect(x: 20, y: 520, width: 280, height: 40))
        //设置按钮在正常状态下的标题文字。
        close.setTitle("Close", for: .normal)
        //给按钮绑定点击事件。
        close.addTarget(self, action: #selector(MenuViewController.dismissButtonTapped(_:)), for: .touchUpInside)
        
        //将按钮添加到根视图中。
        self.view.addSubview(close)
    }
    
    //添加一个代理方法，用来设置表格的行数，
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
    {
        //在此设置表格拥有5行单元格。
        return 5
    }
    
     //添加一个代理方法，用来设置单元格的高度。
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
    {
        //在此设置单元格的高度为160
        return 160
    }
    
     //添加一个代理方法，用来初始化或复用表格中的单元格。
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
    {
        //创建一个字符串常量，作为表格的复用标识。
        let identifier = "reusedCell"
        //然后根据复用标识，从表格中获取可以复用的单元格。
        var cell = tableView.dequeueReusableCell(withIdentifier: identifier)
        
        //如果没有可以复用的单元格，
        if(cell == nil)
        {
            //则初始化一个自定义的单元格，并设置单元格的复用标识。
            cell = UITableViewCell(style: .default, reuseIdentifier: identifier)
            //从项目中读取一张图片素材
            let image = UIImage(named: "content_2")
            //初始化一个指定显示区域的视图对象。
            let imageView = UIImageView(frame: CGRect(x: 30, y: 30, width: 250, height: 144))
            //设置图像视图的内容，
            imageView.image = image
            //并设置图像视图的标记的值为1。
            imageView.tag = 1
            //将图像视图添加到根视图
            cell?.addSubview(imageView)
        }
        
        //设置按钮的背景颜色
        cell?.backgroundColor = UIColor(red: 76.0/255, green: 74.0/255, blue: 88.0/255, alpha: 1.0)
        //然后返回设置好的单元格。
        return cell!
    }
    
    //添加一个方法，用来响应关闭按钮的点击事件。
    @objc func dismissButtonTapped(_ sender: UIButton)
    {
        //当关闭按钮被点击时，隐藏菜单视图控制器。
        presentingViewController!.dismiss(animated: true, completion: nil)
    }
}

//对菜单视图控制器进行扩展。
extension MenuViewController: GuillotineAnimationDelegate
{
    //添加一个方法，用来监听展现动画完成的事件。
    func animatorDidFinishPresentation(_ animator: GuillotineTransitionAnimation)
    {
        print("menuDidFinishPresentation")
    }
    
    //添加一个方法，用来监听消失动画完成的事件。
    func animatorDidFinishDismissal(_ animator: GuillotineTransitionAnimation)
    {
        print("menuDidFinishDismissal")
    }
    
    //添加一个方法，用来监听展现动画即将开始的事件。
    func animatorWillStartPresentation(_ animator: GuillotineTransitionAnimation)
    {
        print("willStartPresentation")
    }
    
    //添加一个方法，用来监听消失动画即将开始的事件。
    func animatorWillStartDismissal(_ animator: GuillotineTransitionAnimation)
    {
        print("willStartDismissal")
    }
}

在左侧的项目导航区，打开故事板文件。选择故事板中的初始视图控制器。

依次点击：

【Editor】编辑器->【Embed In】植入->【Navigation Controller】导航控制器

属性检查器：【Status Bar】：Light Content

选择另一个视图控制器的根视图，设置背景颜色Background。

选择控制器的导航条。设置导航条的标题文字。【Title】:Activity

点击控件库图标。打开控件库的列表窗口。

在按钮控件上双击，往故事板中插入一个按钮。点击创建的按钮控件。

设置按钮的标题文字。设置按钮的图标。

点击尺寸检查器图标，进入尺寸设置面板。设置按钮的宽度和高度。

选择当前的视图控制器。点击辅助编辑器图标，打开辅助编辑器。隐藏右侧的面板区。

将类文件中的方法和故事板中的按进行连接。

完成控件和属性的连接之后，点击顶部的显示标准编辑器图标，

切换至标准编辑器模式。显示右侧的面板区。

点击控件库图标，打开控件库的列表窗口。

然后在视图控制器控件的上方双击，往故事板中插入一个控制器。

选择左边的视图控制器，在视图控制器图标上按下鼠标右键，

并拖动到右侧的视图控制器。以创建两者之间的连接。

在弹出的选项列表中，选择【Show】显示选项。

点击身份检查器图标，进行身份设置面板。

【Class】：MenuViewController，设置视图控制器所绑定的类名。

在此设置新的视图控制器，和菜单视图控制器类进行绑定，

接着设置视图控制器，在故事板中的唯一标识符。

【Storyboard ID】:MenuViewController

选择菜单视图控制器的根视图。点击属性检查器图标，进行属性设置面板。

设置背景颜色Background。

以上就完成了所有的代码编写和界面绘制工作。