搞定Tab bar交互！為設(shè)計(jì)師量身打造的XCODE教程（4）

編者按：Xcode系列教程第四期新年火速送到，自上次設(shè)計(jì)APP界面，搞定交互動(dòng)畫后，今天@JingDesign?手把手帶同學(xué)們創(chuàng)建一個(gè)Tab Bar 的交互效果，文末還提供源文件下載。跟上時(shí)代潮流，成為全能設(shè)計(jì)師，不懂點(diǎn)開發(fā)怎么行，來(lái)學(xué)習(xí)吧 >>>

在前邊的幾個(gè)章節(jié)中，靜電與大家一起，從無(wú)到有的熟悉了Xcode這個(gè)神奇的工具，并且教大家在自己的電腦或者手機(jī)上親自運(yùn)行起iOS的APP，是 不是很有成就感？轉(zhuǎn)眼就是這個(gè)為設(shè)計(jì)師準(zhǔn)備的Xcode教程的第四章了，小伙伴們，隔了這么久，不知道大家是否還記得第三章中，將一個(gè)個(gè)的界面串起來(lái)的例 子，但是只有這樣顯然無(wú)法滿足大家的需求，在第四章中，我們繼續(xù)來(lái)認(rèn)識(shí)另一個(gè)控件，這就是Tab Bar Controller。搞定接下來(lái)的教程，拿這個(gè)跟同事演示，一定會(huì)讓他們刮目相看的。

靜電的Xcode前期教程合集：

1. 《搞定一像素不求人！為設(shè)計(jì)師量身打造的XCODE教程（1）》
2. 《搞定一像素不求人！為設(shè)計(jì)師量身打造的XCODE教程（2）》
3. 《零代碼搞定交互動(dòng)畫！為設(shè)計(jì)師量身打造的XCODE教程（3）》

什么是Tab bar Controller呢？舉個(gè)簡(jiǎn)單的例子，大家拿起身邊的手機(jī)，隨便打開一個(gè)應(yīng)用，大部分會(huì)采用下圖這樣的布局形式。頁(yè)面最下方會(huì)有若干個(gè)圖標(biāo)，點(diǎn)擊每個(gè) 圖標(biāo)會(huì)切換不同的頁(yè)面，這就是Xcode里的Tab bar。Tab bar作為一種常見的一級(jí)菜單存在在非常多的手機(jī)app中。下面，靜電就來(lái)教大家簡(jiǎn)單幾步在Xcode中搞定這樣的效果。

一、準(zhǔn)備素材

我們首先要準(zhǔn)備三頁(yè)的設(shè)計(jì)稿。下圖中的每張圖代表每個(gè)tab點(diǎn)擊后呈現(xiàn)的頁(yè)面。還需要三個(gè)icon，分別表示三個(gè)主菜單。靜電在這里設(shè)計(jì)的三個(gè)圖標(biāo)分別是：閱讀，創(chuàng)作，我的。

至于這些效果圖是如何設(shè)計(jì)出來(lái)的，嘿嘿，肯定是Sketch啦。非常簡(jiǎn)單和方便。如果小伙伴們還不知道如何設(shè)計(jì)，可以參考靜電之前寫的Sketch教程（文末會(huì)附上）。設(shè)計(jì)完之后，我們需要將圖切出來(lái)，由于靜電手頭的手機(jī)是iPhone5s，所以我將圖標(biāo)和效果圖都切成@2x素材即可。準(zhǔn)備好一共六張圖片。三張效果圖，三個(gè)圖標(biāo)。（源文件在文章最后的鏈接中可以下載到。）

二、新建Xcode工程

圖片準(zhǔn)備完畢后，我們可以打開Xcode了。啟動(dòng)，新建一個(gè)空的工程（new project）。然后選擇Single View Application（其實(shí)選擇 Tabbed Application也是可以的，這里為了大家理解更透徹，選擇新建Single View Application）

