原稿第9章應(yīng)用導(dǎo)航模式

1、第9章 應(yīng)用導(dǎo)航模式幾乎每個(gè)應(yīng) Assets.xcassets 都會(huì)用到導(dǎo)航，本章將為大家介紹平鋪導(dǎo)航、導(dǎo)航和樹(shù)形結(jié)構(gòu)導(dǎo)航的使用方式。另外，還講解了 3 種導(dǎo)航模式的綜合用法。這些知識(shí)點(diǎn)基本囊括了開(kāi)發(fā)工作中的大部分導(dǎo)航需求，希望大家能有所收獲。9.1 導(dǎo)航概述導(dǎo)航指戶使用應(yīng)用，沒(méi)有有效的導(dǎo)航，用戶就會(huì)迷失方向。如果火車(chē)站沒(méi)有導(dǎo)航標(biāo)牌，高速公沒(méi)有路標(biāo)，情況會(huì)怎樣？，人們會(huì)無(wú)所適從，甚至手足無(wú)措。開(kāi)發(fā)的應(yīng)用是否具備這些“標(biāo)牌”和“路標(biāo)”呢？完美的導(dǎo)航能夠清晰地指戶完成任務(wù)。導(dǎo)航是應(yīng)用開(kāi)發(fā)中極為重要的部分，想做好也是存有 3 種導(dǎo)航模式，每一種導(dǎo)航模式都對(duì)在一定難度的。從內(nèi)容組織形式上考慮，應(yīng)于不同

2、的視圖控制器。平鋪導(dǎo)航模式：內(nèi)容沒(méi)有層次關(guān)系，展示的內(nèi)容都放置在一個(gè)主屏幕上，采用分屏或分頁(yè)控制器進(jìn)行導(dǎo)航，可以左右或者上下滑動(dòng)屏幕查看內(nèi)容。圖9-1展示了中自帶的天氣預(yù)用，它采用分屏進(jìn)行導(dǎo)航。導(dǎo)航模式：內(nèi)容被分成幾個(gè)功能模塊，每個(gè)功能模塊之間沒(méi)關(guān)系。通過(guò)管理各個(gè)功能模塊，單擊可以切換功能模塊。圖9-2展示了導(dǎo)航模式。中自帶的時(shí)鐘應(yīng)用，它采用的就是圖 9-1 平鋪導(dǎo)航模式圖 9-2導(dǎo)航模式樹(shù)形結(jié)構(gòu)導(dǎo)航模式：內(nèi)容是有層次的，從上到下細(xì)分或者具有分類包含等關(guān)系，例如黑龍江省包含了哈爾濱，哈爾濱又包含了道里區(qū)、道外區(qū)等。圖9-3展示了中自帶的郵件應(yīng)用，它采用的就是樹(shù)形結(jié)構(gòu)導(dǎo)航模式。圖 9-3 樹(shù)形結(jié)

3、構(gòu)導(dǎo)航模式這 3 種導(dǎo)航模式基本可以滿足大部分應(yīng)用的導(dǎo)航需求。在實(shí)際應(yīng)用中，有時(shí)會(huì)將幾種導(dǎo)航模式組合在一起使用。9.2 導(dǎo)航的“死胡同”模態(tài)窗口在導(dǎo)航過(guò)程中，有時(shí)候需要放棄主要任務(wù)轉(zhuǎn)而做其他次要任務(wù)，然后再返回到主要任務(wù)，這個(gè)“次要任務(wù)”就是在“模態(tài)視圖”中完成的。圖 9-4 為模態(tài)視圖示意圖，該圖中的主要任務(wù)是登錄后進(jìn)入主界面，如果用戶沒(méi)有，就要先去“”?！啊笔谴我蝿?wù)，當(dāng)用戶完成后，會(huì)關(guān)閉視圖，回到登錄界面繼續(xù)進(jìn)行主要任務(wù)。圖 9-4 模態(tài)視圖示意圖默認(rèn)情況下，模態(tài)視圖是從屏幕下方滑出來(lái)的。當(dāng)完成的時(shí)候需要關(guān)閉這個(gè)模態(tài)視圖，如果不關(guān)閉，就不能做別的事情，這就是“模態(tài)”的含義，它具有必須響應(yīng)

