1. 程式人生 > >[Xcode10 實際操作]九、實用進階-(23)多個Storyboard故事板中的頁面跳轉

[Xcode10 實際操作]九、實用進階-(23)多個Storyboard故事板中的頁面跳轉

本文將演示多個Storyboard故事板中的頁面跳轉。

使用快捷鍵【Command】+【N】建立一個新的故事板檔案。

(在專案資料夾【DemoApp】上點選滑鼠右鍵【New File】建立)

->【Storyboard】->【Next】->【Save As】:Storyboard.storyboard

->儲存預設的儲存位置點選【Create】

新新增的當前故事板中還沒有新增檢視控制器,

點選【庫圖示】,開啟控制元件庫面板,

在【View Controller】檢視控制器上雙擊,往故事板中插入第一個檢視控制器。

現在故事板中,已經擁有了一個檢視控制器,點選檢視控制器下方的【模型尺寸列表】

在彈出的裝置控制器列表中,選擇一個小型的裝置,以調整故事板中的控制器的尺寸,

使故事板可以在一屏範圍內,顯示更多的控制器。

點選【庫圖示】,開啟控制元件庫面板,

在【View Controller】檢視控制器上雙擊,往故事板中插入第二個檢視控制器。

點選【顯示或隱藏檢查器】圖示,開啟右側的檢查器面板。

點選【身份檢查器圖示】進入身份檢查器面板。

【Storyboard ID】:servicePage,即輸入第二個檢視控制器在故事板中的標識。

將在下文中通過這個標識,獲得該檢視控制器。

在故事版左側的文件框架區域,選擇第一個檢視控制器。

點選【屬性檢查器】圖示,開啟屬性設定面板。

勾選【Is Initial View Controller】是否初始檢視控制器複選框。

設定第一個檢視控制器為當前控制板的檢視控制器。

然後選擇檢視控制器中的根檢視,往根檢視中新增控制元件。

點選【庫圖示】,開啟控制元件庫面板,

在【Button】按鈕控制元件上雙擊,往根檢視插入一個按鈕控制元件。

在按鈕定界框的左側按下手指,以調整按鈕的寬度。

設定按鈕的標題文字,【Tile】下方輸入框:Back。

使用快捷鍵【Command】+【N】建立在故事版中,第一個檢視控制器對應的類檔案。

(在專案資料夾【DemoApp】上點選滑鼠右鍵【New File】建立)

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

【Class】:ServiceViewController。輸入類名。

【Subclass of】:UIViewController,父類名稱

【Language】:Swift,類檔案的預設語言

->【Next】->儲存預設的儲存位置點選【Create】

在專案導航區,開啟並編輯上文建立的故事版檔案【Storyboard.storyboard】

然後選擇第一個檢視控制器,給檢視控制器指定對應的類檔案。

點選身份檢查器圖示,進入身份檢查器面板。

【Class】:ServiceViewController,即輸入剛剛建立的類檔案的名稱。

這樣故事板中的檢視控制器,就和類檔案進行了繫結和連線。

點選【顯示或隱藏輔助編輯器】圖示,開啟輔助編輯器。

選擇控制器中的按鈕控制元件,需要將按鈕控制元件,與繫結的類檔案的方法進行連線。

在按鈕上點選滑鼠右鍵,然後拖動到右側的程式碼檔案中。

(兩個方法:1.滑鼠右鍵 2.【Command】+滑鼠左鍵)

設定:

【Connection】:Action

【Name】:goBack

點選【Connect】完成按鈕的連線設定。

在專案導航區,開啟檢視控制器的程式碼檔案【ServiceViewController.swift】

 1 import UIKit
 2 
 3 class ServiceViewController: UIViewController {
 4 
 5     @IBAction func goBack(_ sender: Any) {
 6         //當用戶點選按鈕時,導航控制元件將返回上一頁
 7         self.navigationController?.popViewController(animated: true)
 8     }
 9     override func viewDidLoad() {
10         super.viewDidLoad()
11 
12         // Do any additional setup after loading the view.
13     }
14 }

點選顯示標準編輯器按鈕,恢復預設的編輯器介面。

開啟並檢視主故事版【Main.storyboard】的內容。

檢視控制器中有三個跳轉按鈕,當用戶點選不同的按鈕時,跳轉到不同的頁面。

在專案導航區,開啟檢視控制器的程式碼檔案【ViewController.swift】

編寫程式碼,實現按鈕控制元件的連線方法。

 1 import UIKit
 2 
 3 class ViewController: UIViewController {
 4     
 5     //現在為第二個按鈕新增點選事件
 6     @IBAction func gotoPage1OfStoryboard(_ sender: AnyObject) {
 7         //從專案中,獲得指定名稱的故事版檔案
 8         let storyBoard = UIStoryboard(name: "ServiceStoryboard", bundle: nil)
 9         //獲得故事板中的初始檢視控制器
10         let vc = storyBoard.instantiateInitialViewController()
11         
12         //在當前的頁面中,跳轉到指定的檢視控制器
13         self.navigationController?.pushViewController(vc!, animated: true)
14     }
15     
16      //現在為第三個按鈕新增點選事件
17     @IBAction func gotoPage2OfStoryboard(_ sender: AnyObject) {
18         //從專案中,獲得指定名稱的故事版檔案
19         let storyBoard = UIStoryboard(name: "ServiceStoryboard", bundle: nil)
20         //根據上文給檢視控制器設定的故事版標識,獲得對應的故事版控制器
21         let vc = storyBoard.instantiateViewController(withIdentifier: "servicePage")
22         
23         //在導航控制器中,從當前的頁面跳轉到指定的檢視控制器
24         self.navigationController?.pushViewController(vc, animated: true)
25         //在頁面進行跳轉的同時,隱藏底部的標籤欄
26         self.tabBarController?.tabBar.isHidden = true
27     }
28     
29     override func viewDidLoad() {
30         super.viewDidLoad()
31         // Do any additional setup after loading the view, typically from a nib.
32     }
33     
34     override func didReceiveMemoryWarning() {
35         super.didReceiveMemoryWarning()
36         // Dispose of any resources that can be recreated.
37     }
38 }