開始用Swift開發(fā)iOS 10 - 20 使用Tab Bar Controller 和 拆分Storyboard

上一篇 開始用Swift開發(fā)iOS 10 - 19 使用UIPageViewController構(gòu)建介紹頁面構(gòu)建了開始介紹頁面，這一篇學(xué)習(xí)使用Tab Bar Controller和拆分Storyboard。

創(chuàng)建 Tab Bar Controller

  • 選擇開始的Navigation Controller，Editor > Embed in > Tab Bar Controller，然后自動(dòng)添加一個(gè)新的Tab Bar Controller 作為初始的控制器，之前Navigation Controller變成Tab Bar Controller的一部分了。
  • 在Navigation Controller中選擇 tab item，修改System Item為Favorites。

隱藏 Tab Bar

工具欄在其他頁面隱藏，選擇Detail View，勾選Hide Bottom Bar on Push就可以。

也可以用代碼形式，在RestaurantTableViewController中的prepare(for:)中添加：

  destinationController.hidesBottomBarWhenPushed = true

添加新的Tabs

  • 添加一個(gè)新的Navigation Controller， 選中tab item，修改System Item為Recents；table view的navigation item的title為Discover

  • 把新加的Navigation Controller加入到 Tab Bar Controller。用ctrl+drag從Tab Bar Controller到新的Navigation Controller，選擇Relationship Segue - View Controllers。

  • 改變新的Navigation Controller的tab bar的title為Recent，修改system item為Recents

  • 同樣的方式添加一個(gè)新的Navigation Controller， 選中tab item，修改System Item為More；table view的navigation item的title為About。也用ctrl+drag與Tab Bar Controller建立關(guān)系。

最終創(chuàng)建有三個(gè)Tab Bar Item的Tab Bar。


定制Tab Bar的樣式

修改Tab Bar的樣式在application(_:didFinishLaunchingWithOptions:)中進(jìn)行，類似下面的代碼，詳細(xì)的API可參考官方文檔：

UITabBar.appearance().tintColor = UIColor(red: 235.0/255.0, green: 75.0/255.0,
blue: 27.0/255.0, alpha: 1.0)
UITabBar.appearance().barTintColor = UIColor.black

改變 Tab Bar Item的圖片

  • 從圖片下載圖片到Assets.xcasset。
  • 在SB中修改三個(gè)Tab Bar Item的System Item都為Custom，修改Title和Image為想要的值，類似下圖
  • 在application(_:didFinishLaunchingWithOptions:)中修改樣式：
     UITabBar.appearance().tintColor = UIColor(red: 235.0/255.0, green: 75.0/255.0, blue: 27.0/255.0, alpha: 1.0)
     UITabBar.appearance().barTintColor = UIColor(red: 236/255.0, green: 240.0/255.0, blue: 241.0/255.0, alpha: 1.0)

改變選擇指示圖片（Selection Indicator Image）

Selection Indicator Image就是指tab bar item被選中后與其它tab bar item不同的樣式,在代碼中和SB中都可以修改。

  UITabBar.appearance().selectionIndicatorImage = UIImage(named: "tabitem-selected")

最終效果：

拆分Storyboard

當(dāng)項(xiàng)目變大時(shí)，一個(gè)Storyboard就會(huì)很大，如果是項(xiàng)目中有很多人合作的話，一個(gè)Storyboard也很難管理。從Xcode7之后，新功能storyboard references解決了這個(gè)問題。

  • 在Main.storyboard中選擇，about相關(guān)的兩個(gè)view controller，然后Editor > Refactor to Storyboard...，新建名為about.storyboard的storyboard文件，就把這個(gè)兩個(gè)獨(dú)立出去了。

把a(bǔ)bout相關(guān)的view controller拆分出去后，在Main.storyboard里有一個(gè)關(guān)聯(lián)圖標(biāo)，雙擊就可以跳轉(zhuǎn)到about.storyboard中。

  • 同樣的方法，獨(dú)立出discover相關(guān)view controller，生成discover.storyboard文件。

代碼

Beginning-iOS-Programming-with-Swift

說明

此文是學(xué)習(xí)appcode網(wǎng)站出的一本書 《Beginning iOS 10 Programming with Swift》 的一篇記錄

系列文章目錄

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

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

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