4、處理的意思。因此，模態(tài)視圖中一定會(huì)有“關(guān)閉”或“完成”按鈕，其根本原因是 iOS 只有一個(gè) Home鍵。Android 和 Window Phone 就不會(huì)遇到這些問(wèn)題，因?yàn)樵谶@兩個(gè)系統(tǒng)中遇到上述情況時(shí)，可以通過(guò) Back 鍵返回。負(fù)責(zé)控制模態(tài)視圖的控制器，被稱為“模態(tài)視圖控制器”?！澳B(tài)視圖控制器”并非一個(gè)專門(mén)的類，它可以是上面提到的控制器的子類。負(fù)責(zé)主要任務(wù)視圖的控制器稱為“主視圖控制器”，它與模態(tài)視圖控制器之間是“父子”關(guān)系。在 UIViewController 類中，主要有如下兩個(gè)方法。pletion:)：呈現(xiàn)模態(tài)視圖。pletion:)：關(guān)閉模態(tài)視圖。present(dismiss(

5、在呈現(xiàn)模態(tài)視圖時(shí)候，有兩個(gè)選擇，一種是在程序代碼中使用 UIViewController 的present(pletion:)方法實(shí)現(xiàn)；另一種是通過(guò)erface Builder 在故事板的 Segue實(shí)現(xiàn)，這種方式不需要編寫(xiě)一行代碼。下面通過(guò)一個(gè)案例來(lái)介紹模態(tài)視圖。這個(gè)案例有一個(gè)登錄界面和一個(gè)界面，在登錄界面單擊“”按鈕，會(huì)從屏幕下方滑出模態(tài)視圖，如圖 9-5 所示，單擊 Cancel或 Save 按鈕后關(guān)閉界面。視圖，而且在單擊 Save 按鈕時(shí)候，會(huì)把“用戶 ID”回傳給登錄圖 9-5 模態(tài)視圖案例erface Builder 實(shí)現(xiàn) ModalViewSle 具體步驟如下：1. 創(chuàng)建工程使

6、用 Xcode 創(chuàng)建工程 ModalViewSle，相關(guān)選項(xiàng)如下：模板采用 Single ViewApplication，Devi2. 屏幕適配選擇。豎屏，所以這里設(shè)置 Size Class 的值為 wCompact|本案例中屏幕適配所有的hRegular，如圖 9-6 所示，具體操作大家可以參考 8.2 節(jié)。圖 9-6 當(dāng)前視圖控制器3.添加導(dǎo)航欄本例的視圖都是帶有導(dǎo)航欄的（如圖 9-5 所示），添加導(dǎo)航欄的方式有兩種：一是從對(duì)象庫(kù)中拖曳一個(gè) Navigation Bar 到視圖設(shè)計(jì)界面頂部；二是將當(dāng)前視圖控制器嵌入到一個(gè)導(dǎo)航控制器中。下面介紹第二種方式，具體步驟：在故事板中選擇 View

7、Controller，然后單擊EditorEmbed Navigation Controller 菜單，添加完成后的設(shè)計(jì)界面如圖9-7 所示。導(dǎo)航欄可以帶有標(biāo)題，雙擊導(dǎo)航欄中間部分，然后使導(dǎo)航欄標(biāo)題處于編輯狀態(tài)，并輸入內(nèi)容“登錄”，如圖 9-8 所示。圖 9-7 當(dāng)前視圖控制器嵌入到導(dǎo)航控制器圖 9-8 編輯導(dǎo)航欄標(biāo)題4.界面布局參照如圖 9-5 所示的登錄視圖界面布局，從對(duì)象庫(kù)中拖曳視圖到設(shè)計(jì)界面，并將其擺放到合適的位置，如圖 9-9 所示，然后為每一個(gè)視圖添加 Auto Layout 約束，添加約束的步驟參考 7.3 節(jié)。圖 9-9 設(shè)計(jì)登錄界面5.添加視圖接著來(lái)設(shè)計(jì)第二個(gè)界面（視圖）。首

8、先從對(duì)象庫(kù)中拖曳 View Controller 視圖控制器到設(shè)計(jì)界面，參考上面的步驟將該視圖控制器也嵌入到導(dǎo)航控制器中。界面導(dǎo)航欄的標(biāo)題為“”，然后從對(duì)象庫(kù)中拖曳兩個(gè) Bar Button Item 到修改設(shè)計(jì)界面導(dǎo)航欄兩邊，如圖 9-10 所示。Cancel 和 Save 按鈕都是 iOS 系統(tǒng)按鈕，設(shè)置左按鈕的 identifier 屬性為 Cancel，右按鈕的 identifier 屬性為 Save。圖 9-10 添加左右導(dǎo)航欄按鈕6.添加兩個(gè)場(chǎng)景的過(guò)渡（Segue）到此為止，只是設(shè)計(jì)完成了兩個(gè)獨(dú)立的視圖控制器，如圖 9-11 所示。如果想單擊登錄界面中的“”按鈕后，界面跳轉(zhuǎn)到界面，

9、則需要在登錄場(chǎng)景和場(chǎng)景之間創(chuàng)建一個(gè)過(guò)渡，操作過(guò)程類似于連接輸出口：按住 control 鍵，從“”按鈕拖曳鼠標(biāo)到導(dǎo)航控制器，如圖 9-12 所示。然后松開(kāi)鼠標(biāo)，此時(shí)會(huì)彈出如圖 9-13 所示的菜單，從中選擇 Present Modally 菜單，Present Modally 是模態(tài)類型的過(guò)渡。圖 9-11 兩個(gè)獨(dú)立的視圖控制器圖 9-12 從登錄按鈕拖曳鼠標(biāo)到導(dǎo)航控制器圖 9-13 選擇Present Modally兩個(gè)場(chǎng)景之間成功創(chuàng)建過(guò)渡操作后，再看設(shè)計(jì)界面，其中 4 個(gè)控制器都連接在一起了，如圖 9-14 所示。圖 9-14 連接在一起的視圖控制器7.添加視圖控制器類到此為止，在erfa

10、ceBuilder 中的操作基本完成，下面就可以編寫(xiě)代碼了。由于創(chuàng)建工程時(shí)只有一個(gè)控制器類 ViewController，它可以作為登錄視圖控制器類，還需要添加一個(gè)視圖控制器類，具體操作步驟如下。(1) 選擇 FileNewFile菜單項(xiàng)，在打開(kāi)的 Choose a template for your new file:框中選擇 Cocoa Touch Class 文件模板（如圖 9-15 所示）。圖 9-15 選擇文件模板(2) 單擊 Next 按鈕，得到的界面如圖 9-16 所示。在 Class 中輸入RegisterViewController類名，從 Subclass of 下拉列表中

11、選擇 UIViewController。注意，不要選中 Also create XIB file 復(fù)選框。圖 9-16 輸入類名(3)Builder單擊 Next 按鈕，此時(shí) RegisterViewController 類就創(chuàng)建好了。然后回到erfaceClass中，選擇 視圖控制器，打開(kāi)其標(biāo)識(shí)檢查器， 重新選擇 為RegisterViewController ，這樣故事板中的這個(gè)視圖控制器就與代碼中 的RegisterViewController 對(duì)應(yīng)起來(lái)了。然后，再為件。下面再具體介紹一下代碼。首先，模態(tài)視圖的呈現(xiàn)已經(jīng)通過(guò)故事板實(shí)現(xiàn)了，關(guān)閉模態(tài)界面導(dǎo)航欄中的左右按鈕定義動(dòng)作事Regist

12、erViewController視圖需要通過(guò)代碼實(shí)現(xiàn)。關(guān)閉模態(tài)視圖是在如下：class RegisterViewController: UIViewController 中實(shí)現(xiàn)的，具體代碼IBOutlet weak var txtUsername: UITextField!IBAction func save(_ sender: AnyObject) self.dismiss(animated: true) () - Void in pr (單擊Save按鈕，關(guān)閉模態(tài)視圖)var dataDict = String: String() dataDictusername = self.txtUs

13、ername.textNotificationCenter.default.t(name: Notification.Name(rawValue: object: nil, userInfo: dataDict)pletionNotification),IBAction func cancel(_ sender: AnyObject) self.dismiss(animated: true, completion: pr (單擊Cancel按鈕，關(guān)閉模態(tài)視圖)其中代碼第行和第行是單擊 Save 按鈕和 Cancel 按鈕觸發(fā)的事件，這兩個(gè)按鈕都可以關(guān)閉模態(tài)視圖。提示 代 碼 第 行 采 用 的

14、 是 Swift 語(yǔ) 言 尾 隨 閉 包 表 示 形 式 ， 尾 隨 閉 包 是 將 pletion:)方法的最后一個(gè)參數(shù)（閉包形式的）放到dismiss方法的后dismiss(面。若讀者想深入了解尾隨閉包，可以參考2.14.6節(jié)。第行代碼則沒(méi)有采用尾隨閉包表示形式，其中的completion參數(shù)值是一個(gè)閉包。另外，代碼第行和第行采用通知機(jī)制將參數(shù)回傳給登錄視圖控制器。為了接收參數(shù)，需要在登錄視圖控制器 ViewController 中添加代碼如下：class ViewController: UIViewController override func viewDidLoad() super.

15、viewDidLoad()NotificationCenter.default.addObserver(self,selector: #selector(pletion(_:),name: Notification.Name(rawValue: object: nil)pletionNotification),override func didReceiveMemoryWarning() super.didReceiveMemoryWarning() NotificationCenter.default.removeObserver(self)funcpletion(_ notificatio

16、n: Notification) let theData = notification.userInfo as! String: String let username = theDatausername!pr (username = (username)首先需要在 viewDidLoad中通知 pletionNotification ，pletion 是回調(diào)方法。9.3 平鋪導(dǎo)航平鋪導(dǎo)航模式是非常重要的導(dǎo)航模式，一般用于簡(jiǎn)單的扁平化信息瀏覽。扁平化信息是指這些信息之間沒(méi)有從屬的層次關(guān)系，例如而哈爾濱市與黑龍江省之間就是從屬的層次關(guān)系。和哈爾濱之間就沒(méi)有從屬關(guān)系，9.3.1平鋪導(dǎo)航概述圖 9-

17、16 所示是自帶的天氣應(yīng)用程序，每一個(gè)屏幕展示一個(gè)城市最近的天氣信息。它是基于分屏導(dǎo)航實(shí)現(xiàn)的平鋪導(dǎo)航模式?；诜制翆?dǎo)航實(shí)現(xiàn)的平鋪導(dǎo)航模式可以構(gòu)建 iOS 中的實(shí)用型應(yīng)用程序。圖 9-17 平鋪導(dǎo)航的天氣應(yīng)用提示 實(shí)用型應(yīng)用程序完成的簡(jiǎn)單任務(wù)對(duì)用戶輸入要求很低。用戶打開(kāi)實(shí)用型應(yīng)用程序是為了快速查看信息摘要或是在少數(shù)對(duì)象上執(zhí)行簡(jiǎn)單任務(wù)。天氣程序就是一個(gè)實(shí)用型應(yīng)用程序的典型例子，它在一個(gè)易讀的摘要中顯示了重點(diǎn)明確的信息。引自于蘋(píng)果HIG（iOSHumanerface Guidelines，iOS人機(jī)界面設(shè)計(jì)指導(dǎo)手冊(cè)）圖 9-17 所示是 iPad 中平鋪導(dǎo)航的iBooks應(yīng)用，它是基于導(dǎo)航實(shí)現(xiàn)的平鋪

18、導(dǎo)航模式，用戶可以像翻書(shū)一樣在頁(yè)面之間導(dǎo)航，而且在翻動(dòng)書(shū)頁(yè)時(shí)還可以看到下一頁(yè)或背面的內(nèi)容，完全模擬真書(shū)的效果。圖 9-18 iBooks 應(yīng)用（橫屏雙頁(yè)顯示）導(dǎo)航在iPad 和橫屏情況下是單頁(yè)顯示。圖 9-18 所示是iBooks 應(yīng)用豎屏?xí)r的單頁(yè)顯示情況。圖 9-19 iBooks 應(yīng)用（豎屏單頁(yè)顯示）為了進(jìn)一步掌握平鋪導(dǎo)航，先從一個(gè)需求開(kāi)始介紹平鋪導(dǎo)航。朋友是一名畫(huà)家，他果想開(kāi)發(fā)一個(gè)基于從左往右分別是由畫(huà)家關(guān)系而是扁平關(guān)系。的“畫(huà)廊”應(yīng)用，目前只有收錄 3 幅圣母像，如圖 9-19 所示，創(chuàng)作的。這 3 幅圣母像之間沒(méi)有層次、波提切里和圖 9-20 3 幅世界名畫(huà)9.3.2使用資源目錄管理

19、在具體實(shí)現(xiàn)平鋪導(dǎo)航之前，首先，在 Xcode 中選擇 Single View Application 模板創(chuàng)建一個(gè)名為 FlatNavigation 的工程。然后，為案例添加需要的要添加到工程中，由于不同 iOS 設(shè)備的屏幕大小不同，。但如何能夠使不同的 iOS 設(shè)備在運(yùn)行時(shí)候需要為同一幅名畫(huà)準(zhǔn)備多種不同規(guī)格的呢？開(kāi)發(fā)可以使用資源目錄（Asset catalog）管理選擇不同規(guī)格的。資源目錄可以管理應(yīng)用、啟動(dòng)界面和圖標(biāo)等，可以管理工程中用到的其他。使用 Xcode 創(chuàng)建一個(gè)工程，會(huì)發(fā)現(xiàn)工程中發(fā)現(xiàn)一個(gè) Assets.xcassets 目錄，打開(kāi)Assets.xcassets 目錄會(huì)看如圖 9-2

20、0 界面，默認(rèn)有 AppIcon 項(xiàng)目，打開(kāi) AppIcon 右邊會(huì)有一些框框，這些框框下面有一些說(shuō)明。這里的 AppIcon 是為添加應(yīng)用圖標(biāo)的。圖 9-21 使用 Xcode 資源目錄本節(jié)介紹如何使用資源目錄（Asset catalog）管理一般情況下使用的。資源目錄能夠?qū)⒉煌?guī)格的適配到不同分辨率的設(shè)備上。這個(gè)“畫(huà)廊”應(yīng)用的需要，考慮設(shè)備的屏幕適配，目前設(shè)備的屏幕尺寸主要有：4 英寸、4.7 英寸和 5.5 英寸，4英寸和 4.7 英寸都是 Retina 顯示屏，5.5 英寸 Retina HD顯示屏，那么美術(shù)設(shè)計(jì)師只需準(zhǔn)備兩套不同規(guī)格的即可。然后打開(kāi) Assets.xcassets 在

