[Xcode 實際操做]3、視圖控制器-(1)使用UIScrollView展現多個視圖可控制器

目錄：[Swift]Xcode實際操做

本文將演示使用滾動視圖建立多個頁面。

【Create a new Xcode project】->【Single View App】->【Next】

Product Name:PageControllViewProject

->【Next】->【Create】

建立三個視圖控制器類文件，併爲每一個視圖控制器的根視圖，設置背景顏色。

一、視圖文件1

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

Name:PageControllViewController

Subclass:UIViewController

Language:Swift

->【Create】

 1 import UIKit
 2 
 3 class FirstSubViewController: UIViewController {
 4 
 5     override func viewDidLoad() {
 6         super.viewDidLoad()
 7         // Do any additional setup after loading the view.
 8         //設置第一個視圖的根視圖背景顏色爲棕色
 9         self.view.backgroundColor = UIColor.brown
10     }
11 
12     override func didReceiveMemoryWarning() {
13         super.didReceiveMemoryWarning()
14         // Dispose of any resources that can be recreated.
15     }
16 }

二、視圖文件2

Name:FirstSubViewController

Subclass:UIViewController

Language:Swift

 1 import UIKit
 2 
 3 class SecondSubViewController: UIViewController {
 4 
 5     override func viewDidLoad() {
 6         super.viewDidLoad()
 7 
 8         // Do any additional setup after loading the view.
 9         //設置第一個視圖的根視圖背景顏色爲紫色
10         self.view.backgroundColor = UIColor.purple
11     }
12 }

三、視圖文件3

Name:SecondSubViewController

Subclass:UIViewController

