通過昨天的講述我們知道了UIPopoverController控制器和UISplitViewController控制器是iPad專用的視圖控制類,我們著重了解了UIPopoverController控制器,今天南昌APP開發(fā)公司小編來講解一下UISplitViewController控制器。
iPad自帶的E-mail應(yīng)用,它采用UISplitViewController控制器,該控制器是iPad中構(gòu)建導(dǎo)航模式應(yīng)用的基礎(chǔ),可以呈現(xiàn)屏幕分欄視圖的效果。由于iPad要比iPhone大很多,所以不能簡單地采用iPhone的導(dǎo)航模式。圖1是橫屏SplitView視圖,此時(shí)屏幕被分割為左右兩個視圖,右側(cè)是DetailView,負(fù)責(zé)顯示詳細(xì)信息,左側(cè)是MasterView,其中有一個導(dǎo)航列表,用于為右側(cè)的DetailView導(dǎo)航。需要說明的是,MasterView的導(dǎo)航列表占有320點(diǎn)的固定大小。在豎屏的情況下,MasterView會隱藏起來,如圖2所示。
圖1 橫屏SplitView視圖
圖2豎屏SplitView視圖
有時(shí)候,我們會根據(jù)需要在MasterView或DetailView中添加導(dǎo)航欄控制器(UINavigationController),以便在自己的視圖中采用樹形導(dǎo)航模式。圖3是iPad自帶的E-mail應(yīng)用,左右視圖都帶有導(dǎo)航欄。MasterView內(nèi)部就采用樹形導(dǎo)航模式,這樣會承載大量的信息而不混亂。
圖3 iPad自帶的E-mail應(yīng)用
下面我們通過一個案例來熟悉一下UISplitViewController控制器。圖4是橫屏情況的SplitView視圖,顯示了MasterView和DetailView,其中MasterView中有Blue View和Yellow View兩個選擇項(xiàng)目,當(dāng)選擇其中一個時(shí),右邊的DetailView就會顯示相應(yīng)的藍(lán)色和黃色視圖。點(diǎn)擊Tap按鈕,會彈出AlertView警告框提示為藍(lán)色還是黃色視圖。
圖4 SplitView視圖案例
使用Xcode創(chuàng)建工程SplitViewSample,模板采用Single View Application,Devices選擇iPad。刪除由模板生成的ViewController文件,然后用Xcode工具創(chuàng)建DetailViewController、BlueViewController和YellowViewController視圖控制器,它們的父類是UIViewController,不用選擇xib文件。再創(chuàng)建MasterViewController視圖控制器,其父類是UITableViewController,不用選擇xib文件。
打開故事板文件,刪除由模板生成的View Controller,從對象庫中拖曳Split View Controller到設(shè)計(jì)界面,如圖5所示。
圖5 從對象庫中拖曳Split View Controller到設(shè)計(jì)界面
從圖5中可見,共生成了4個視圖控制器。默認(rèn)情況下,MasterView內(nèi)部采用導(dǎo)航控制器(NavigationController)作為它的根視圖控制器,DetailView采用普通視圖控制器作為它的根視圖控制器。
我們需要設(shè)置Split View Controller為初始視圖控制器,選擇場景中的Split View Controller,然后選擇右邊的屬性檢查器,選中View Controller→Is Initial View Controller復(fù)選框。
我們需要將自己創(chuàng)建的視圖控制器類與故事板中的View Controller關(guān)聯(lián)起來。選擇場景中的Master ViewController,打開其標(biāo)識檢查器,選擇Custom Class→Class下拉列表中的MasterViewController類。再選擇場景中的DetailView Controller,打開標(biāo)識檢查器,選擇Custom Class→Class下拉列表DetailViewController類。從對象庫中拖曳兩個View Controller到設(shè)計(jì)界面,按照圖6在每個視圖中放置一個按鈕。
圖6 視圖控制器設(shè)計(jì)界面
在設(shè)計(jì)界面中選擇場景中的Blue View Controller,打開其標(biāo)識檢查器,選擇Custom Class→Class下拉列表中的BlueViewController類,修改StoryboardID為blueViewController。然后再選擇View,將其背景改為藍(lán)色。添加一個按鈕到視圖中,并為按鈕添加動作事件。
類似地,選擇Yellow View Controller ,打開其標(biāo)識檢查器,選擇Custom Class→Class下拉列表中的YellowViewController類,修改Storyboard ID為yellowViewController。然后再選擇View,將其背景改為黃色。添加一個按鈕到視圖中,并為按鈕添加動作事件。
下面南昌APP開發(fā)公司小編來看看MasterViewController中的屬性和視圖加載方法viewDidLoad,相關(guān)代碼如下:
其中l(wèi)istData屬性用于存放MasterView中的導(dǎo)航列表標(biāo)題,detailViewController屬性是DetailViewController類型。
在視圖加載方法中,第①行代碼用于創(chuàng)建并初始化listData屬性,第②行代碼用于初始化splitViewController屬性,這里的 self.splitViewController 用于獲得它們所在的分欄視圖控制器。第③行代碼中,UISplitViewController的viewControllers屬性是NSArray集合類型。viewControllers集合中存放兩個視圖控制器,其中第一個元是MasterViewController視圖控制器,第二個元素是DetailViewController視圖控制器。第④行代碼用于獲得最后一個元素(第二個元素)。
MasterViewController是表視圖控制器,它實(shí)現(xiàn)的數(shù)據(jù)源和委托協(xié)議方法如下:
這里實(shí)現(xiàn)表視圖委托方法tableView:didSelectRowAtIndexPath:的目的是根據(jù)選擇的行號更新DetailView,其中updateView:方法是我們在DetailViewController中定義的方法,用于更新視圖。
接下來,我們看看DetailViewController中的屬性和視圖加載方法viewDidLoad,相關(guān)代碼如下:
在上述代碼中,屬yellowViewController和blueViewController是DetailView中要展示視圖的控制器。
在viewDidLoad方法中,我們通過Storyboard ID分別創(chuàng)建藍(lán)色視圖控制器和黃色視圖控制器,然后通過addSubview:方法把藍(lán)色和黃色視圖放入到DetailView中。
在DetailViewController中,視圖方法updateView:的代碼如下:
我們首先通過iPhone和iPad設(shè)備使用場景上的差異,了解了二者在設(shè)計(jì)和開發(fā)時(shí)存在差異的根由。文章出自南昌APP開發(fā)公司--百恒網(wǎng)絡(luò),了解更多相關(guān)知識,關(guān)注百恒網(wǎng)絡(luò)官網(wǎng):www.gimmickmag.com