21、右邊的空白區(qū)域，單擊+按鈕彈出如圖 9-21 所示的菜單，選擇 New Image Set 菜單項(xiàng)目，創(chuàng)建的默認(rèn)9-22 所示。集名為 Image，雙擊修改為 Image1，如圖圖 9-22 添加集圖 9-23 添加集在 Finder 中打開(kāi)中，其中 3x 是 Retina所在的文件夾，如圖 9-24 所示，拖曳 1.jpg 文件到對(duì)應(yīng)的集HD顯示屏所需，2x 是 Retina 顯示屏所需，1x 是普通顯示屏所需，本例只考慮 2x 和 3x 情況。圖 9-24 為集添加依次創(chuàng)建 Image2 和 Image32.jpg 和 3.jpg 到對(duì)應(yīng)的 Image2 和集，然后拖曳Image3集中。9

22、.3.3屏幕滾動(dòng)視圖重要的屬性由于分屏導(dǎo)航實(shí)現(xiàn)的平鋪導(dǎo)航主要使用的視圖是分屏控件（PageControl）和屏幕滾動(dòng)視圖（ScrollView），而屏幕滾動(dòng)視圖的屬性有很多，因此在介紹具體實(shí)現(xiàn)之前，先介紹一下屏幕滾動(dòng)視圖中重要的屬性。這些屬性：contentSize、contentInset 和 contentOffset，這些屬性最好通過(guò)代碼編程設(shè)置。1. contentSize屬性contentSize 屬性表示屏幕滾動(dòng)視圖中內(nèi)容視圖（Content View）的大小，它返回 CGSize結(jié)構(gòu)體類型，該結(jié)構(gòu)體包含 width 和 height 兩個(gè)成員。內(nèi)容視圖是圖 9-25 中虛線區(qū)域部

