使用 RDVTabBarController 制作底部凸起的 TabBar教程

本文主要針對底部凸起的 TabBar 這種特殊需求,不感興趣的可以直接繞過~

最近做的一個項目需要底部凸起的 TabBar,效果如下:

考慮到 iOS 原生UITableBar的定制比較麻煩,所以決定先找一下第三方的解決方案,經過調研發現RDVTabBarController比較符合需求。而且經過實踐發現它有如下幾個優勢:

實現方式與 iOS 原生UITableBarController基本一致,方便上手。RDVTabBar可以比較簡單滴實現底部某個 tab 凸起的效果。支持自定義 badge。

切圖

因為RDVTabBarItem本身提供如下支持:

設置選中和未選中的背景設置選中和未選中的 Image 設置選中和未選中的文本屬性

而且考慮到屏幕的自適應,所以我們在切圖的時候把 tab 的 icon 和背景(背景如果是純色可以不切圖)單獨切圖。

擼代碼

首先,我們新建一個繼承RDVTabBarController的類,然后通過代碼或者SB的方式將其設置為根視圖。

巨坑

這里有我之前踩過的一個坑,因為一般 App 都會有UINavigationController用來做視圖導航,所以當 App 底部有 TabBar 的時候,我們有兩種選擇:

用一個UITabBarController包含多個UINavigationController。用一個UINavigationController包含一個UITabBarController。

曾經我很天真(sha bi)的選了第一種,理由是從邏輯上理解更自然,但是結果是被坑慘了,因為業務需求往往是底部UITabBar只在幾個 Tab 的首頁顯示,進入下一個頁面之后就要隱藏起來,如果采用了第一種方案,你就需要使用self.hidesBottomBarWhenPushed = YES或者自定義動畫的方式來隱藏底部UITabBar,然后坑就出現了——當你需要從某個 Tab 的首頁漸變到下一個頁面的時候。

如果使用self.hidesBottomBarWhenPushed = YES,UITabBar仍然會按照原來動畫方式隱藏和出現,也就是你會看到 Push 的時候它從右往左消失,Pop 的時候從左往右出現,OMG!!!這 tmd 能看么?你的切換動畫是漸變的,但是竟然有個UITabBar在下面跑來跑去,不能忍好么?

這個時候是不是想自定義動畫了?呵呵~不敢告訴你我試了好久,也沒有得到一種可以讓UITabBar漸變消失出現,然后 Tab 里面的頁面還能平滑滴配合UITabBar做變化的動畫效果。

所以!為什么不選第二種!在也不需要self.hidesBottomBarWhenPushed = YES!再也不需要為隱藏和顯示UITabBar頭疼!再也不需要搞各種動畫來處理這個巨坑,你所需要做的只是:在 Tab 頁面切換的時候把導航欄的標題換一下而已。So easy!

言歸正傳

好了,罵完以前天真(sha bi)的日子,感覺爽多了~現在繼續定制 TabBar。

首先,和UITableBarController一樣,先設置TabBarController管理的viewControllers:

UIStoryboard *homeStoryboard = [UIStoryboard storyboardWithName:WDHOMESTORYBOARD bundle:nil];

UIViewController *firstViewController=[homeStoryboard instantiateViewControllerWithIdentifier:WDHOMEVIEWCONTROLLER];

UIStoryboard *clothStoryboard = [UIStoryboard storyboardWithName:WDCLOTHSTORYBOARD bundle:nil];

UIViewController *secondViewController=[clothStoryboard instantiateViewControllerWithIdentifier:WDCLOTHVIEWCONTROLLER];

UIStoryboard *userStoryboard = [UIStoryboard storyboardWithName:WDUSERSTORYBOARD bundle:nil];

UIViewController *thirdViewController=[userStoryboard instantiateViewControllerWithIdentifier:WDLOGINVIEWCONTROLLER];

[self setViewControllers:@[firstViewController, secondViewController,

thirdViewController]];

代碼很簡單,就是從 SB 中加載 3 個ViewController然后放到viewControllers里面去。

然后是關鍵部分,對 TabBar 做定制:

self.tabBar.frame = CGRectMake(0, 0, SCREEN_SIZE.width, 68);

self.tabBar.backgroundColor = [UIColor clearColor];

