[Swift通天遁地]九、拔劍吧-(8)創建氣泡式頁面切換效果
阿新 • • 發佈:2019-02-09
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)創建氣泡式頁面切換效果