23、分。屏幕滾動(dòng)視圖大小和位置是 frame 屬性指定的，如圖 9-25 深灰色部分。正是因?yàn)閮?nèi)容視圖超出了屏幕滾動(dòng)視圖大小，才會(huì)有滾動(dòng)屏幕的必要。圖 9-25 contentSize 屬性2. contentInset屬性contentInset 屬性用于在屏幕滾動(dòng)視圖中的內(nèi)容視圖周?chē)砑舆吙?，圖 9-26 所示的深灰色部分。這往往是為了留出空白以放置、欄或?qū)Ш綑诘取D 9-26 contentInset 屬性contentInset 屬性有 4 個(gè)分量，分別是 T距離、底邊距離、左邊距離和右邊距離。ottom、Left 和 Right，分別代表頂邊3. contentOffset 屬性cont

24、entOffset屬性是內(nèi)容視圖坐標(biāo)原點(diǎn)與屏幕滾動(dòng)視圖坐標(biāo)原點(diǎn)的偏移量，返回CGPo結(jié)構(gòu)體類型，這個(gè)結(jié)構(gòu)體類型包含 x 和 y 兩個(gè)成員。如圖 9-27 所示，內(nèi)容視圖沿 x 軸負(fù)偏移或者說(shuō)屏幕滾動(dòng)視圖沿 x偏移，y 軸方向沒(méi)有偏移。偏移量可以通過(guò)屏幕滾動(dòng)視圖方法或?qū)傩栽O(shè)定。設(shè)定屏幕滾動(dòng)視圖沿 x點(diǎn)的代碼如下：self.scrollView.setContentOffset(CGPo (x: 110, y: 0), animated: true)或者self.scrollView.contentOffset = CGPo (x: 110, y: 0)偏移 110圖 9-27 內(nèi)容視圖沿 x 軸

25、偏移量如果使用 self.scrollView.setContentOffset(CGPo定，在偏移的同時(shí)可以出現(xiàn)動(dòng)畫(huà)效果。(x: 110, y: 0), animated:true)方法設(shè)9.3.4分屏導(dǎo)航實(shí)現(xiàn)分屏導(dǎo)航實(shí)現(xiàn)的平鋪導(dǎo)航主要使用的視圖是分屏控件（PageControl）和屏幕滾動(dòng)視圖（ScrollView）。其中，分屏控件是 iOS 標(biāo)準(zhǔn)控件，一般是在屏幕下方的就是分屏控件，的小點(diǎn)是當(dāng)前屏幕的位置。分屏導(dǎo)航勢(shì)有兩種，一種是單擊小點(diǎn)的左邊（上邊）或右邊（下邊）實(shí)現(xiàn)翻屏，另一種是用手在屏幕上滑動(dòng)實(shí)現(xiàn)翻屏。屏幕的總數(shù)應(yīng)該限制在 20 個(gè)以內(nèi)，超過(guò) 20 個(gè)小點(diǎn)的分屏控件就會(huì)溢出。事實(shí)上

26、，當(dāng)一個(gè)應(yīng)用超過(guò) 10 屏?xí)r，使用基于分屏控件導(dǎo)航的平鋪導(dǎo)航模式已經(jīng)不是很方便了。由于使用故事板或 Xib 文件設(shè)計(jì)有屏幕滾動(dòng)視圖的應(yīng)用是比較麻煩的時(shí)候，還要考慮到屏幕適配等問(wèn)題，所以本例中采用純代碼實(shí)現(xiàn)屏幕滾動(dòng)視圖和分屏控件地創(chuàng)建和設(shè)置。下面看看 ViewController.swift 文件中相關(guān)代碼。1.初始化屏幕滾動(dòng)視圖class ViewController: UIViewController , UIScrollViewDelegate var scrollView: UIScrollView! var pageControl: UIPageControl!var viewHeig

27、ht: CGFloat = 0.0 var viewWidth: CGFloat = 0.0override func viewDidLoad() super.viewDidLoad()viewHeight = self.view frame.size.height viewWidth = self.view frame.size.width/創(chuàng)建屏幕滾動(dòng)視圖self.scrollView = UIScrollView(frame: self.view frame) self.scrollView.contentSize = CGSize(width: self.view frame.size

28、.width * 3,height: self.scrollView frame.size height) self.scrollView.isPagingEnabled= trueself.scrollView.delegate = selflet image1 = UIImage(named: Image1)var imageView1 = UIImageView(image: image1)imageView1 frame = CGRect(x: 0.0, y: 0.0, width: viewWidth, height: viewHeight)self.scrollView.addSu

