[Swift通天遁地]9、拔劍吧-(7)建立旋轉和彈性的頁面切換效果

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公衆號：山青詠芝（shanqingyongzhi）
➤博客園地址：山青詠芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：http://www.javashuo.com/article/p-ezgnjeka-kq.html 
➤若是連接不是山青詠芝的博客園地址，則多是爬取做者的文章。
➤原文已修改更新！強烈建議點擊原文地址閱讀！支持做者！支持原創！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

目錄：[Swift]通天遁地Swift

本文將演示使用第三方類庫，建立旋轉和彈性的頁面切換效果。

首先確保已經安裝了所需的第三方類庫。雙擊查看安裝配置文件【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。

以上就完成了全部的代碼編寫和界面繪製工做。