iOS 自訂索引標籤控制項(TabBar)的製作思路

其實 一般我在部落格 針對控制項這一塊來說,是很少進行解說.

不過主要 TabBar 相對於其他控制項的重要性要多得多,製作方面也要複雜一些.

為此,我專門寫一篇教程,記錄一下原理和思路.以供各路神仙參考!

OK,進入本文:

iOS 5以後 其實製作這類控制項簡單多了,  不需要自己去組織各個View 之間的切換.

第一點,原理:

TabBar它講白了 也是View,只是在一個View上面暫時只顯示一個View 根據使用者選按決定顯示哪個View

iOS5以後提供在ViewController內部直接填裝其他子ViewController,代碼如下:

[self addChildViewController:viewController];

這樣寫的好處是什麼,為什麼iOS5以後要這樣添加呢? 參考下文,你就知道為什麼:

http://blog.devtang.com/blog/2012/02/06/new-methods-in-uiviewcontroller-of-ios5/

那麼針對系統下的UITabBarViewController 如何進行自訂呢?

預設的TabBarView高度是49 這裡注意,不要嘗試去修改這個高度以來展現更多的[內容] 檢視,總之這樣怎麼弄都弄不到你想要的效果.

原理方面是 將UITabBar 隱藏.  那麼在 添加一個 自訂的UIView 到 UITabBarViewController的View上面

這樣這個UIView 就隨便你什麼開發了.

另外值得一提的是,當你Push到下一個視圖時,你想隱藏你自己自訂的視圖. 此時糾結了.

那麼在我自己經過無數次嘗試以後,得帶以下代碼,配合系統預設的 hidesBottomBarWhenPushed  也算是實現了.

原理則是,預設addSubView 到 根視圖中,當要切換Push到新的視圖的時候.再把自訂視圖 addSubView到TabBarView上面. 連帶著一起過去.

一:聲明這個變數在第一次載入介面時不會有錯亂的動畫出現

@interface FESBHomeViewController (){    BOOL _isFirstShowCoopTabBar;}

二:在TabBarViewController 執行ViewDidLoad時  顯示出自訂選項卡視圖

- (void)viewDidLoad{    [super viewDidLoad];    _isFirstShowCoopTabBar = YES;    [self isHiddenTabBar:NO withViewController:nil];}

三:核心切換自訂選項卡視圖的代碼

- (void)isHiddenTabBar:(BOOL)hidden withViewController:(UIViewController *)viewController{    if (!self.tabBar.hidden == hidden) {        return;    }    [coopTabBarView removeFromSuperview];    if (hidden) {        [self.tabBar setHidden:NO];        [coopTabBarView setFrame:self.tabBar.bounds];        [self.tabBar addSubview:coopTabBarView];        if (viewController != nil) {            viewController.hidesBottomBarWhenPushed = YES;        }    }else    {        [self.tabBar setHidden:YES];        [coopTabBarView setFrame:self.tabBar.frame];        int statusBarHeight = 0;        if (_isFirstShowCoopTabBar) {            _isFirstShowCoopTabBar = NO;            statusBarHeight = 20;        }        if (self.navigationController.viewControllers == nil) {            coopTabBarView.Help_top -=statusBarHeight;        }else        {            coopTabBarView.Help_top -=statusBarHeight+44;        }        [self.view addSubview:coopTabBarView];    }}