29、bview(imageView1)let image2 = UIImage(named: Image2)var imageView2 = UIImageView(image: image2) imageView2 frame= CGRect(x: viewWidth, y: 0.0, width: viewWidth, height: viewHeight) self.scrollView.addSubview(imageView2)let image3 = UIImage(named: Image3)var imageView3 = UIImageView(image: image3)ima

30、geView3 frame= CGRect(x: viewWidth * 2, y: 0.0, width: viewWidth, height: viewHeight) self.scrollView.addSubview(imageView3)self.view.addSubview(self.scrollView). .ViewController 類， 要求實(shí)現(xiàn)屏幕滾動(dòng)視圖委托協(xié)議上述代碼第 行是UIScrollViewDelegate。代碼第行是創(chuàng)建屏幕滾動(dòng)視圖對(duì)象，本例采用具體 frame 參數(shù)的構(gòu)造器， self.view.frame 表示屏幕滾動(dòng)視圖大?。╢rame 屬性）與當(dāng)

31、前視圖窗口大小一樣。另外，屏幕滾動(dòng)視圖還要有個(gè)重要的屬性內(nèi)容視圖大?。╟ontentSize），內(nèi)容視圖包含了屏幕滾動(dòng)視圖內(nèi)所容納的全部視圖，代碼第行是設(shè)置內(nèi)容視圖大小。代碼第行是設(shè)置屏幕滾動(dòng)視圖是否開(kāi)啟翻頁(yè)功能，這個(gè)功能開(kāi)啟后，每次滾動(dòng)每次滑動(dòng)的時(shí)候翻一屏。第行代碼是設(shè)置當(dāng)前視圖控制器 self 為屏幕滾動(dòng)視圖的委托對(duì)象。集名創(chuàng)建一個(gè) UIImage代碼第行通過(guò)資源目錄中對(duì)象，然后通過(guò)第行代碼創(chuàng)建 UIImageView視圖對(duì)象 imageView1，第行代碼是設(shè)置視圖位置和大小，需要注意的是后面創(chuàng)建的視圖對(duì)象 imageView2 和imageView3 的位置區(qū)別。記通過(guò)第行代碼的 ad

32、dSubview 方法將最后視圖添加到屏幕滾動(dòng)視圖中，還有屏幕滾動(dòng)視圖也需要通過(guò)第行代碼添加到當(dāng)前視圖中。2.初始化分屏控件初始化分屏控件也是在 viewDidLoad 方法完成的。代碼如下：/創(chuàng)建PageControlvar pageControlHeight: CGFloat = 38.0 var pageControlWidth: CGFloat = 120.0let pageControlFrame = CGRect(x: (viewWidth - pageControlWidth) / 2,y: (viewHeight - pageControlHeight),width: page

33、ControlWidth, height: pageControlHeight)self.pageControl = UIPageControl(frame: pageControlFrame) self.pageControl.backgroundColor = UIColor.black self.pageControl.alpha = 0.5self.pageControl.numberOfPages = 3self.pageControl.currentPage = 0self.pageControl.add(self, action: #selector(changePage(_:)

34、,for: UIControlEvents.valueChanged)self.view.addSubview(self.pageControl)上述代碼第行設(shè)置分屏控件的 frame 屬性需要的 CGSize 數(shù)據(jù)，從其中的數(shù)據(jù)可見(jiàn)控件是在屏幕下方居中對(duì)齊。代碼第行是創(chuàng)建分屏控件對(duì)象，其參數(shù) frame 是從代碼第pageControlFrame行的常量而來(lái)。代碼第行是設(shè)置控件的背景顏色為黑色，由于背景顏色會(huì)遮擋，可以設(shè)置alpha，代碼第行是設(shè)置為 0.5。代碼第行設(shè)置總屏數(shù)為 3，代碼第行是設(shè)置當(dāng)前屏為 0。代碼第行是設(shè)置分屏控件的動(dòng)作事件，即將它的默認(rèn)事件（ValueChanged）與

35、事件處理方法 changePage:關(guān)聯(lián)起來(lái)。代碼第行是將分屏控件添加到當(dāng)前視圖中。3.實(shí)現(xiàn)屏幕滾動(dòng)視圖委托協(xié)議事實(shí)上經(jīng)過(guò)初始化后，滑動(dòng)屏幕已經(jīng)可以滾動(dòng)了，但是會(huì)發(fā)現(xiàn)指示分屏控件當(dāng)前屏的小亮點(diǎn)沒(méi)有跟著一起變化。這需要實(shí)現(xiàn)屏幕滾動(dòng)視圖委托協(xié)議，代碼如下：/實(shí)現(xiàn)UIScrollViewDelegate協(xié)議func scrollViewDidScroll(_ scrollView: UIScrollView) var offset = scrollView.contentOffsetself.pageControl.currentPage =(offset x) /(viewWidth)其中代碼第行

