1. 程式人生 > >[Swift通天遁地]九、拔劍吧-(8)創建氣泡式頁面切換效果

[Swift通天遁地]九、拔劍吧-(8)創建氣泡式頁面切換效果

uifont range 文件 尺寸 rect dism width int delegate

本文將演示使用第三方類庫,創建頁面之間的氣泡式切換效果。

首先確保已經安裝了所需的第三方類庫。雙擊查看安裝配置文件【Podfile】

1 platform :ios, 12.0
2 use_frameworks!
3 
4 target DemoApp do
5     source https://github.com/CocoaPods/Specs.git
6     pod BubbleTransition
7 end

根據配置文件中的相關設置,安裝第三方類庫。

安裝完成之後,雙擊打開項目文件【DemoApp.xcodeproj】

首先創建一個自定義的視圖控制器,以實現兩個頁面之間的跳轉。

在項目文件夾上點擊鼠標右鍵,彈出右鍵菜單。

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

【Class】:AnimationController

【Subclass of:UIViewController

【Language】:Swift

->Next->【Create】

點擊打開【AnimationController.swift】,

現在開始編寫代碼,創建視圖控制器的界面。

 1 import UIKit
 2 
 3 class AnimationController: UIViewController {
4 5 override func viewDidLoad() { 6 super.viewDidLoad() 7 // Do any additional setup after loading the view, typically from a nib. 8 9 //添加一個按鈕,當按鈕點擊該按鈕時,關閉被打開的視圖控制器。 10 let button = UIButton(frame: CGRect(x: 130, y: 80, width: 60, height: 60)) 11 //
設置按鈕的背景顏色為白色 12 button.backgroundColor = UIColor.white 13 //通過將圓角半徑設置為尺寸的一半,從而創建一個圓形按鈕。 14 button.layer.cornerRadius = 30 15 //設置按鈕在正常狀態下的前景文字。 16 button.setTitleColor(UIColor.orange, for:.normal) 17 //設置按鈕在正常狀態下的標題文字。 18 button.setTitle("X", for: .normal) 19 //設置按鈕標題的字體屬性。 20 button.titleLabel?.font = UIFont(name: "Arial", size: 28) 21 //給按鈕控件綁定點擊事件。 22 button.addTarget(self, action: #selector(AnimationController.dismissViewController(_:)), for: .touchUpInside) 23 24 //將按鈕控件添加到根視圖 25 self.view.addSubview(button) 26 } 27 28 //添加一個方法,用來響應按鈕的點擊事件。 29 @objc func dismissViewController(_ btn:UIButton) 30 { 31 //當用戶點擊該按鈕時,關閉當前的視圖控制器。 32 self.dismiss(animated: true, completion: nil) 33 } 34 35 override func didReceiveMemoryWarning() { 36 super.didReceiveMemoryWarning() 37 // Dispose of any resources that can be recreated. 38 } 39 }

在左側的項目導航區,打開視圖控制器的代碼文件【ViewController.swift】

現在開始編寫代碼,實現氣泡式的頁面切換效果。

 1 import UIKit
 2 //引入已經安裝的第三方類庫
 3 import BubbleTransition
 4 
 5 //使當前的類,遵循視圖控制器的頁面切換代理協議。
 6 class ViewController: UIViewController, UIViewControllerTransitioningDelegate {
 7 
 8     //添加一個按鈕,作為當前類的一個屬性。
 9     //當用戶點擊該按鈕時,以氣泡方式打開另一個視圖控制器。
10     var button : UIButton!
11     //初始化一個氣泡切換對象。
12     var transition = BubbleTransition()
13     override func viewDidLoad() {
14         super.viewDidLoad()
15         // Do any additional setup after loading the view, typically from a nib.
16         
17         //對按鈕進行初始化操作,設置按鈕的顯示區域。
18         button = UIButton(frame: CGRect(x: 130, y: 400, width: 60, height: 60))
19         //設置按鈕的背景顏色為橙色。
20         button.backgroundColor = UIColor.orange
21         //設置按鈕在正常狀態下的標題文字。
22         button.setTitle("Open", for: .normal)
23         //通過將圓角半徑設置為尺寸的一半,從而創建另一個圓形按鈕。
24         button.layer.cornerRadius = 30
25         
26         //給按鈕綁定點擊事件
27         button.addTarget(self, action: #selector(ViewController.popViewController(_:)), for: .touchUpInside)
28         //最後將按鈕添加到根視圖。
29         self.view.addSubview(button)
30     }
31     
32     //添加一個方法,用來響應按鈕的點擊事件。
33     @objc func popViewController(_ btn:UIButton)
34     {
35         //初始化剛剛創建的視圖控制器。
36         let vc = AnimationController()
37         //設置該視圖控制器的切換代理 ,為當前的視圖控制器。
38         vc.transitioningDelegate = self
39         //設置視圖控制器的切換方式為自定義
40         vc.modalPresentationStyle = .custom
41         //在當前的視圖控制器,打開另一個視圖控制器。
42         self.present(vc, animated: true, completion: nil)
43     }
44     
45     //添加一個代理方法,用來監聽視圖控制器被打開的事件。
46     public func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning?
47     {
48         //設置視圖控制器的切換模式為展示模式。
49         transition.transitionMode = .present
50         //設置氣泡的起點位置,為按鈕的中心點
51         transition.startingPoint = button.center
52         //設置氣泡的填充顏色為按鈕的背景顏色
53         transition.bubbleColor = button.backgroundColor!
54         
55         //返回設置好的切換對象。
56         return transition
57     }
58     
59     //添加一個方法,用來監聽視圖控制器被關閉的事件。
60     public func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning?
61     {
62         //設置視圖控制器的切換模式為消失模式
63         transition.transitionMode = .dismiss
64         //設置消失氣泡的起點位置,為按鈕控件的中心點。
65         transition.startingPoint = button.center
66         //設置氣泡的填充顏色,為按鈕控件的背景顏色。
67         transition.bubbleColor = button.backgroundColor!
68         
69         //返回設置好的切換工作
70         return transition
71     }
72     
73     override func didReceiveMemoryWarning() {
74         super.didReceiveMemoryWarning()
75         // Dispose of any resources that can be recreated.
76     }
77 }

[Swift通天遁地]九、拔劍吧-(8)創建氣泡式頁面切換效果