Next后，隨便為Prodcut Name起一個(gè)名字，然后保存（這里為了方便起見，開發(fā)語(yǔ)言選擇objective-C）。然后保存。

保存后會(huì)來(lái)到開發(fā)界面。我們找到熟悉的Main.storyboard這個(gè)文件，這個(gè)時(shí)候開發(fā)界面只有一個(gè)View Controller，不過(guò)這個(gè)VC并不是我們想要的，選擇這個(gè)VC，按鍵盤上的del刪掉它。

三、構(gòu)建Tab Bar導(dǎo)航效果

按照慣例，我們先來(lái)設(shè)置一下尺寸（請(qǐng)根據(jù)自己的設(shè)計(jì)稿的尺寸來(lái)設(shè)置使用哪種模擬器運(yùn)行。）

這個(gè)時(shí)候Storyboard里什么都沒有，ok，下面是重點(diǎn)部分了。上一節(jié)中，大家對(duì)View Controller這個(gè)控件一定都很熟悉了。不過(guò)這次有點(diǎn)不同，我們來(lái)使用一個(gè)新的控件，Tab bar controller。找到下圖所示的箭頭圖標(biāo)就是這個(gè)TBC了（Tab Bar Controller簡(jiǎn)寫，下同）。拖動(dòng)這個(gè)TBC到storyboard中。這下大家應(yīng)該會(huì)明白了，一個(gè)具有兩個(gè)圖標(biāo)的tab導(dǎo)航就出現(xiàn)了。分析一下這個(gè)TBC的構(gòu)成，其實(shí)就是一個(gè)名為TBC的View，還有兩個(gè)普通的VC，他們通過(guò)一些“電路”連接在一起，連接后，底部就會(huì)出現(xiàn)歸屬于某個(gè)頁(yè)面的tab圖標(biāo)。

可是我們需要的是三個(gè)啊！嗯，少了一個(gè)，來(lái)手工加上一個(gè)。

拖動(dòng)一個(gè)普通的VC到Storyboard中，然后把他與TBC連接起來(lái)。（按住鼠標(biāo)右鍵，從TBC窗體向VC拖動(dòng)。松開鼠標(biāo)右鍵，在彈出的菜單中，選擇View Controllers，即可完成連接）

這個(gè)時(shí)候三個(gè)VC都被鏈接起來(lái)，鏈接電路的線條中有兩圓一線的連接標(biāo)志，即代表鏈接成功。如果你要設(shè)置四個(gè)tab，那么只需要重復(fù)上邊的操作即可。

接著要修改下View的尺寸，選中TBC，在 右側(cè)屬性欄中，將Size改為你期望的屏幕尺寸（我這里選擇ip5s的4寸），Buttom Bar改為黑色Translucent Black Tab Bar（這里選擇半透明黑色tab bar，大家也可以選擇不透明的，英文為Opaque開頭，大家懂的。）

尺寸修改完成后，可以導(dǎo)入我們準(zhǔn)備好的素材了，從左側(cè)的文件列表中找到Image.Xcassets文件。將準(zhǔn)備好的六張圖一股腦拖到里邊，Xcode會(huì)自動(dòng)識(shí)別@2x或者@3x后綴的文件，所以文件名后綴一定要命名正確（如果你比較懶，圖片素材文件名沒有加@2x @3x的后綴，沒關(guān)系，把你圖拖動(dòng)到你認(rèn)為正確的框里即可）。靜電這里任性一把，弄個(gè)icon和啟動(dòng)界面的圖一起放進(jìn)去（不放也沒關(guān)系，后期大家可以設(shè)計(jì)后在放）。

素材導(dǎo)入完成后，我們重新回到Storyboard界面。運(yùn)用上一節(jié)所學(xué)的知識(shí)，分別將三張效果圖添加到三個(gè)View中去。回憶下如何把一張圖片放進(jìn)VC里，對(duì)！這個(gè)時(shí)候需要Image View。從控件庫(kù)中找到image view圖標(biāo)，拖動(dòng)到每個(gè)VC中，然后選中image view，在右側(cè)屬性窗口中，分別設(shè)置三張?jiān)O(shè)計(jì)稿圖。