36、是獲得屏幕滾動(dòng)視圖的偏移量，然后使用通過(guò)代碼第行設(shè)置分屏控件當(dāng)前屏 currentPage 屬性，這個(gè)當(dāng)前屏是使用即偏移量除以視圖的寬度，然后取整。(offset.x) /(viewWidth)公式計(jì)算的，4.分屏控件事件當(dāng)單擊分屏控件的兩端時(shí)會(huì)觸發(fā)它的默認(rèn)事件（ValueChanged），然后會(huì)調(diào)用與該事件關(guān)聯(lián)的 changePage:方法，其代碼如下：/響應(yīng)PageControl默認(rèn)事件處理func changePage(_ sender: AnyObject) UIView.animateWithDuration(0.3, animations : var whichPage = sel

37、f.pageControl.currentPageself.scrollView.contentOffset = CGPo (x: self.viewWidth * CGFloat(whichPage), y: 0)在上述代碼中根據(jù)分屏控件的當(dāng)前屏屬性（currentPage）重新調(diào)整了屏幕滾動(dòng)視圖的偏 移 量 ， 而 且 為 了 使 屏 幕 變 化 產(chǎn) 生 動(dòng) 畫(huà) 效 果 ， 使 用 了UIView.animateWithDuration(0.3,animations : )代碼，重新調(diào)整了控件的偏移量。9.4導(dǎo)航導(dǎo)航模式是非常重要的導(dǎo)航模式。使用于屏幕下方，占有 49 點(diǎn)的屏幕空間，有時(shí)可

38、以隱欄時(shí)，有一定的指導(dǎo)原則：欄位；為了單擊方便，欄中的標(biāo)過(guò) 5 個(gè)，如果超過(guò) 5 個(gè)，則最后一個(gè)顯示為“的列表，如圖 9-28 所示。簽”，單擊“”會(huì)出現(xiàn)圖 9-28 “”9.4.1導(dǎo)航實(shí)例對(duì)于中國(guó)東北三省的城市信息數(shù)據(jù)，如果把他們分成三組，你會(huì)怎么分呢？首先，考慮的是按照行政區(qū)劃。第一組：哈爾濱、齊齊哈爾、雞西、鶴崗、雙鴨山、大慶、伊春、佳木斯、七臺(tái)河、牡丹江、黑河、綏化，這12個(gè)城市歸黑龍江省管轄。第二組：長(zhǎng)春、吉林、四平、遼源、通化、白山、松原、白城，這8個(gè)城市管轄。第三組：沈陽(yáng)、大連、鞍山、撫順、本溪、丹東、錦州、營(yíng)口、阜新、遼陽(yáng)、盤(pán)錦、鐵嶺、朝陽(yáng)、葫蘆島，這14個(gè)城市歸遼寧省管轄。小

39、組的數(shù)據(jù)有一定的關(guān)聯(lián)關(guān)系，他們同屬于一個(gè)行政管轄區(qū)域，小組之間互相獨(dú)立，這就是導(dǎo)航模式適用的情況。按照這樣的分組方式在上擺放這些城市，仍然會(huì)分成 3 個(gè)屏幕，如圖 9-29 所示，名就是省的名字，當(dāng)選中某個(gè)省的時(shí)，屏幕會(huì)顯示出該省的城市信息，而且是顯示的。圖 9-29導(dǎo)航模式在開(kāi)發(fā)具體應(yīng)用的時(shí)候，導(dǎo)航模式的各個(gè)塊之間相對(duì)獨(dú)立。分別代表一個(gè)功能模塊，各功能模9.4.2導(dǎo)航實(shí)現(xiàn)在 Xcode 中使用 Tabbed Application 工程模板，可以創(chuàng)建導(dǎo)航模式的應(yīng)用，模板采用故事板技術(shù)來(lái)實(shí)現(xiàn)何代碼。導(dǎo)航模式。故事板技術(shù)實(shí)現(xiàn)導(dǎo)航很簡(jiǎn)單，不需要編寫(xiě)任1創(chuàng)建Tabbed Application工程使

40、用 Tabbed Application 模板創(chuàng)建一個(gè)名為 TabNavigation 的工程。創(chuàng)建完成之后，打開(kāi)主故事板文件，如圖 9-30 所示。圖 9-30 使用故事板創(chuàng)建 TabNavigation 工程2添加場(chǎng)景如圖 9-31 所示的 3 個(gè)場(chǎng)景（Scene）會(huì)由一些線連接起來(lái)，這些線就是 Segue。故事板開(kāi)始的一端是 Tab Bar Controller Scene，它是根視圖控制器。圖中有兩個(gè) Segue，用來(lái)描述 Tab Bar Controller Scene 與Scene 和 Second Scene 之間的關(guān)系。需要先修改兩個(gè)現(xiàn)有的場(chǎng)景，然后再添加一個(gè)場(chǎng)景，才能滿足業(yè)務(wù)

41、需求。修改兩個(gè)現(xiàn)有的場(chǎng)景很簡(jiǎn)單，直接修改視圖控制器名就可以了，然后場(chǎng)景就會(huì)跟著變化。添加一個(gè)場(chǎng)景到設(shè)計(jì)界面中，然后從對(duì)象庫(kù)中拖曳一個(gè) View Controller 到設(shè)計(jì)界面中，如圖 9-31所示。圖 9-31 添加一個(gè)場(chǎng)景到設(shè)計(jì)界面此外，還需要連線添加的場(chǎng)景和 Tab Bar Controller Scene，具體操作是：按住 control鍵從 Tab Bar Controller 拖曳鼠標(biāo)到 View Controller，鼠標(biāo)，彈出如圖 9-32 所示框，從彈出菜單中選擇 view controllers 項(xiàng)，此時(shí)連線就做好了。圖 9-32 連線兩個(gè)場(chǎng)景在代碼部分只需要 3LiaoV

42、iewController ， 而 目個(gè)視圖控制器 HeiViewController 、 JiViewController 和ViewController和前 只 有 兩 個(gè) 視 圖 控 制 器SecondViewController，可以把這兩個(gè)改名，然后再添加一個(gè)。改名布局麻煩，ViewController 和 SecondViewController，重寫(xiě)創(chuàng)建 3 個(gè)視圖控制器。刪除FileNewFileiOSCocoa創(chuàng)建過(guò)程是在菜單欄中選擇，在文件模板中選擇Touch Class，此時(shí)將彈出“新建文件”框，在 Class 項(xiàng)目中輸入 HeiViewController，從 Subc

43、lass of 下拉列表中選擇 UIViewController，不選中 Alse create XIB file 復(fù)選框。再回到erface Builder 中，選中 View Controller Scene，打開(kāi)其標(biāo)識(shí)檢查器，將 Custom Class中的 Class 設(shè)為 HeiViewController。參考 HeiViewController 設(shè)置其他兩個(gè)視圖控制器，具體步驟不再贅述。由于場(chǎng)景列表中名稱還是Scene 和 Second Scene，為了便于管理可以給他們改一個(gè)有意義的名字，選擇 Second Scene，如圖 9-33 所示，打開(kāi)屬性檢查器，然后在 View C

44、ontroller 下Title 中輸入想要的名稱。圖 9-33 修改場(chǎng)景的名稱3修改欄項(xiàng)目中的圖標(biāo)和文本添加圖標(biāo)（本章代碼的 tabicons 文件夾）到工程中，修改欄項(xiàng)目中的圖標(biāo)和文本，具體操作方法為：選擇場(chǎng)景中的 Hei SceneHei，打開(kāi)其屬性檢查器，如圖 9-34所示，將 Bar Item 下的Title 設(shè)為“黑龍江”，從 Image 下拉列表中選擇 hei.png。按照同樣的辦法修改其他兩個(gè)視圖控制器。參考 Hei Scene 設(shè)置其他兩個(gè)場(chǎng)景。圖 9-34 修改欄項(xiàng)目中圖標(biāo)和文本不同的iOS設(shè)備圖標(biāo)的規(guī)格不同，他們添加到工程中可以通過(guò)資源目錄方式（見(jiàn)提示9.3.2節(jié)），也可

45、以采用特殊命名直接添加到工程中，他們名規(guī)范如圖9-35所示，其中沒(méi)有后綴的是普通顯示屏需要的圖標(biāo)，2x后綴的是為Retina顯示屏（不包括Plus）準(zhǔn)備的圖標(biāo)，3x后綴的是為Retina HD顯示屏準(zhǔn)備的圖標(biāo)。圖 9-35圖標(biāo)規(guī)格與命名規(guī)范3 個(gè)視圖的內(nèi)容可以參考圖 9-35 實(shí)現(xiàn)，拖曳一些 Label 控件，擺放好位置，修改城市名字，然后再修改視圖背景顏色，具體過(guò)程不再贅述。此時(shí)就實(shí)現(xiàn)標(biāo)了簽導(dǎo)航模式的一個(gè)實(shí)例，整個(gè)過(guò)程中沒(méi)有編寫(xiě)一行代碼。9.5 樹(shù)形結(jié)構(gòu)導(dǎo)航樹(shù)形結(jié) 構(gòu)導(dǎo)航 模式也是 非常重 要的導(dǎo)航 模式，它 將導(dǎo)航 視圖控制 器（UINavigationController）與表視圖結(jié)合使

46、用，主要用于構(gòu)建有從屬關(guān)系的導(dǎo)航。這種導(dǎo)航模式采用分層組織信息的方式，可以幫助構(gòu)建 iOS 效率型應(yīng)用程序。提示 效率型應(yīng)用程序具有組織和操作具體信息的功能，通常用于完成比較重要的任務(wù)。效率型應(yīng)用程序通常分層組織信息，相冊(cè)應(yīng)用是其典型例子。引自于蘋(píng)果HIG（iOSHumanerface Guidelines，iOS人機(jī)界面設(shè)計(jì)指導(dǎo)手冊(cè)）9.5.1樹(shù)形結(jié)構(gòu)導(dǎo)航實(shí)例同樣是按照行政區(qū)劃來(lái)展示東北三省的城市信息。第一組：哈爾濱、齊齊哈爾、雞西、鶴崗、雙鴨山、大慶、伊春、佳木斯、七臺(tái)河、牡丹江、黑河、綏化，12個(gè)城市為黑龍江省管轄；第二組：長(zhǎng)春、吉林、四平、遼源、通化、白山、松原、白城，8個(gè)城市為吉管轄

47、；第三組：沈陽(yáng)、大連、鞍山、撫順、本溪、丹東、錦州、營(yíng)口、阜新、遼陽(yáng)、盤(pán)錦、鐵嶺、朝陽(yáng)、葫蘆島，14個(gè)城市為遼寧省管轄。對(duì)于每一個(gè)城市，如果還想看到更加詳細(xì)的信息，例如長(zhǎng)春市在百科上的信息網(wǎng)址 http/view/2172.htm，這種情況下吉長(zhǎng)春就了一種從屬關(guān)系，是一種層次模型，此時(shí)就可以使用樹(shù)形導(dǎo)航模式。如果按照這樣的分組在上展示這些城市信息，需要使用三級(jí)視圖，如圖 9-36 所示。圖 9-36 樹(shù)形導(dǎo)航模式自帶的郵件應(yīng)用如圖 9-37 所示，它采用的就是樹(shù)形結(jié)構(gòu)的導(dǎo)航模式，所有界面的頂部都有一個(gè)導(dǎo)航欄。第 1 個(gè)界面是樹(shù)形結(jié)構(gòu)中的“樹(shù)根”，稱為“根視圖”；第 2個(gè)界面是二級(jí)視圖，它是“樹(shù)

48、干”；第 3 個(gè)界面是三級(jí)視圖，是“樹(shù)葉”?！皹?shù)根”和“樹(shù)干”采用表視圖，因?yàn)楸硪晥D在分層組織信息方面的優(yōu)勢(shì)尤為突出。從理論上來(lái)講，“樹(shù)干”還可以有多級(jí)，但是注意不要太多，“樹(shù)葉”一般是一個(gè)普通的視圖，它能夠完成具體展示的功能。圖 9-37自帶的郵件應(yīng)用可以為“根視圖”的導(dǎo)航欄添加左右按鈕，但是二級(jí)和三級(jí)視圖的左按鈕是由導(dǎo)航控散在的“面包屑”1，開(kāi)發(fā)制器自己添加的，它是與沒(méi)利自己定義這個(gè)按鈕，否則用戶就會(huì)迷失在應(yīng)用之中。樹(shù)形結(jié)構(gòu)導(dǎo)航模式的缺點(diǎn)是怎樣進(jìn)來(lái)，就要怎樣原路返回，這一點(diǎn)與導(dǎo)航模式不同，后者可以很快在各個(gè)模塊之間切換。9.5.2樹(shù)形結(jié)構(gòu)導(dǎo)航實(shí)現(xiàn)可以 Xcode 中的 Master-Det

