iOS8 UISplitViewController 學(xué)習(xí)

由于屏幕尺寸的原因,iPad(包括iPhone 6 plus)版的app很少像普通 iPhone app一樣讓 table view 占據(jù)整個屏幕。通常我們用UISplitViewContoller來更好地利用設(shè)備屏幕。

split view 允許你把屏幕分割為左右兩部分,并可在左右各添加一個view controller。split view較為典型的使用方式就是:左邊顯示導(dǎo)航視圖,在右邊顯示相應(yīng)的詳細(xì)信息。從iOS8開始,Apple把全新的split view controller 引入到iPad和iPhone,你可以使用這一功能實現(xiàn)讓人眼前一亮的設(shè)計。

在這個教程里,你將從頭開始開發(fā)一款通用版 app,這個 app 主要是用來顯示游戲 Math Ninja(這是一款由Razeware 開發(fā)的游戲) 中的怪物列表。你將會使用 split view controller 來處理導(dǎo)航和具體內(nèi)容顯示,當(dāng)然這款app是同時適用于iPhone和iPad的。

本教程主要介紹 split view controller,在開始之前,我們假設(shè)你已經(jīng)對 auto layout 和 storyboards 有了一定的了解。

一、開始

(1)打開Xcode ,創(chuàng)建新的項目并選擇ios\Application\Single View Application 模版。

將項目命名為MathMonsters,語言選擇Swift,在設(shè)備下拉列表里選擇Universal。取消勾選Use Core Data,然后點擊Next完成項目的創(chuàng)建。

盡管你可以使用 Master-detail Application 模版來創(chuàng)建應(yīng)用,但是我不建議你這么去做。通過 Single View Application 模版從頭開始創(chuàng)建應(yīng)用,可以讓你更好地理解 UISpiltViewController 的運(yùn)行原理,這對你以后使用 UISpiltViewController 實現(xiàn)一些功能是非常有幫助的。雖然使用Master-detail Application 模版確實可以節(jié)省不少時間。

(2)打開 Main.Storyboard , 刪除掉模版自動生成的初始化 view controller,然后拖拽一個Split View Controller 到 Main.Storyboard 中(因為你刪除了缺省的view controller,所以在拖拽之前,Main.Storyboard ?應(yīng)該是空的)。

完成以上操作后,以下一些元件便添加到你的 storyboard 中:

1. Split View Controller。整個應(yīng)用的根視圖,split view 會包含應(yīng)用程序的剩余部分。

2. Navigation Controller。這表示這個UINavigationController 將會是左側(cè)視圖控制器的根視圖(即,iPad 或 iPhone 6 Plus 橫屏?xí)r左側(cè)視圖的根視圖),在Spilt View Controller Scene里,你能很快地找到 Navigation Controller 和 Spilt View Controller之間的關(guān)系橋(segue),這個關(guān)系橋可以讓你在絲毫不影響 Detail View Controller 的前提下 在 主視圖控制器里創(chuàng)建一個完整的導(dǎo)航層級關(guān)系。

3. View Controller。這是顯示怪物詳細(xì)描述的地方,在Spilt View Controller Scene里,你也能很快地找到 View Controller 和 Spilt View Controller之間的關(guān)系橋(segue)。

4. Table View Controller。這是 UINavigationController 的根視圖,主要用來顯示怪物名稱列表。

因為你刪除了模版默認(rèn)生成的視圖控制器,所以你需要告訴 storyboard 你要把自己剛才拖拽進(jìn)來的 split view 作為初始化視圖控制器。選中 Split View Controller ------>打開右側(cè)屬性控制控制欄------> 勾選 Is Initial Controller選項。

你會在 Split View Controller 的左側(cè)看到一個箭頭指向它,這表示箭頭所指的視圖控制器是這個storyboard的初始化視圖控制器。在iOS Simulator 中選擇iPad,然后編譯運(yùn)行你的程序(當(dāng)然你也可以選擇 iPhone 6 plus ,然后旋轉(zhuǎn)屏幕到橫屏),你會看到一個空的分割視圖控制器。

現(xiàn)在我們在其它iPhone simulator 上運(yùn)行程序(不要選擇iPhone 6 plus,因為它的屏幕太大了,大到都穿不過馬桶窟窿),你會看到,程序啟動后會全屏顯示視圖頁,你可以通過點擊屏幕頂端左側(cè)的后退按鈕回到主視圖控制器。

從 iOS 8 開始,一個簡單的 Split View Controller 就使得 app 看起來像一個具有推拉效果的app。更讓你wow的是,你只需要做一些簡單的配置就可以使用,萬歲的iOS!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,184評論 4 61
  • /* UIViewController is a generic controller base class th...
    DanDanC閱讀 2,035評論 0 2
  • 這是板繪的一個D.VA 希望大家喜歡
    柚子samai閱讀 324評論 0 2
  • 你如花的笑靨在天際若隱若現(xiàn) 馬頭琴在月光下嗚咽 草原深處吹來遠(yuǎn)方的風(fēng) 野花的幽香是你留下的芬芳 明月如水 映照我千...
    駱駝dylan閱讀 133評論 0 0
  • K正在酒吧里喝著啤酒,也只喝了兩杯而已。 腦袋還很清醒,音響里一曲一曲輪換著播放的歌還聽得清清楚楚,只是總聽不清唱...
    羽k閱讀 264評論 0 0

友情鏈接更多精彩內(nèi)容