上一篇的內容比較簡單，只不過是修修補補而已。而這一篇我們將會把遊戲從單一界面拓展到多界面。還記得遊戲界面中的i 按鈕嗎？現在點擊這個按鈕是沒有反應的，接下來我們要解決這一問題。

現在開始吧。

遊戲的主體已經基本建立了，作為一個藝術家，最自豪的事情就是在作品上署上自己的大名。作為產品的開發者也不例外，雖然創作的是軟體產品，但仍然可以歸為創作家的系列。而且，我們還需要給玩家提供一些簡單的幫助，讓他們知道如何進行遊戲。

所以我們將要添加一個about界面，這個新的about 界面中包含了傳說中的text view（文本視圖），裡面放了一堆說明文字當然還有一個用來關閉當前界面的按鈕。

我們可以通過觸碰遊戲主界面右下角的(i)按鈕進入這個界面。

當然，上面的界面不是最終的，很快我們就會對其美化~

絕大多數的iOS應用或遊戲中都不止有一個界面，即便是最簡單的遊戲也是如此，因此我們需要學習如何在應用中添加多個界面。

還記得我之前說過的嗎？iOS應用中的每個界面都對應一個獨立的視圖控制器。當你看到「界面」的時候，就應該想到「視圖控制器」。

Xcode已經為我們自動創建了ViewController這個視圖控制器，但這個新的關於界面的視圖控制器則需要我們自己手動來創建。

下面的東西可是全新的，不要眨眼啊。

在Xcode中，點擊頂部菜單欄中的File，然後選中New File...在彈出的窗口中選中Cocoa Touch Class。

點擊Next，看到類似下面的界面：

照著上面輸入相關信息：

  • Class: AboutViewController
  • Subclass of: UIViewController
  • Also create XIB file: 不選擇
  • Language:Swift

點擊Next，Xcode會讓你選擇保存這個新視圖控制器的地方，不要想太多，直接默認Create就好了。不過要記得勾選Targets後面的那個選框。

此時會看到在Xcode的項目導航部分出現了一個新的文件，名為AboutViewController.swift。

如下圖所示：

為了設計這個全新的視圖控制器，我們需要再次切換到內置的Interface Builder。

在Xcode的左側導航部分點擊打開Main.storyboard。目前裡面並沒有關於界面的視圖控制器，因此我們需要手動創建一個新的。

從Xcode右下方的Object Library中拖出一個View Controller到畫布上，放在之前的視圖控制器的右側。

此時兩個視圖控制器可能重疊到一起了（取決於你操作的方式），為了看起來順眼，不妨手動拖動調整它們的位置。Interface Builder貌似不是處女座的。

接下來在Xcode右下角的面板中切換到Object Library,找到 Button,把它拖動到視圖上，把它改名為「Close」，然後放在視圖底部的中央位置。

然後找到Text View，用滑鼠拖動到白色的視圖上，然後讓它覆蓋按鈕之上的大部分空間。

注意這裡還有一個Text Field，不過它是用來輸入單行文本的（比如用戶名和密碼）。

Text View（文本視圖）裡面則可以放置多行文本。

最後我們得到的是類似下面的東西：

默認情況下，文本視圖裡麪包含了一大堆拉丁語佔位文字（也就是傳說中的」Lorem Ipsum」，如果你恰好懂得拉丁語，或許會感到很幸福，無人愛苦，亦無人尋之慾之，乃因其苦… 參考baike.baidu.com/view/23 ）。

雙擊文本視圖，然後修改其中的文字，隨便你用怎麼樣的文字都可以。

如果你想偷懶，可以直接用下面的這些文字（或者隨便什麼文字都行）。

Hear my words, and bear witness to my vow.

Night gathers, and now my watch begins.

I shall take no wife, hold no lands, father no children.

I shall wear no crowns and win no glory.

I shall live and die at my post.

I am the sword in the darkness,

I am the watcher on the walls.

I am the fire that burns against the cold,

the light that brings the dawn,

the horn that wakes the sleepers,

the shield that guards the realms of men.

I pledge my life and honor to the Nights Watch,

for this night, and all the nights to come.

你也可以直接把文字拷貝粘貼到text view的Attributes inspector中。

別忘了在右側面板的Attributes Inspector選項中取消選中Editable，否則玩家就可以自己輸入文本了。在我們這款遊戲裡面，暫時不想搞這些東西。

好了，關於界面的界面設置就是這樣了。

那麼我們如何讓用戶觸碰(i)按鈕時打開新的關於界面呢？Storyboards裡面提供了一個很簡單的方法：segue（你可以發音seg-way，是的，就是那個土掉渣但又屌炸天的電動平衡車。

一個segue其實就是從一個界面切換到另一個界面的過渡中樞。

在Xcode中切換到Main.storyboard，然後選中(i)這個按鈕，按住Ctrl鍵，按住滑鼠左鍵拖出一條線到關於界面上。