// tab 圖片

NSArray *tabBarItemImages = @[@"home_icon", @"cloth_icon", @"cloud_icon"];

// tab 標題

NSArray *tabBarItemTitles = @[@"首頁", @"", @"云同步"];

NSInteger index = 0;

for (RDVTabBarItem *item in [[self tabBar] items])

{

if (index == 1) {

[item setBackgroundSelectedImage:[UIImage imageNamed:@"tabbar_bg_image"] withUnselectedImage:[UIImage imageNamed:@"tabbar_bg_image"]];

} else {

[item setBackgroundSelectedImage:[WDImageUtil createImageWithColor:TINT_COLOR] withUnselectedImage:[WDImageUtil createImageWithColor:DARK_COLOR]];

item.itemHeight = 57.0f;

}

UIImage *selectedimage = [UIImage imageNamed:[NSString stringWithFormat:@"%@_selected",[tabBarItemImages objectAtIndex:index]]];

UIImage *unselectedimage = [UIImage imageNamed:[NSString stringWithFormat:@"%@",[tabBarItemImages objectAtIndex:index]]];

[item setFinishedSelectedImage:selectedimage withFinishedUnselectedImage:unselectedimage];

[item setTitle:[tabBarItemTitles objectAtIndex:index]];

item.selectedTitleAttributes = @{

NSFontAttributeName: [UIFont boldSystemFontOfSize:12],

NSForegroundColorAttributeName:[UIColor whiteColor],

};

item.unselectedTitleAttributes = @{

NSFontAttributeName: [UIFont boldSystemFontOfSize:12],

NSForegroundColorAttributeName:[UIColor whiteColor],

};

index++;

}

這里我做了幾件事情:

設置tabBar的frame,設置其高度為凸出 Tab 按鈕的高度,如果不設置的話,凸出 Tab 按鈕會被裁剪掉,如下圖:

vc+52Lz8tcS149Ta09rF0LbPysfV/dbQvOS1xCA8Y29kZT5pdGVtPC9jb2RlPiDKsaOsztLDx9Do0qrJ6NbDy/y1xLGzvrDNvMaszqrKws/Ix9C6w7XEsci9z8zYyuK1xM28xqyjrNXi1cXNvMastcS31rHmwsrOqiAxKjY4o6g2OLy0zqogPGNvZGU+dGFiQmFyPC9jb2RlPiC1xLjftsijqaOsyLu688v8tcTJz8Pm0ruyv7fWysfNuMP3tcSjrM/Cw+bSu7K/t9bM7rPk0dXJq6Osz8LD5tK7sr+31rXEuN+2yM6qIDU3o6zV4rj2uN+2yLrNwe3N4iA8Y29kZT5pdGVtPC9jb2RlPiC1xCA8Y29kZT5pdGVtSGVpZ2h0PC9jb2RlPiDKx9K71sK1xKGj1eK49iA8Y29kZT5pdGVtSGVpZ2h0PC9jb2RlPiC1xNf308PT0MG9uPajujwvcD4NCsno1sPV/bOjIDxjb2RlPml0ZW08L2NvZGU+ILXEuN+2yKOs1eK49rjftsjSu7DjscjNubP2IFRhYiCwtMWltcS437bI0qrQoaOous3WrsewzNjK4s28xqzF5LrPo6zV4rj21K3A7cDtveLPwtOmuMO+zbvhtq6jqaGjDQo8cD7KuSBUYWIg0aHP7tbQtcTSs8Pmz9TKvtX9s6OjrMjnufuyu8no1sPV4rj21rWjrFRhYiDRoc/u1tC1xNKzw+bWu7vhzO6z5LW9zbmz9iBUYWIgsLTFpbalsr+1xM671sOjrNXi0fm+zbvhtObU2tbQvOTB9LDXtcTH6b/2oaPI58/CzbyjujwvcD4NCjxwPjxpbWcgYWx0PQ=="這里寫圖片描述" src="http://www.2cto.com/uploadfile/Collfiles/20160226/2016022609161688.jpg" title="" />

這樣設置好之后就可以達到文章開始時的效果了。

唯一不足就是中間凸起按鈕的背景圖片用了一個比較猥瑣的辦法。如果大家有更科學的辦法可以通過下面的評論告訴我~

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容