Language:Swift

  1 import UIKit
  2 //首先爲當前視圖控制器，添加滾動視圖的代理協議 UIScrollViewDelegate
  3 class PageControlViewController: UIViewController, UIScrollViewDelegate {
  4     //而後爲視圖控制器，添加一個滾動視圖屬性
  5     //滾動視圖是一個能夠拖動的組件
  6     var scrollView = UIScrollView()
  7     //繼續添加一個控制翻頁的屬性，使用它來控制滾動視圖的翻頁
  8     //經過該組件中的小白點，來觀察當前頁面的位置
  9     var pageControl = UIPageControl()
 10     //添加一個狀態屬性，用來標識頁面的滑動狀態
 11     var isPageControlUsed = false
 12     override func viewDidLoad() {
 13         super.viewDidLoad()
 14 
 15         // Do any additional setup after loading the view.
 16         //首先得到當前設備的屏幕尺寸信息
 17         var screenFrame = UIScreen.main.bounds
 18         //而後得到屏幕尺寸的寬度值
 19         let screenWidth = screenFrame.size.width
 20         //而後得到屏幕尺寸的高度值
 21         let screenHeight = screenFrame.size.height
 22         
 23         //建立一個區域，來顯示以前建立的視圖控制器
 24         scrollView.frame = screenFrame
 25         //設置滾動視圖爲分頁模式，即每滾動一次就是一頁
 26         scrollView.isPagingEnabled = true
 27         //設置滾動視圖的尺寸信息。
 28         //這裏有兩個頁面，因此將滾動視圖的寬度，設置爲兩倍頁面寬度
 29         scrollView.contentSize = CGSize(width: screenWidth * 2, height: screenHeight)
 30         //設置滾動視圖的背景顏色爲黑色
 31         scrollView.backgroundColor = UIColor.black
 32         //設置滾動視圖對象的代理爲當前的控制器對象，
 33         //這樣就能夠在當前的文件中，編寫代理方法，
 34         //以捕捉滾動視圖的相關動做
 35         scrollView.delegate = self
 36         
 37         //再建立一個高度常量，做爲頁面控制器對象的高度
 38         let pcHeight:CGFloat = 50.0
 39         //而後建立一個區域，用來顯示頁面控制器對象
 40         let pcRect = CGRect(x: 0, y: screenHeight - pcHeight, width: screenWidth, height: pcHeight)
 41         
 42         //設置頁面控制器對象的顯示區域
 43         pageControl.frame = pcRect
 44         //接着設置頁面控制器對象的總頁數爲2頁
 45         pageControl.numberOfPages = 2
 46         //設置頁面控制器對象的當前頁編號
 47         pageControl.currentPage = 0
 48         //繼續設置頁面控制器對象的背景顏色爲灰色
 49         pageControl.backgroundColor = UIColor.gray
 50         //給頁面控制器對象，添加監聽頁面切換事件的方法
 51         pageControl.addTarget(self, action: #selector(pageControlDidChanged(_:)), for: UIControl.Event.valueChanged)
 52         
 53         //建立第一個視圖控制器對象的實例
 54         let firstController = FirstSubViewController()
 55         //設置座標原點的橫向值爲0
 56         screenFrame.origin.x = 0
 57         //設置第一個視圖控制器對象的顯示區域
 58         firstController.view.frame = screenFrame
 59         
 60         //建立第二個視圖控制器對象的實例
 61         let secondController = SecondSubViewController()
 62         //設置座標原點的X值爲屏幕的寬度，
 63         //即第二個視圖控制器對象顯示再屏幕以外
 64         screenFrame.origin.x = screenFrame.size.width
 65         //設置第二個視圖控制器對象的顯示區域
 66         secondController.view.frame = screenFrame
 67         
 68         //將兩個視圖控制器的根視圖，
 69         //分別添加到滾動視圖對象裏
 70         scrollView.addSubview(firstController.view)
 71         scrollView.addSubview(secondController.view)
 72         
 73         //再把滾動視圖對象和頁面控制器對象，
 74         //分別添加到當前窗口的根視圖裏
 75         self.view.addSubview(scrollView)
 76         self.view.addSubview(pageControl)
 77     }
 78 
 79     //建立監聽頁面切換事件的方法
 80     @objc func pageControlDidChanged(_ sender:AnyObject)
 81     {
 82         //得到當前頁面控制器對象的當前頁碼
 83         let crtPage = (CGFloat)(pageControl.currentPage)
 84         //得到滾動視圖當前的顯示區域
 85         var frame = scrollView.frame
 86         //根據頁面控制器對象的目標頁碼
 87         //計算滾動視圖在下一頁中的顯示區域
 88         frame.origin.x = frame.size.width * crtPage
 89         frame.origin.y = 0
 90         
 91         //而後滾動視圖到目標區域
 92         scrollView.scrollRectToVisible(frame, animated: true)
 93         //設置經過頁面控制器對象切換頁面
 94         isPageControlUsed =  true
 95     }
 96     
 97     //建立監聽滾動視圖的滾動事件的代理方法
 98     func scrollViewDidScroll(_ scrollView: UIScrollView)
 99     {
100         //若是是經過頁面控制器對象切換頁面，則不執行後面的代碼
101         if(!isPageControlUsed)
102         {
103             //得到滾動視圖的寬度值
104             let pageWidth = scrollView.frame.size.width
105             //根據滾動視圖的寬度值和橫向位移量，計算當前的頁碼
106             let page = floor((scrollView.contentOffset.x - pageWidth/2)/pageWidth) + 1
107             //設置頁面控制器的顯示頁碼，爲經過計算所得的頁碼
108             pageControl.currentPage = Int(page)
109         }
110     }
111     
112     //建立監聽滾動視圖的滾動減速事件的代理方法
113     func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
114        //重置標識變量的默認值，而後打開應用代理文件
115         isPageControlUsed = false
116     }
117     
118     override func didReceiveMemoryWarning() {
119         super.didReceiveMemoryWarning()
120         // Dispose of any resources that can be recreated.
121     }
122 }

而後打開應用代理文件

 1 import UIKit
 2 
 3 @UIApplicationMain
 4 class AppDelegate: UIResponder, UIApplicationDelegate {
 5 
 6     var window: UIWindow?
 7 
 8 
 9     func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
10         // Override point for customization after application launch.
11         //在應用啓動完成的代理方法中，建立程序的入口
12         //建立滾動視圖控制器的實例
13         let vc = PageControlViewController()
14         //而後把滾動視圖控制器的實例，
15         //做爲當前窗口的根視圖控制器
16         self.window?.rootViewController = vc
17         return true
18     }
19 
20     func applicationWillResignActive(_ application: UIApplication) {
21         // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
22         // Use this method to pause ongoing tasks, disable timers, and throttle down OpenGL ES frame rates. Games should use this method to pause the game.
23     }
24 
25     func applicationDidEnterBackground(_ application: UIApplication) {
26         // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
27         // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
28     }
29 
30     func applicationWillEnterForeground(_ application: UIApplication) {
31         // Called as part of the transition from the background to the inactive state; here you can undo many of the changes made on entering the background.
32     }
33 
34     func applicationDidBecomeActive(_ application: UIApplication) {
35         // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
36     }
37 
38     func applicationWillTerminate(_ application: UIApplication) {
39         // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
40     }
41 }