鬆開滑鼠，可以看到一個彈出菜單，從其中選擇modal。

此時在兩個界面之間會出現一個箭頭，這個箭頭就代表一個segue。

點擊這個箭頭選中它，segue也有自己的屬性。在Xcode右側面板中切換到Attributes inspector，選擇Transition,Flip Horizontal。這樣UIKit將在兩個界面之間切換時使用這樣的一個動畫特效。

現在你可以嘗試編譯運行應用，觸碰(i)按鈕看看效果。

你會看到一個簡單的翻轉動畫效果。

不過似乎還有點小問題，如果我們觸碰關於界面中的關閉按鈕，什麼也不會發生。

一旦玩家進入關於界面，他就被鎖定在這個空間了。想想卡布裏卡裡面的虛擬人，被長期關閉在一個單獨的空間裡面暗無天日，是多麼的殘忍。

為什麼會發生這種事情呢？因為segue雖然是界面切換的利器，遺憾的是它們都是單向的。為了讓虛擬世界和現實世界中的人都能開心起來，我們必須讓關閉按鈕和某個動作方法關聯在一起。

不過和之前不同的是，這次我們需要讓動作方法和AboutViewController中的界面元素關聯在一起，而非ViewController，因為關閉按鈕是關於界面的一部分，而不是主界面的組成部分。

打開AboutViewController.swift，然後使用以下代碼替代其中的內容。

import UIKit
class AboutViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()

// Do any additional setup after loading the view.
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
@IBAction func close(){
dismiss(animated: true, completion: nil)
}
}

close()這個動作方法的作用就是通知UIKit用動畫效果關閉關於界面。

如果上面的那行長代碼更改為dismiss(false,…)，那麼就不會有任何翻轉效果，主界面會立即呈現出來。

為了讓用戶體驗更好，顯然使用某種精巧的動畫特效要比較貼近人心。

最後就是在界面元素和動作方法之間創建關聯了。

在Xcode中打開Main.storyboard，然後選中關閉按鈕，按住Ctrl鍵，用滑鼠拖出一條線到關於界面的View Controller。

不對，在彈出式菜單中沒有出現我們期待的close動作方法，實際上我們會看到類似下面的彈出菜單。

思考：

想想看究竟哪裡出錯了。非常常見而又讓人頭大的錯誤。

問題其實很簡單，storyboard中的界面不知道自己其實代表著AboutViewController（因為沒人告訴它）。

我們在前面的操作中只是添加了AboutViewController.Swift的源文件，同時往storyboard中拖入一個新的視圖控制器，但是我們沒有告訴storyboard這個新的視圖控制器實際上是AboutViewController（這就是為什麼你在outline 面板中看到的名稱是View Controller，而不是About View Controller。）

好在這個問題不難解決。在Interface Builder中選中這個關於界面的視圖控制器，然後在Xcode右側面板切換到Identity inspector。

在Custom Class下面，將Class後面的類型選擇為AboutViewController

現在我們終於可以把關閉按鈕和動作方法關聯在一起了。

按住Ctrl鍵，有滑鼠從關閉按鈕拖一條線到About View Controller，這件事情你應該已經輕車熟路了。此時你會看到彈出菜單中有一個選項是close動作方法，選中它，關聯就創立了。

再次編譯運行，現在你可以很輕鬆的從關於界面返回遊戲主界面了。

好吧，我們的遊戲似乎已經完工了。所有的功能都具備了，而且也沒有什麼bug。現在的問題是-界面太難看！如果你現在把這款應用提交給App Store，百分百會被拒掉！

蘋果官方提供了一個iOS 產品設計的人機交互指南，無論是程序猿，產品經理，還是設計人員，都應該反覆仔細閱讀。

developer.apple.com/lib

即便你以後不打算做iOS開發，想做android,網頁或者桌面開發，瞭解iOS的人機交互指南也是非常重要的。畢竟，蘋果可是設計領域當之無愧的神級公司！

小練習：

對於關於界面，我們做一個小小的修改吧，更改其背景圖片為之前主界面的圖片即可，同時把close關閉按鈕的外觀也做一些改造工作。

具體怎麼操作就不再贅述了，大家可以參考示例項目。

好了，今天的學習先到此結束吧，這一篇的內容可能對新手有點喫力，不過我們也學到了更多有用的東西。

答疑說明：

1.為了方便大家對課程中的問題提問，創建了一個問答社區。大家後續有開發相關的問題請到課程答疑專區提問icode.fun/ask/forum.php

2.請大家在提問之前建議先看一下這個帖子：icode.fun/ask/forum.php?

聯繫方式：

公眾號：icodefun

個人微信： iseedo

QQ討論羣：375143733

示例項目：

github.com/eseedo/iOSCo

老習慣，福利一張。

喬幫主座駕賓士SL55AMG


推薦閱讀：
相關文章