49、ail Application 工程模板創(chuàng)建樹(shù)形結(jié)構(gòu)導(dǎo)航的應(yīng)用，但是這方式無(wú)法了解 的細(xì)節(jié)問(wèn)題，因此本書(shū)采用 Single View Application 工程模板實(shí)現(xiàn)。使用 Single View Application 模板并利用故事板技術(shù)創(chuàng)建一個(gè)名為T(mén)reeNavigation 的工程。1ViewController視圖控制器更換為導(dǎo)航控制器由于使用的視圖控制器是導(dǎo)航控制器（UINavigationController），需要打開(kāi)故事板刪除ViewController 視圖控制器，并從對(duì)象庫(kù)中拖曳一個(gè) Navigation Controller 到設(shè)計(jì)界面，如圖 9-示。還需要設(shè)置導(dǎo)航

50、控制器為初始視圖控制器，如圖 9-39 所示，選擇場(chǎng)景中的 Navigation Controller 然后選擇右邊的屬性檢查器，選中 View Controlleris Initial View Controller 復(fù)選框。1引自于兄弟所收錄的德國(guó)童話糖果屋（德語(yǔ)：Hnse萊特。d Gre），又譯與格圖 9-38 添加導(dǎo)航控制器圖 9-39 設(shè)置集合視圖控制為初始視圖控制器2設(shè)置導(dǎo)航控制器的根視圖控制器從對(duì)象庫(kù)中直接拖曳導(dǎo)航控制器的一個(gè)好處是同時(shí)提供一個(gè)根視圖控制器，如圖 9-40所示中的 Root View Controller 就是根視圖控制器，它本身是一個(gè)表格控制器，對(duì)應(yīng)的程View

