轉載請註明出處

http://blog.csdn.net/pony_maggie/article/details/28129473

作者:小馬

什麼是tabbar? 先幾張圖:

上圖中藍色框起來的部分就是tabbar, 它有如下幾個特徵：

1 它通常位於螢幕的最下方，不是必然，但大部分情況是這樣。

2 tab bar的每個選項卡通常表示不同的功能，這也是它與segmentedcontrol最重要的區別， 後者強調的是同一功能不同類別的區分，前者則是不同功能的區分。拿開頭兩個圖作為例子，看看他們上面紅色框起來的部分，叫segmentedcontrol。

3 因為2的原因，tab bar的不同選項卡通常對應不同的檢視。

4 tab bar的每個選項卡一般都有圖示，有些是圖示+文字(比如最上面兩個圖),一般不會只有文字。這個也是和segmentedcontrol的一個區別。

我今天寫的這個demo,為了涉及面比較廣一些，我會分別用一個系統的圖示，兩個自定義的圖示（一個帶文字和圖片，一個只有文字）， 來設定不同的tabbar item。最終效果如下:

開發環境

mac os + xcode5.0 + ios7模擬器

tab bar上的圖示大小大一般是30*30,tab bar的整體高度是49。如果需要自定義圖示，請參考這個大小比例。

新建一個single View的工程， 然後拖一個tabbar controller到storyboard。你會發現這個tabbar controller還同時帶著兩個viewController過來，並自動關連到item。 這個”擅自做主”的行為並不會引起我們的反感，因為我們幾乎總是需要這樣做。

為了便於區分， 我們設定兩個view的背景色，最終如下圖所示(初始的那個viewcontroller已經被我刪除):

然後我們再增加一個item。

拖一個viewcontroller過來，設定一下背景色。然後按住conrol鍵，從tabbar controller拖到這個viewcontroller, 選擇最下面的”relationship”,如下圖所示:

然後最終的storyboard如下圖所示：

好了，編譯執行，一切OK。有沒有注意到我一行程式碼都沒有寫，是不是很神奇呢！

程式碼下載地址:

https://github.com/pony-maggie/TabBarControlDemo

 或

http://download.csdn.net/detail/pony_maggie/7439409