編者按：Xcode系列教程第四期新年火速送到，自上次設計APP界面，搞定交互動畫后，今天@JingDesign?手把手帶同學們創建一個Tab Bar 的交互效果，文末還提供源文件下載。跟上時代潮流，成為全能設計師，不懂點開發怎么行，來學習吧 >>>

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

靜電的Xcode前期教程合集：

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

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

一、準備素材

我們首先要準備三頁的設計稿。下圖中的每張圖代表每個tab點擊后呈現的頁面。還需要三個icon，分別表示三個主菜單。靜電在這里設計的三個圖標分別是：閱讀，創作，我的。

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

二、新建Xcode工程

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

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

保存后會來到開發界面。我們找到熟悉的Main.storyboard這個文件，這個時候開發界面只有一個View Controller，不過這個VC并不是我們想要的，選擇這個VC，按鍵盤上的del刪掉它。

三、構建Tab Bar導航效果

按照慣例，我們先來設置一下尺寸（請根據自己的設計稿的尺寸來設置使用哪種模擬器運行。）

這個時候Storyboard里什么都沒有，ok，下面是重點部分了。上一節中，大家對View Controller這個控件一定都很熟悉了。不過這次有點不同，我們來使用一個新的控件，Tab bar controller。找到下圖所示的箭頭圖標就是這個TBC了（Tab Bar Controller簡寫，下同）。拖動這個TBC到storyboard中。這下大家應該會明白了，一個具有兩個圖標的tab導航就出現了。分析一下這個TBC的構成，其實就是一個名為TBC的View，還有兩個普通的VC，他們通過一些“電路”連接在一起，連接后，底部就會出現歸屬于某個頁面的tab圖標。

可是我們需要的是三個啊！嗯，少了一個，來手工加上一個。

拖動一個普通的VC到Storyboard中，然后把他與TBC連接起來。（按住鼠標右鍵，從TBC窗體向VC拖動。松開鼠標右鍵，在彈出的菜單中，選擇View Controllers，即可完成連接）

這個時候三個VC都被鏈接起來，鏈接電路的線條中有兩圓一線的連接標志，即代表鏈接成功。如果你要設置四個tab，那么只需要重復上邊的操作即可。

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

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

素材導入完成后，我們重新回到Storyboard界面。運用上一節所學的知識，分別將三張效果圖添加到三個View中去。回憶下如何把一張圖片放進VC里，對！這個時候需要Image View。從控件庫中找到image view圖標，拖動到每個VC中，然后選中image view，在右側屬性窗口中，分別設置三張設計稿圖。

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

但這個時候運行是沒有任何東西的，因為我們忘了一件事。需要告訴Xcode啟動app后，哪個界面是入口。找到組件庫中的箭頭圖標（storyboard entry point），在TBC選中的狀態下，拖動箭頭到TBC的上邊。記得，以后我們做的任何demo，必須要檢查是否有入口箭頭。否則運行起來可能會是一片黑。好的，大功告成，運行一下看看吧，點擊左上角工具欄上對應的模擬器版本，按下運行按鈕，在模擬器中欣賞自己的成果吧。（Xcode6.2beta版本有bug，entry point拖動后程序會崩潰，建議選擇穩定的6.1版本）

四、一點點代碼——修改tab bar背景顏色與點擊圖標顏色

在模擬器運行后還是有一點點缺憾，設計稿中當選中按鈕是紅色的，但無論我們如何設置，模擬器中選中的按鈕顏色總是藍色。這個時候我們需要兩行非常簡單的代碼來搞定。

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

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

的后邊，

加入如下代碼:

//設定Tabbar的點擊后的顏色

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

//設定Tabbar的顏色

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

請在代碼中使用RGB顏色， 格式是：

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

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

運行后，按鈕點擊效果就是我們想要的顏色了，當然tab bar的背景顏色也可以隨意修改。

五、大功告成——來看看演示效果

來看看靜電的演示動畫吧，相信你也可以輕松辦到 ：）

源文件 微盤下載

掃一掃，關注靜電同學的微信號：

靜電的Sketch教程合集：

1. 《SKETCH設計教室！從零開始學APP設計利器SKETCH（一）》
2. 《SKETCH設計教室！從零開始學APP設計利器SKETCH（二）》
3. 《SKETCH設計教室！帶你了解超好用的SKETCH插件》
4. 《想要一稿過不加班？SKETCH絕配神器MIRROR搶先體驗》

作者：@JingDesign

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

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