隨后，設(shè)置tabbar的每一個(gè)icon，選中icon，在右側(cè)屬性欄里，填寫title，設(shè)定剛才我們導(dǎo)入的圖片。記得三個(gè)View中的icon圖片和名字都要設(shè)定。

但這個(gè)時(shí)候運(yùn)行是沒有任何東西的，因?yàn)槲覀兺艘患隆Ｐ枰嬖VXcode啟動(dòng)app后，哪個(gè)界面是入口。找到組件庫(kù)中的箭頭圖標(biāo)（storyboard entry point），在TBC選中的狀態(tài)下，拖動(dòng)箭頭到TBC的上邊。記得，以后我們做的任何demo，必須要檢查是否有入口箭頭。否則運(yùn)行起來(lái)可能會(huì)是一片黑。好的，大功告成，運(yùn)行一下看看吧，點(diǎn)擊左上角工具欄上對(duì)應(yīng)的模擬器版本，按下運(yùn)行按鈕，在模擬器中欣賞自己的成果吧。（Xcode6.2beta版本有bug，entry point拖動(dòng)后程序會(huì)崩潰，建議選擇穩(wěn)定的6.1版本）

四、一點(diǎn)點(diǎn)代碼——修改tab bar背景顏色與點(diǎn)擊圖標(biāo)顏色

在模擬器運(yùn)行后還是有一點(diǎn)點(diǎn)缺憾，設(shè)計(jì)稿中當(dāng)選中按鈕是紅色的，但無(wú)論我們?nèi)绾卧O(shè)置，模擬器中選中的按鈕顏色總是藍(lán)色。這個(gè)時(shí)候我們需要兩行非常簡(jiǎn)單的代碼來(lái)搞定。

打開左側(cè)文件中的AppDelegate.m，在這行代碼

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

的后邊，

加入如下代碼:

//設(shè)定Tabbar的點(diǎn)擊后的顏色

[[UITabBar appearance] setTintColor:[UIColor colorWithRed:227.0/255.0 green:28.0/255.0 blue:31.0/255.0 alpha:1]];

//設(shè)定Tabbar的顏色

[[UITabBar appearance] setBarTintColor:[UIColor colorWithRed:0 green:0 blue:0 alpha:1]];

請(qǐng)?jiān)诖a中使用RGB顏色， 格式是：

colorWithRed:227.0/255.0 green:28.0/255.0 blue:31.0/255.0

alpha：（透明度從1-0，代表從不透明到完全透明）

運(yùn)行后，按鈕點(diǎn)擊效果就是我們想要的顏色了，當(dāng)然tab bar的背景顏色也可以隨意修改。

五、大功告成——來(lái)看看演示效果

來(lái)看看靜電的演示動(dòng)畫吧，相信你也可以輕松辦到 ：）

源文件 微盤下載

掃一掃，關(guān)注靜電同學(xué)的微信號(hào)：

靜電的Sketch教程合集：

1. 《SKETCH設(shè)計(jì)教室！從零開始學(xué)APP設(shè)計(jì)利器SKETCH（一）》
2. 《SKETCH設(shè)計(jì)教室！從零開始學(xué)APP設(shè)計(jì)利器SKETCH（二）》
3. 《SKETCH設(shè)計(jì)教室！帶你了解超好用的SKETCH插件》
4. 《想要一稿過(guò)不加班？SKETCH絕配神器MIRROR搶先體驗(yàn)》

作者：@JingDesign

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量89萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
官方微信：想在手機(jī)上、被窩里獲取設(shè)計(jì)教程和各種意想不到的"福利"嗎？添加優(yōu)設(shè)哥微信號(hào)：youshege