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

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

目錄:[Swift]通天遁地Swiftios

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

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

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

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

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

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

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

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

【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 }
相關文章
相關標籤/搜索