51、Controller.swift序代碼還沒(méi)有， 可以把作為根視圖控制器， 所有需要修改ViewController 的繼承的父類為 UITableViewController，代碼如下：class ViewController: UITableViewController 修改 ViewController 完成后，需要在故事板中選擇Root View Controller，打開(kāi)標(biāo)識(shí)檢查器按鈕，選擇Custom ClassClass 下拉列表中的ViewController 類。此外，還需要設(shè)置單元格屬性，選擇 Root View Controller Scene 中的 Table View

52、Cell，打開(kāi)其屬性檢查器，將 Identifier 屬性設(shè)置為 CellIdentifier，將 AcIndicator，如圖 9-41 所示。sory 設(shè)置為 Disclosure圖 9-40 導(dǎo)航控制器和根視圖控制器圖 9-41 設(shè)置單元格屬性3創(chuàng)建二級(jí)視圖先新建一個(gè)二級(jí)視圖控制器 CitiesViewController ， 具體操作方法是： 選擇菜單 FileNewFile，在文件模板中選擇 iOSCocoa Touch Class，此時(shí)將彈出“新建文件”框，在 Class 項(xiàng)目中輸入 CitiesViewController，從 Subclass of 下拉列表中選擇UITable

53、ViewController，不選中 Alse create XIB file 復(fù)選框。創(chuàng)建完成二級(jí)視圖控制器 CitiesViewController，回到設(shè)計(jì)界面從對(duì)象庫(kù)中拖曳一個(gè)Table View Controller 對(duì)象到erface Builder 設(shè)計(jì)界面，作為二級(jí)視圖控制器。然后按住control 鍵，如圖 9-42 所示，從上一個(gè) Root View Controller 的單元格中拖動(dòng)鼠標(biāo)到當(dāng)前添加的Table View ControllerSegue 中的 Show。鼠標(biāo)后，彈出如圖9-43 所示的Segue框，選擇Selection圖 9-42 兩個(gè)視圖控制器的連線圖

54、 9-43 Segue 選擇框選中連線中間的 Segue ，打開(kāi)其屬性檢查器，然后在 Identifier 屬性中輸入ShowSelectedProvince，如圖 9-44 所示。這個(gè) Identifier 屬性將在代碼中用于查詢 Segue對(duì)象。圖 9-44 設(shè)置 Segue 的 Identifier 屬性選擇 Table View Controller，打開(kāi)其標(biāo)識(shí)檢查器，在 Custom Class 的 Class 下拉列表中選擇 CitiesViewController。此外，還需要設(shè)置單元格屬性，選擇Cities View Controller Scene 中的Table View

55、Cell，打開(kāi)其屬性檢查器，將 Identifier 屬性設(shè)置為 CellIdentifier，將 AcDisclosure，如圖 9-45 所示。sory 設(shè)置為 Detail圖 9-45 設(shè)置單元格屬性4. 創(chuàng)建三級(jí)視圖新建三級(jí)視圖控制器 DetailViewController ， 具體操作方法是： 選擇菜單 FileNewFile，在文件模板中選擇 iOSCocoa Touch Class，此時(shí)將彈出“新建文件”框，在 Class 項(xiàng)目中輸入 DetailViewController，從 Subclass of 下拉列表中選擇UIViewController，不選中 Alse crea

56、te XIB file 復(fù)選框。然后回到設(shè)計(jì)界面，從對(duì)象庫(kù)中拖曳一個(gè) View Controller 對(duì)象到erface Builder 設(shè)計(jì)界面，作為三級(jí)視圖控制器。然后按住 control 鍵將鼠標(biāo)從上一個(gè) CitiesViewController的單元格拖動(dòng)到當(dāng)前添加的 View Controller，此時(shí)從彈出菜單中選擇 Selection Segue 中的 Show。選中連線中間的 Segue，打開(kāi)其屬性檢查器，在 Identifier 屬性中輸入 ShowSelectedCity。ViewController，打開(kāi)其標(biāo)識(shí)檢查器， 單擊CustomClassClass，將其設(shè)置為選擇

57、DetailViewController。最后，拖曳一個(gè) WebView 控件到 View 上面，并為 WebView 連接輸出口。到此， 煩瑣的設(shè)計(jì)工作就完成了， 下面看一下代碼部分。 根視圖控制器 ViewController.swift 的相關(guān)代碼如下：class ViewController: UITableViewController /保存從provincities.plist取出數(shù)據(jù)，字典結(jié)構(gòu)var dictData: String : Any!/保存dictData的所有鍵集合，數(shù)組結(jié)構(gòu) var listData: String!override func viewDidLoa

58、d() super.viewDidLoad()let plistPath = Bundle main.path(forResource: provin let dict = NSDictionary(contentsOfFile: plistPath!)cities, ofType: plist)self.dictData = di! String : Anyself.listData = dict?.allKeys as! Stringself.title = 省份信息/UITableViewDataSource 協(xié)議方法override func tableView( tableView:

59、 UITableView, numberOfRowsInSection section:-)return self.listDount/實(shí)現(xiàn)表視圖數(shù)據(jù)源方法override func tableView( tableView: UITableView, cellForRowAt indexPath: IndexPath) - UITableViewCell let cellIdentifier = CellIdentifierlet cell:UITableViewCell! = tableView.dequeueReusableCell(withIdentifier: cellIdentif

60、ier, for:indexPath)let row = indexPath.row cell.textLabel?.text = self.listDatarowreturn cell/選擇表視圖行時(shí)觸發(fā)override func prepare(for segue: UIStoryboardSegue, sender: Any?) if (segue.identifier = ShowSelectedProvince) let citiesViewController = segue.destination as! CitiesViewController let indexPath =