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

第9導(dǎo)航和3種導(dǎo)航模式的綜合用法。這些知識點(diǎn)基本囊括了開發(fā)工作中的大部分導(dǎo)航需求，希望大家能有所收獲。9.1導(dǎo)航概述導(dǎo)航指戶使用應(yīng)用，沒有有效的導(dǎo)航，用戶就會迷失方向。所適從，甚至手足無措。開發(fā)的應(yīng)用是否具備這些“標(biāo)牌”和“路標(biāo)”呢？完美的導(dǎo)航能夠清晰地指戶完成任務(wù)。導(dǎo)航是應(yīng)用軟件開發(fā)中極為重要的部分，想做好也是存在一定難度的。從內(nèi)容組織形式上考慮，應(yīng)于不同的視圖控制器。有3種導(dǎo)航模式，每一種導(dǎo)航模式都對平鋪導(dǎo)航模式：內(nèi)容沒有層次關(guān)系，展示的內(nèi)容都放置在一個(gè)主屏幕上，采用分屏或分頁控制器進(jìn)行導(dǎo)航，可以左右或者上下滑動屏幕查看內(nèi)容。圖9-1展示了中自帶的天氣預(yù)用，它采用分屏進(jìn)行導(dǎo)航。第9導(dǎo)航和3種導(dǎo)航模式的綜合用法。這些知識點(diǎn)基本囊括了開發(fā)工作中的大部分導(dǎo)航需求，希望大家能有所收獲。9.1導(dǎo)航概述導(dǎo)航指戶使用應(yīng)用，沒有有效的導(dǎo)航，用戶就會迷失方向。所適從，甚至手足無措。開發(fā)的應(yīng)用是否具備這些“標(biāo)牌”和“路標(biāo)”呢？完美的導(dǎo)航能夠清晰地指戶完成任務(wù)。導(dǎo)航是應(yīng)用軟件開發(fā)中極為重要的部分，想做好也是存在一定難度的。從內(nèi)容組織形式上考慮，應(yīng)于不同的視圖控制器。有3種導(dǎo)航模式，每一種導(dǎo)航模式都對平鋪導(dǎo)航模式：內(nèi)容沒有層次關(guān)系，展示的內(nèi)容都放置在一個(gè)主屏幕上，采用分屏或分頁控制器進(jìn)行導(dǎo)航，可以左右或者上下滑動屏幕查看內(nèi)容。圖9-1展示了中自帶的天氣預(yù)用，它采用分屏進(jìn)行導(dǎo)航。導(dǎo)航模式：內(nèi)容被分成幾個(gè)功能模塊，每個(gè)功能模塊之間沒有什么關(guān)系。通過管理各個(gè)功能模塊，單擊可以切換功能模塊。圖9-2展示了導(dǎo)航模式。中自帶的時(shí)鐘應(yīng)用，它采用的就是9-1平鋪導(dǎo)航模式導(dǎo)航模式樹形結(jié)構(gòu)導(dǎo)航模式：內(nèi)容是有層次的，從上到下細(xì)分或者具有分類包含等關(guān)系，例如黑龍江省包含了哈爾濱，哈爾濱又包含了道里區(qū)、道外區(qū)等。圖9-3展示了中自帶的郵件應(yīng)用，它采用的就是樹形結(jié)構(gòu)導(dǎo)航模式。9-3樹形結(jié)構(gòu)導(dǎo)航模式這3種導(dǎo)航模式基本可以滿足大部分應(yīng)用的導(dǎo)航需求。在實(shí)際應(yīng)用中，有時(shí)會將幾種9.2導(dǎo)航的“死胡同”——模態(tài)窗口9-1平鋪導(dǎo)航模式導(dǎo)航模式樹形結(jié)構(gòu)導(dǎo)航模式：內(nèi)容是有層次的，從上到下細(xì)分或者具有分類包含等關(guān)系，例如黑龍江省包含了哈爾濱，哈爾濱又包含了道里區(qū)、道外區(qū)等。圖9-3展示了中自帶的郵件應(yīng)用，它采用的就是樹形結(jié)構(gòu)導(dǎo)航模式。9-3樹形結(jié)構(gòu)導(dǎo)航模式這3種導(dǎo)航模式基本可以滿足大部分應(yīng)用的導(dǎo)航需求。在實(shí)際應(yīng)用中，有時(shí)會將幾種9.2導(dǎo)航的“死胡同”——模態(tài)窗口的主要任務(wù)是登錄后進(jìn)入主界面，如果用戶沒有，就要先去“”是次要任務(wù)，當(dāng)用戶完成后，會關(guān)閉視圖，回到登錄界面繼續(xù)進(jìn)行主要任務(wù)。9-4模態(tài)視圖示意圖Back鍵返回。9-4模態(tài)視圖示意圖Back鍵返回。個(gè)專門的類，它可以是上面提到的控制器的子類。負(fù)責(zé)主要任務(wù)視圖的控制器稱為“主or類中，主要有如下兩個(gè)方法。遇到這些問題，因?yàn)樵谶@兩個(gè)系統(tǒng)中遇到上述情況pletion:)：呈現(xiàn)模態(tài)視圖。pletion:)：關(guān)閉模態(tài)視圖。present(dismiss(在呈現(xiàn)模態(tài)視圖時(shí)候，有兩個(gè)選擇，一種是在程序代碼中使用UIViewController的present(InterfaceBuilderSegue實(shí)現(xiàn)，這種方式不需要編寫一行代碼。界面。SaveID”回傳給登錄模態(tài)視圖案例ModalViewSample具體步驟如下：1.創(chuàng)建工程模態(tài)視圖案例ModalViewSample具體步驟如下：1.創(chuàng)建工程使用Xcode創(chuàng)建工程ModalViewSample，相關(guān)選項(xiàng)如下：模板采用SingleViewApplication，Devices選擇2.屏幕適配本案例中屏幕適配所有的。ClasswCompact|9-68.2節(jié)。9-6當(dāng)前視圖控制器3.添加導(dǎo)航欄本例的視圖都是帶有導(dǎo)航欄的（95，添加導(dǎo)航欄的方式有兩種：一是從Bar后單擊Editor→Embed→NavigationController9-7所示。導(dǎo)航欄可以帶有標(biāo)題，雙擊導(dǎo)航欄中間部分，然后使導(dǎo)航欄標(biāo)題處于編輯狀態(tài)，并輸入989-7當(dāng)前視圖控制器嵌入到導(dǎo)航控制器9-89-7當(dāng)前視圖控制器嵌入到導(dǎo)航控制器9-8編輯導(dǎo)航欄標(biāo)題4.界面布局Layout約束，添加約束的7.3節(jié)。設(shè)計(jì)登錄界面5.添加接著來設(shè)計(jì)第二個(gè)界面（ 設(shè)計(jì)登錄界面5.添加接著來設(shè)計(jì)第二個(gè)界面（ 視圖控制器到設(shè)計(jì)界面，參考上面的步驟將該視圖控制器也嵌入到導(dǎo)航控制器中。界面導(dǎo)航欄的標(biāo)題為“ ，然后對象庫中拖曳兩個(gè)BarutonItm到修改9-10所示。CancelSaveiOS系統(tǒng)按鈕，設(shè)置左CancelidentifierSave。添加左右導(dǎo)航欄按鈕6.添加兩個(gè)場景的過渡（Segue）到此為止，只是設(shè)計(jì)完成了兩個(gè) 所示。如果想單擊登錄界面中的“”按鈕后，界面跳轉(zhuǎn)到界面，則需要在登錄場景和場景之間control鍵，從“”按鈕拖曳鼠標(biāo)添加左右導(dǎo)航欄按鈕6.添加兩個(gè)場景的過渡（Segue）到此為止，只是設(shè)計(jì)完成了兩個(gè) 所示。如果想單擊登錄界面中的“”按鈕后，界面跳轉(zhuǎn)到界面，則需要在登錄場景和場景之間control鍵，從“”按鈕拖曳鼠標(biāo)到 ，如圖9-12所示。然后松開鼠標(biāo)，此時(shí)會彈出如圖9-13所示的菜單，菜單，PresentModally是模態(tài)類型的過渡。兩個(gè)的視圖控制器從登錄按鈕拖曳鼠標(biāo)到導(dǎo)航控制器9-13選擇PresentModally4個(gè)控制器都連接在一起了，從登錄按鈕拖曳鼠標(biāo)到導(dǎo)航控制器9-13選擇PresentModally4個(gè)控制器都連接在一起了，所示。連接在一起的視圖控制器7.添加視圖控制器類InterfaceBuilder中的操作基本完成，下面就可以編寫代碼了。由于創(chuàng)加一個(gè) 視圖控制器類，具體操作步驟如下。Choosea加一個(gè) 視圖控制器類，具體操作步驟如下。Chooseatemplateforyournewfile:（9-15所示。選擇文件模板(2)Next9-16Class中輸入RegisterViewControllerAlsocreateXIBfile復(fù)選框。輸入類名(3)BuilderInterfaceClass中，選擇視圖控制器，打開其標(biāo)識檢查器，重新選擇為RegisterViewController，這樣故事板中的這個(gè)視圖控制器就與代碼中的件。界面導(dǎo)航欄中的左右按鈕定義動作事如下：classRegisterViewController:UIViewController{中實(shí)現(xiàn)的，具體代碼@IBOutletweakvartxtUsername:輸入類名(3)BuilderInterfaceClass中，選擇視圖控制器，打開其標(biāo)識檢查器，重新選擇為RegisterViewController，這樣故事板中的這個(gè)視圖控制器就與代碼中的件。界面導(dǎo)航欄中的左右按鈕定義動作事如下：classRegisterViewController:UIViewController{中實(shí)現(xiàn)的，具體代碼@IBOutletweakvartxtUsername:UITextField!@IBActionfuncsave(_sender:AnyObject){①self.dismiss(animated:true){()->Voidin單擊Save按鈕，關(guān)閉模態(tài)視圖")②vardataDict=[String:String]()dataDict["username"]=self.txtUsername.text③NotificationCenter.default.post(name:Notification.Name(rawValue:"object:nil,userInfo:dataDict)pletionNotification"),④}}@IBActionfunccancel(_sender:AnyObject){self.dismiss(animated:true,completion:{print("單擊Cancel按鈕，關(guān)閉模態(tài)視圖")})}⑤⑥}SaveCancel按鈕觸發(fā)的可以關(guān)閉模態(tài)視圖。提示代碼第②行采用的是Swift語言尾隨閉包表示形式，尾隨閉包是將dismiss(面。若讀者想深入了解尾隨閉包，可以參考2.14.6節(jié)。第⑥行代碼則沒有采用尾隨閉completion參數(shù)值是一個(gè)閉包。ViewController中添加代碼如下：classViewController:UIViewController{overridefuncviewDidLoad(){super.viewDidLoad()NotificationCenter.default.addObserver(self,selector:#selector(pletion(_:)),name:ViewController中添加代碼如下：classViewController:UIViewController{overridefuncviewDidLoad(){super.viewDidLoad()NotificationCenter.default.addObserver(self,selector:#selector(pletion(_:)),name:Notification.Name(rawValue:"object:nil)pletionNotification"),}overridefuncdidReceiveMemoryWarning(){super.didReceiveMemoryWarning()}funcpletion(_notification:Notification){lettheData=notification.userInfoas![String:String]letusername=theData["username"]!print("username=\(username)")}}首先需要在viewDidLoad中通知，是回調(diào)方法。9.3平鋪導(dǎo)航而哈爾濱市與黑龍江省之間就是從屬的層次關(guān)系。9.3.1 平鋪導(dǎo)航概述9-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)用程序。平鋪導(dǎo)航的天氣應(yīng)用提示平鋪導(dǎo)航的天氣應(yīng)用提示iBooks應(yīng)用（橫屏雙頁顯示）導(dǎo)航在iPad和所示是iBooks應(yīng)用（豎屏單頁顯示）為了進(jìn)一步掌握平鋪導(dǎo)航，先從一個(gè)需求開始介紹平鋪導(dǎo)航。朋友是一名畫家，他果想開發(fā)一個(gè)基于39-19所示，3iBooks應(yīng)用（豎屏單頁顯示）為了進(jìn)一步掌握平鋪導(dǎo)航，先從一個(gè)需求開始介紹平鋪導(dǎo)航。朋友是一名畫家，他果想開發(fā)一個(gè)基于39-19所示，3幅圣母像之間沒有層次關(guān)系而是扁平關(guān)系。3幅世界名畫9.3.2 使用目錄管理圖片ViewApplication模板創(chuàng)建的工程。iOS設(shè)備的屏幕大小不同，iOS設(shè)備在運(yùn)行時(shí)候可以使用 目錄（Assetcatalog）管理圖片。選擇不同規(guī)格的圖片呢？開發(fā)圖片。使用Xcode創(chuàng)建一個(gè)工程，會發(fā)現(xiàn)工程中發(fā)現(xiàn)一個(gè)Assets.xcassets目錄，打開iOS設(shè)備的屏幕大小不同，iOS設(shè)備在運(yùn)行時(shí)候可以使用 目錄（Assetcatalog）管理圖片。選擇不同規(guī)格的圖片呢？開發(fā)圖片。使用Xcode創(chuàng)建一個(gè)工程，會發(fā)現(xiàn)工程中發(fā)現(xiàn)一個(gè)Assets.xcassets目錄，打開AppIcon是為添加應(yīng)用圖標(biāo)的。Xcode目錄本節(jié)介紹如何使用 目錄（Assetcatalog）管理一般情況下使用的圖片。 目錄設(shè)備的屏幕適配，目前主要有：4英寸、4.7英寸和5.5英寸，4Retina顯示屏，5.5RetinaHD需準(zhǔn)備兩套不同規(guī)格的圖片即可。在右邊的空白區(qū)域，單擊+9-21所示的菜單，9-22所示。顯示屏，那么美術(shù)設(shè)計(jì)師只添加圖片集添加圖片集添加圖片集添加圖片集3xRetinaHDRetina顯示屏所需圖片，1x是普2x3x情況。為圖片集添加圖片為圖片集添加圖片2.jpg3.jpgImage2和Image3圖片集中。9.3.3 屏幕滾動視圖重要的屬性由于分屏導(dǎo)航實(shí)現(xiàn)的平鋪導(dǎo)航主要使用的視圖是分屏控件（PageControl）和屏幕滾動視圖（lliew紹一下屏幕滾動視圖中重要的屬性。contentOffset，這些屬性最好通過代碼編程設(shè)置。1.contentSize屬性widthheight9-25中虛線區(qū)域部9-25深灰色部分。正是因?yàn)閮?nèi)容視圖超出了屏幕滾動視圖大小，才會有滾動屏幕的必要。屬性2.contentInset屬性2.contentInset屬性9-26所示的深灰色部分。這往往是為了留出空白以放置工具欄、欄或?qū)Ш綑诘?。contentInset屬性contentInset屬性Right，分別代表頂邊距離、底邊距離、左邊距離和右邊距離。3.contentOffset屬性contentOffset屬性是內(nèi)容視圖坐標(biāo)原點(diǎn)與屏幕滾動視圖坐標(biāo)原點(diǎn)的偏移量，返回xy9-27所示，內(nèi)容視圖x軸正偏移，y軸方向沒有偏移。x110點(diǎn)的代碼如下：self.scrollView.setContentOffset(CGPoint(x:110,y:0),animated:true)或者self.scrollView.contentOffset=CGPoint(x:110,y:0)x軸偏移量定，在偏移的同時(shí)可以出現(xiàn)動畫效果。110,y:0),animated:true)方法設(shè)9.3.4 分屏導(dǎo)航實(shí)現(xiàn)分屏導(dǎo)航實(shí)現(xiàn)的平鋪導(dǎo)航主要使用的視圖是分屏控件（PageControl）和屏幕滾動視圖（llieS9.3.4 分屏導(dǎo)航實(shí)現(xiàn)分屏導(dǎo)航實(shí)現(xiàn)的平鋪導(dǎo)航主要使用的視圖是分屏控件（PageControl）和屏幕滾動視圖（llieS（上邊（下邊2020個(gè)小鋪導(dǎo)航模式已經(jīng)不是很方便了。Xib1.初始化屏幕滾動視圖①classViewController:UIViewController,UIScrollViewDelegate{varscrollView:UIScrollView!varpageControl:UIPageControl!varviewHeight:CGFloat=0.0varviewWidth:CGFloat=0.0overridefuncviewDidLoad(){super.viewDidLoad()viewHeight=self.view.frame.size.heightviewWidth=self.view.frame.size.width//創(chuàng)建屏幕滾動視圖self.scrollView=UIScrollView(frame:self.view.frame)self.scrollView.contentSize=CGSize(width:self.view.frame.size.width*3,self.scrollView.frame.size.height)self.scrollView.isPagingEnabled=trueself.scrollView.delegate=selfletimage1=UIImage(named:"Image1")②③④⑤⑥⑦varimageView1=UIImageView(image:image1)imageView1.frame=CGRect(x:0.0,y:0.0,width:viewWidth,height:viewHeight)⑧⑨self.scrollView.addSubview(imageView1)letimage2=UIImage(named:"Image2")varimageView2=UIImageView(image:image2)imageView2.frame=CGRect(x:viewWidth,y:0.0,width:viewWidth,height:viewHeight)self.scrollView.addSubview(imageView2)letimage3=UIImage(named:"Image3")varimageView3=UIImageView(image:image3)imageView3.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)屏幕滾動視圖委托協(xié)議上述代碼第①行是UIScrollViewDelegate。代碼第②行是創(chuàng)建屏幕滾動視圖對象，本例采用具體frame參數(shù)的構(gòu)造器，self.view.frame表示屏幕滾動視圖大?。╢rame屬性）與當(dāng)前視圖窗口大小一樣。另外，屏幕滾動視圖還要有個(gè)重要的屬性內(nèi)容視圖大?。╟ontntze，內(nèi)容視圖包含了屏幕滾動視圖內(nèi)所容納的全部視圖，代碼第③行是設(shè)置內(nèi)容視圖大小。代碼第④行是設(shè)置屏幕滾動視圖是否開啟翻頁功能，這個(gè)功能開啟后，每次滾動每次滑動的時(shí)候翻一屏。第⑤}ViewController類，要求實(shí)現(xiàn)屏幕滾動視圖委托協(xié)議上述代碼第①行是UIScrollViewDelegate。代碼第②行是創(chuàng)建屏幕滾動視圖對象，本例采用具體frame參數(shù)的構(gòu)造器，self.view.frame表示屏幕滾動視圖大小（frame屬性）與當(dāng)前視圖窗口大小一樣。另外，屏幕滾動視圖還要有個(gè)重要的屬性內(nèi)容視圖大?。╟ontntze，內(nèi)容視圖包含了屏幕滾動視圖內(nèi)所容納的全部視圖，代碼第③行是設(shè)置內(nèi)容視圖大小。代碼第④行是設(shè)置屏幕滾動視圖是否開啟翻頁功能，這個(gè)功能開啟后，每次滾動每次滑動的時(shí)候翻一屏。第⑤self為屏幕滾動視圖的委托對象。UIImage圖片對象，然后通過第⑦行代碼第⑥行通過imageView2和imageView3的位置區(qū)別。方法將圖片視圖添加到屏幕滾動視圖中，還有屏幕滾動視圖也需要通過第⑩行代碼添加到當(dāng)前視圖中。2.初始化分屏控件viewDidLoad方法完成的。代碼如下：//創(chuàng)建PageControlvarpageControlHeight:CGFloat=38.0varpageControlWidth:CGFloat=120.0letpageControlFrame=CGRect(x:(viewWidthControlWidth)/2,y:(viewHeightControlHeight),width:pageControlWidth,height:pageControlHeight)self.pageControl=UIPageControl(frame:pageControlFrame)self.pageControl.backgroundColor=UIColor.blackself.pageControl.alpha=0.5self.pageControl.numberOfPages=3self.pageControl.currentPage=0self.pageControl.addTarget(self,action:#selector(changePage(_:)),for:UIControlEvents.valueChanged)self.view.addSubview(self.pageControl)①②③④⑤⑥⑦⑧frameCGSize數(shù)據(jù)，從其中的數(shù)據(jù)可見frame是從代碼第pageControlFrame①行的景顏色會遮擋圖片，可以設(shè)置alpha，代碼第④行是設(shè)置0.5。代碼第⑤行設(shè)置總屏數(shù)為3，代碼第⑥行是設(shè)置當(dāng)前屏為0。代碼第⑦行是設(shè)置分屏控件的動作changePage:關(guān)聯(lián)起來。代碼第⑧行是將分屏控件添加到當(dāng)前視圖中。3.實(shí)現(xiàn)屏幕滾動視圖委托協(xié)議屏的小亮點(diǎn)沒有跟著一起變化。這需要實(shí)現(xiàn)屏幕滾動視圖委托協(xié)議，代碼如下：//實(shí)現(xiàn)UIScrollViewDelegate協(xié)議funcscrollViewDidScroll(_scrollView:UIScrollView){varoffset=scrollView.contentOffsetself.pageControl.currentPage=Int(offset.x)/Int(viewWidth)}①②其中代碼第①②行設(shè)置分屏控//實(shí)現(xiàn)UIScrollViewDelegate協(xié)議funcscrollViewDidScroll(_scrollView:UIScrollView){varoffset=scrollView.contentOffsetself.pageControl.currentPage=Int(offset.x)/Int(viewWidth)}①②其中代碼第①②行設(shè)置分屏控Int(offset.x)/Int(viewWidth)公式計(jì)算的，即偏移量除以視圖的寬度，然后取整。4.分屏控件當(dāng)單擊分屏控件的兩端時(shí)會觸發(fā)它的默認(rèn) （alueChaged，然后會調(diào)用與該的changePage:方法，其代碼如下：//響應(yīng)PageControl默認(rèn)處理funcchangePage(_sender:AnyObject){UIView.animateWithDuration(0.3,animations:{varwhichPage=self.pageControl.currentPageself.scrollView.contentOffset=CGPoint(x:self.viewWidth*CGFloat(whichPage),y:0)})}偏移量，而且為了使屏幕變化產(chǎn)生動畫效果，使用了UIView.animateWithDuration(0.3,animations代碼，重新調(diào)整了控件的偏移量。9.4導(dǎo)航欄位方便， 欄中的標(biāo)簽不能超過5個(gè)，如果超過5個(gè)，則最后一個(gè)顯示為“9-28所示。”會出現(xiàn)“”9.4.1導(dǎo)航實(shí)例慮的是按照行政區(qū)劃。第一組：哈爾濱、齊齊哈爾、雞西、鶴崗、雙鴨山、大慶、伊春、佳木斯、七臺河、牡丹江、黑河、綏化，這12個(gè)城市歸黑龍江省管轄。第二組：長春、吉林、四平、遼源、通化、白山、松原、白城，這8個(gè)城市歸吉林省管轄。第三組：沈陽、大連、鞍山、撫順、本溪、丹東、錦州、營口、阜新、遼陽、盤錦、鐵嶺、朝陽、葫蘆島，這14個(gè)城市歸遼寧省管轄?！啊?.4.1導(dǎo)航實(shí)例慮的是按照行政區(qū)劃。第一組：哈爾濱、齊齊哈爾、雞西、鶴崗、雙鴨山、大慶、伊春、佳木斯、七臺河、牡丹江、黑河、綏化，這12個(gè)城市歸黑龍江省管轄。第二組：長春、吉林、四平、遼源、通化、白山、松原、白城，這8個(gè)城市歸吉林省管轄。第三組：沈陽、大連、鞍山、撫順、本溪、丹東、錦州、營口、阜新、遼陽、盤錦、鐵嶺、朝陽、葫蘆島，這14個(gè)城市歸遼寧省管轄。立，這就是導(dǎo)航模式適用的情況。按照這樣的分組方式在所示， 名就是省的名字，當(dāng)選中某個(gè)省的時(shí)，屏幕會顯示出該省的城市信息，而且是高亮顯示的。導(dǎo)航模式在開發(fā)具體應(yīng)用的時(shí)候， 導(dǎo)航模式的各個(gè)塊之間相對。9.4.2導(dǎo)航實(shí)現(xiàn)工程模板，可以創(chuàng)建導(dǎo)航模式的應(yīng)用，模板采用故事板技術(shù)來實(shí)現(xiàn)何代碼。導(dǎo)航模式。故事板技術(shù)實(shí)現(xiàn)導(dǎo)航很簡單，不需要編寫任1．創(chuàng)建Tabbed導(dǎo)航模式在開發(fā)具體應(yīng)用的時(shí)候， 導(dǎo)航模式的各個(gè)塊之間相對。9.4.2導(dǎo)航實(shí)現(xiàn)工程模板，可以創(chuàng)建導(dǎo)航模式的應(yīng)用，模板采用故事板技術(shù)來實(shí)現(xiàn)何代碼。導(dǎo)航模式。故事板技術(shù)實(shí)現(xiàn)導(dǎo)航很簡單，不需要編寫任1．創(chuàng)建TabbedApplication工程9-30所示。TabNavigationTabNavigation工程2．添加場景Segue。故事Segue，用來SecondScene之間的關(guān)系。有的場景很簡單，直接修改視圖控制器名就可以了，然后場景就會跟著變化。添加一個(gè)9-31所示。添加一個(gè)場景到設(shè)計(jì)界面Scenecontrol添加一個(gè)場景到設(shè)計(jì)界面Scenecontrol9-32所示viewcontrollers項(xiàng)，此時(shí)連線就做好了。連線兩個(gè)場景在代碼部分只需要3LiaoViewController個(gè)視圖控制器HeiViewControllerJiViewController和前只有兩個(gè)視圖控制器FirstViewController 和SecondViewController，可以把這兩個(gè)改名，然后再添加一個(gè)。改名布局麻煩，推薦刪除3個(gè)視圖控制器。File→New→File…iOS→Cocoa創(chuàng)建過程是在菜單欄中選擇，在文件模板中選擇TouchClass，此時(shí)將彈出“新建文件”SecondViewController，可以把這兩個(gè)改名，然后再添加一個(gè)。改名布局麻煩，推薦刪除3個(gè)視圖控制器。File→New→File…iOS→Cocoa創(chuàng)建過程是在菜單欄中選擇，在文件模板中選擇TouchClass，此時(shí)將彈出“新建文件”AlsecreateXIBfile復(fù)選框。再體步驟不再贅述。SecondScene9-33ViewController下Title中輸入想要的名稱。修改場景的名稱3．修改欄項(xiàng)目中的圖標(biāo)和文本tabicons文件夾欄項(xiàng)目中的圖標(biāo)和文本，HeiScene→Hei→First9-34BarItem下的tlemagehepng。按照同HeiScene設(shè)置其他兩個(gè)場景。修改欄項(xiàng)目中圖標(biāo)和文本不同的iOS設(shè)備圖標(biāo)的規(guī)格不同，他們添加到工程中可以通過目錄方式（見提示Plus修改欄項(xiàng)目中圖標(biāo)和文本不同的iOS設(shè)備圖標(biāo)的規(guī)格不同，他們添加到工程中可以通過目錄方式（見提示Plus）準(zhǔn)備的圖標(biāo)，@3x后綴的是為RetinaHD顯示屏準(zhǔn)備的圖標(biāo)。圖標(biāo)規(guī)格與命名規(guī)范名字，然后再修改視圖背景顏色，具體過程不再贅述。此時(shí)就實(shí)現(xiàn)標(biāo)了簽導(dǎo)航模式的一個(gè)實(shí)例，整個(gè)過程中沒有編寫一行代碼。9.5樹形結(jié)構(gòu)導(dǎo)航樹形結(jié)構(gòu)導(dǎo)航模式也是非常重要的導(dǎo)航模式，它將導(dǎo)航視圖控制器iOS圖標(biāo)規(guī)格與命名規(guī)范名字，然后再修改視圖背景顏色，具體過程不再贅述。此時(shí)就實(shí)現(xiàn)標(biāo)了簽導(dǎo)航模式的一個(gè)實(shí)例，整個(gè)過程中沒有編寫一行代碼。9.5樹形結(jié)構(gòu)導(dǎo)航樹形結(jié)構(gòu)導(dǎo)航模式也是非常重要的導(dǎo)航模式，它將導(dǎo)航視圖控制器iOS效率型應(yīng)用程序。提示效率型應(yīng)用程序具有組織和操作具體信息的功能，通常用于完成比較重要的任務(wù)。效HumanInterfaceGuidelines，iOS人機(jī)界面設(shè)計(jì)指導(dǎo)手冊）9.5.1 樹形結(jié)構(gòu)導(dǎo)航實(shí)例同樣是按照行政區(qū)劃來展示東北三省的城市信息。第一組：哈爾濱、齊齊哈爾、雞西、鶴崗、雙鴨山、大慶、伊春、佳木斯、七臺河、牡丹江、黑河、綏化，12個(gè)城市為黑龍江省管轄；第二組：長春、吉林、四平、遼源、通化、白山、松原、白城，8個(gè)城市為吉林省管轄；第三組：沈陽、大連、鞍山、撫順、本溪、丹東、錦州、營口、阜新、遼陽、盤錦、鐵嶺、朝陽、葫蘆島，14個(gè)城市為遼寧省管轄。百科上的信息網(wǎng)就構(gòu)成了一種從http春→9-36所示。樹形導(dǎo)航模式9-37所示，它采用的就是樹形結(jié)構(gòu)的導(dǎo)航模式，所有界1樹形導(dǎo)航模式9-37所示，它采用的就是樹形結(jié)構(gòu)的導(dǎo)航模式，所有界123體展示的功能。自帶的郵件應(yīng)用制器自己添加的，它是漢澤爾與格萊特散在路上的“面包屑”1，開發(fā)沒利自己定義這個(gè)按鈕，否則用戶就會迷失在應(yīng)用之中。樹形結(jié)構(gòu)導(dǎo)航模式的缺點(diǎn)是怎樣進(jìn)來，就要怎樣原路返回，這一點(diǎn)與導(dǎo)航模式不同，后者可以很快在各個(gè)模塊之間切換。9.5.2 樹形結(jié)構(gòu)導(dǎo)航實(shí)現(xiàn)Application工程模板創(chuàng)建樹形結(jié)構(gòu)導(dǎo)航的應(yīng)用，但是這方式無法了解的細(xì)節(jié)問題，因此本書采用Single制器自己添加的，它是漢澤爾與格萊特散在路上的“面包屑”1，開發(fā)沒利自己定義這個(gè)按鈕，否則用戶就會迷失在應(yīng)用之中。樹形結(jié)構(gòu)導(dǎo)航模式的缺點(diǎn)是怎樣進(jìn)來，就要怎樣原路返回，這一點(diǎn)與導(dǎo)航模式不同，后者可以很快在各個(gè)模塊之間切換。9.5.2 樹形結(jié)構(gòu)導(dǎo)航實(shí)現(xiàn)Application工程模板創(chuàng)建樹形結(jié)構(gòu)導(dǎo)航的應(yīng)用，但是這方式無法了解的細(xì)節(jié)問題，因此本書采用SingleViewApplication工程模板實(shí)現(xiàn)。SingleViewApplication模板并利用故事板技術(shù)創(chuàng)建一個(gè)名為TreeNavigation的工程。1．ViewController視圖控制器更換為導(dǎo)航控制器由于使用的視圖控制器是導(dǎo)航控制器（igationControllr，需要打開故事板刪除示?？颉?引自于格林兄弟所收錄的德國童話《糖果屋》（德語：H?nselundGretel），又譯《漢澤爾與格萊特》。添加導(dǎo)航控制器添加導(dǎo)航控制器9-39設(shè)置集合視圖控制為初始視圖控制器2．設(shè)置導(dǎo)航控制器的根視圖控制器9-409-39設(shè)置集合視圖控制為初始視圖控制器2．設(shè)置導(dǎo)航控制器的根視圖控制器9-40就是根視圖控制器，它本身是一個(gè)表格控制器，對應(yīng)的程序代碼還沒有，可以把作為根視圖控制器，所有需要修改classViewController:UITableViewController{……}器按鈕，選擇CustomClass→Class下拉列表中的ViewController類。Cell，Indicator9-41所示。導(dǎo)航控制器和根視圖控制器設(shè)置單元格屬性導(dǎo)航控制器和根視圖控制器設(shè)置單元格屬性3．創(chuàng)建二級視圖先新建一個(gè)二級視圖控制器CitiesViewController框，在Class項(xiàng)目中輸入CitiesViewController，從Subclassof下拉列表中選擇復(fù)選框。創(chuàng)建完成二級視圖控制器CitiesViewController，回到設(shè)計(jì)界面從對象庫中拖曳一個(gè)加的TableViewController。9-43所示的SegueSelection兩個(gè)視圖控制器的連線選擇框選中連線中間的Segue選擇框選中連線中間的Segue，打開其屬性檢查器，然后在Identifier屬性中輸入ShowSelectedProvince9-44Identifier屬性將在代碼中用于對象。Segue9-44Segue的9-44Segue的Identifier屬性CitiesViewController。CitiesViewControllerScene中的TableViewCell，IdentifierCellIdentifierAccessoryDetail9-45所示。設(shè)置單元格屬性4.創(chuàng)建三級視圖新建三級視圖控制器DetailViewController，具體操作方法是：選擇菜單設(shè)置單元格屬性4.創(chuàng)建三級視圖新建三級視圖控制器DetailViewController，具體操作方法是：選擇菜單框，在Class項(xiàng)目中輸入DetailViewController，從Subclassof下拉列表中選擇XIBfile復(fù)選框。ControllerInterfaceBuilder設(shè)CitiesViewControllerShow。eIenifieroecteCiy。ViewController，打開其標(biāo)識檢查器，單擊CustomClass→Class，將其設(shè)置為選擇輸出口。到此，煩瑣的設(shè)計(jì)工作就完成了，下面看一下代碼部分。根視圖控制器的相關(guān)代碼如下：classViewController:UITableViewController{provinces_cities.plist取出數(shù)據(jù)，字典結(jié)構(gòu)vardictData:[StringAny]!dictData的所有鍵集合，數(shù)組結(jié)構(gòu)varlistData:[String]!overridefuncviewDidLoad(){super.viewDidLoad()letplistPath=Bundle.main.path(forResource:"provinces_cities",ofType:"plist")letdict=NSDictionary(contentsOfFile:plistPath!)>}UIViewController中的方法。Segue就會觸發(fā)該方法。>}UIViewController中的方法。Segue就會觸發(fā)該方法。segue.destination屬性用于獲得要跳轉(zhuǎn)到的視圖控制器對象。>classCitiesViewController:UITableViewController{varlistData:[[StringString]]!overridefuncviewDidLoad(){super.viewDidLoad()}MARK:-實(shí)現(xiàn)表視圖數(shù)據(jù)源方法overridefunctableView(_tableView:UITableView,numberOfRowsInSectionsection:Int)->Int{returnself.listData.count}overridefunctableView(_tableView:UITableView,cellForRowAtindexPath:IndexPath)-UITableViewCell{self.dictData=di ![String:Any]self.listData=dict?.allKeysas![String]self.title省份信息"}//UITableViewDataSource協(xié)議方法overridefunctableView(_tableView:UITableView,numberOfRowsInSectionsection:Int)->Int{returnself.listData.count}//實(shí)現(xiàn)表視圖數(shù)據(jù)源方法overridefunctableView(_tableView:UITableView,cellForRowAtindexPath:IndexPath)-UITableViewCell{letcellIdentifier="CellIdentifier"letcell:UITableViewCell!=tableView.dequeueReusableCell(withIdentifier:cellIdentifier,for:indexPath)letrow=indexPath.rowcell.textLabel?.text=self.listData[row]returncell}//選擇表視圖行時(shí)觸發(fā)overridefuncprepare(forsegue:UIStoryboardSegue,sender:Any?){ ①if(segue.identifier=="ShowSelectedProvince"){letcitiesViewController=segue.destinationas!CitiesViewControllerletindexPath=self.tableView.indexPathForSelectedRowasIndexPath?letselectedIndex=indexPath!.rowletselectN