簡(jiǎn)介
UITabBarController - 選項(xiàng)卡控制器，與導(dǎo)航控制器一樣奋刽，也被廣泛用于各種ios應(yīng)用程序瓦侮。顧名思義，選項(xiàng)卡控制器在屏幕底部顯示一系列“選顯卡”佣谐，這些選項(xiàng)卡表示為圖標(biāo)和文本肚吏，用戶觸摸它們將在不同的場(chǎng)景間切換。和UINavigationController類似狭魂，UITabBarController也可以用來(lái)控制多個(gè)頁(yè)面導(dǎo)航罚攀，用戶可以在多個(gè)視圖控制器之間移動(dòng)，并可以定制屏幕底部的選項(xiàng)卡欄雌澄。
借助屏幕底部的選項(xiàng)卡欄斋泄，UITabBarController不必像UINavigationController那樣以棧的方式推入和推出視圖，而是建立一系列的控制器（這些控制器可以是UIViewController镐牺、UINavigationController炫掐、UITableViewController等）并將它們添加到選項(xiàng)卡欄，使每個(gè)選項(xiàng)卡對(duì)應(yīng)一個(gè)控制器睬涧。每個(gè)場(chǎng)景都呈現(xiàn)了應(yīng)用程序的一項(xiàng)功能募胃，或是提供了一種查看應(yīng)用程序的獨(dú)特方式旗唁。UITabBarController是iOS中很常用的一個(gè)viewController,例如系統(tǒng)的鬧鐘程序等，QQ也是用的UITabBarController痹束。UITabBarController通常作為整個(gè)程序的rootViewController检疫，而且不能添加到別的container viewController中。
UITabBarController的View層級(jí)圖
與導(dǎo)航控制器一樣祷嘶，選項(xiàng)卡控制器會(huì)為我們處理一切屎媳。當(dāng)用戶觸摸按鈕時(shí)會(huì)在場(chǎng)景之間進(jìn)行切換，我們無(wú)需以編程的方式處理選項(xiàng)卡欄事件论巍，也無(wú)需手工在視圖控制器之間切換烛谊。
UITabBarController的使用步驟
- 初始化UITabBarController控制器
- 設(shè)置UIwindow的rootViewController為這個(gè)UITabBarController
- 在UITabBarController中添加子控制器
示例代碼
#import "AppDelegate.h"
@interface AppDelegate ()
@end
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// 創(chuàng)建窗口
self.window = [[UIWindow alloc]init];
self.window.frame = [UIScreen mainScreen].bounds;
// 設(shè)置窗口的跟控制器
UITabBarController * tabbarVC = [[UITabBarController alloc]init];
// 添加子控制器
UIViewController * VC01 = [[UIViewController alloc]init];
// 設(shè)置標(biāo)題
VC01.tabBarItem.title = @"精華";
// 設(shè)置默認(rèn)圖片
VC01.tabBarItem.image = [UIImage imageNamed:@"tabBar_essence_icon"];
// 設(shè)置選中圖片
VC01.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_essence_click_icon"];
VC01.view.backgroundColor = [UIColor yellowColor];
[tabbarVC addChildViewController:VC01];
UIViewController * VC02 = [[UIViewController alloc]init];
VC02.tabBarItem.title = @"新帖";
VC02.tabBarItem.image = [UIImage imageNamed:@"tabBar_new_icon"];
VC02.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_new_click_icon"];
VC02.view.backgroundColor = [UIColor redColor];
[tabbarVC addChildViewController:VC02];
UIViewController * VC03 = [[UIViewController alloc]init];
VC03.tabBarItem.title = @"關(guān)注";
VC03.tabBarItem.image = [UIImage imageNamed:@"tabBar_friendTrends_icon"];
VC03.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_friendTrends_click_icon"];
VC03.view.backgroundColor = [UIColor blueColor];
[tabbarVC addChildViewController:VC03];
UIViewController * VC04 = [[UIViewController alloc]init];
VC04.tabBarItem.title = @"我";
VC04.tabBarItem.image = [UIImage imageNamed:@"tabBar_me_icon"];
VC04.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_me_click_icon"];
VC04.view.backgroundColor = [UIColor greenColor];
[tabbarVC addChildViewController:VC04];
self.window.rootViewController = tabbarVC;
// 顯示窗口
[self.window makeKeyAndVisible];
return YES;
}
效果圖
但是這樣在appdelegate里面進(jìn)行設(shè)置會(huì)有很多缺點(diǎn)：
- 底部tabbaritem都是默認(rèn)的藍(lán)色
- 添加子控制器的代碼暴露在了外面
以自定義的方式實(shí)現(xiàn)UITabBarController
步驟：
- 新建一個(gè)繼承自UITabBarController的子類
- 將這個(gè)子類設(shè)置為根控制器
- 在這個(gè)子類里面實(shí)現(xiàn)添加子控制器的方法
但是在這種情況下因?yàn)橛邢到y(tǒng)默認(rèn)的藍(lán)色渲染，會(huì)導(dǎo)致選中圖標(biāo)selectedImage不是圖片原來(lái)的樣子环壤，可以通過(guò)以下兩種方式解決：
- 方法1：設(shè)置選中圖片的渲染模式
// 添加子控制器
UIViewController * VC01 = [[UIViewController alloc]init];
// 設(shè)置標(biāo)題
VC01.tabBarItem.title = @"精華";
// 設(shè)置默認(rèn)圖片
VC01.tabBarItem.image = [UIImage imageNamed:@"tabBar_essence_icon"];
UIImage * image = [UIImage imageNamed:@"tabBar_essence_click_icon"];
// 設(shè)置渲染模式 - 保持原始的渲染
image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
// 設(shè)置選中圖片
VC01.tabBarItem.selectedImage =image;
VC01.view.backgroundColor = [UIColor yellowColor];
[self addChildViewController:VC01]
-
方法2：直接在圖片文件夾的屬性里面進(jìn)行設(shè)置 - 將render as設(shè)置成original image
由于文字和圖片一樣是默認(rèn)的藍(lán)色，所以也要進(jìn)行設(shè)置才能達(dá)到自己想要的效果
方案一：通過(guò)setTitleTextAttributes屬性設(shè)置(但是這個(gè)方法很麻煩钞诡，每次設(shè)置的時(shí)候都需要寫(xiě)很多代碼)
- setTitleTextAttributes設(shè)置的時(shí)候是通過(guò)字典設(shè)置的郑现，所以先搞一個(gè)字典
// 添加子控制器
UIViewController * VC01 = [[UIViewController alloc]init];
// 設(shè)置標(biāo)題
VC01.tabBarItem.title = @"精華";
// 設(shè)置默認(rèn)圖片
VC01.tabBarItem.image = [UIImage imageNamed:@"tabBar_essence_icon"];
//設(shè)置選中圖片
VC01.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_essence_click_icon"];
// 設(shè)置文字屬性
NSMutableDictionary * attrs = [NSMutableDictionary dictionary];
attrs[NSFontAttributeName] = [UIFont systemFontOfSize:12.0];
// 設(shè)置文字的前景色
attrs[NSForegroundColorAttributeName] = [UIColor darkGrayColor];
[VC01.tabBarItem setTitleTextAttributes:attrs forState:UIControlStateNormal];
VC01.view.backgroundColor = [UIColor yellowColor];
[self addChildViewController:VC01];
優(yōu)化方案(appearance)
- 由于文字屬性每次設(shè)置的時(shí)候代碼很多很煩，所以要進(jìn)行簡(jiǎn)化
- 當(dāng)方法方法后面有UI_APPERANCE宏的時(shí)候荧降，就可以通過(guò)appearance對(duì)象一次性設(shè)置
- (void)setTitleTextAttributes:(nullable NSDictionary<NSString *,id> *)attributes forState:(UIControlState)state NS_AVAILABLE_IOS(5_0) UI_APPEARANCE_SELECTOR;
- 步驟：
- 拿到那個(gè)item的apperance
- 對(duì)這個(gè)item進(jìn)行設(shè)置接箫、
- 之后所有的item都會(huì)是這個(gè)屬性
- (void)viewDidLoad {
[super viewDidLoad];
// 通過(guò)appearance統(tǒng)一設(shè)置UITabbarItem的文字屬性
NSMutableDictionary * attrs = [NSMutableDictionary dictionary];
attrs[NSFontAttributeName] = [UIFont systemFontOfSize:12.0]; // 設(shè)置文字大小
attrs[NSForegroundColorAttributeName] = [UIColor grayColor]; // 設(shè)置文字的前景色
NSMutableDictionary * selectedAttrs = [NSMutableDictionary dictionary];
selectedAttrs[NSFontAttributeName] = attrs[NSFontAttributeName];
selectedAttrs[NSForegroundColorAttributeName] = [UIColor darkGrayColor];
UITabBarItem * item = [UITabBarItem appearance]; // 設(shè)置appearance
[item setTitleTextAttributes:attrs forState:UIControlStateNormal];
[item setTitleTextAttributes:selectedAttrs forState:UIControlStateSelected];
// 添加子控制器
UIViewController * VC01 = [[UIViewController alloc]init];
// 設(shè)置標(biāo)題
VC01.tabBarItem.title = @"精華";
// 設(shè)置默認(rèn)圖片
VC01.tabBarItem.image = [UIImage imageNamed:@"tabBar_essence_icon"];
//設(shè)置選中圖片
VC01.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_essence_click_icon"];
[VC01.tabBarItem setTitleTextAttributes:attrs forState:UIControlStateNormal];
VC01.view.backgroundColor = [UIColor yellowColor];
[self addChildViewController:VC01];
UIViewController * VC02 = [[UIViewController alloc]init];
VC02.tabBarItem.title = @"新帖";
VC02.tabBarItem.image = [UIImage imageNamed:@"tabBar_new_icon"];
VC02.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_new_click_icon"];
VC02.view.backgroundColor = [UIColor redColor];
[self addChildViewController:VC02];
UIViewController * VC03 = [[UIViewController alloc]init];
VC03.tabBarItem.title = @"關(guān)注";
VC03.tabBarItem.image = [UIImage imageNamed:@"tabBar_friendTrends_icon"];
VC03.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_friendTrends_click_icon"];
VC03.view.backgroundColor = [UIColor blueColor];
[self addChildViewController:VC03];
UIViewController * VC04 = [[UIViewController alloc]init];
VC04.tabBarItem.title = @"我";
VC04.tabBarItem.image = [UIImage imageNamed:@"tabBar_me_icon"];
VC04.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_me_click_icon"];
VC04.view.backgroundColor = [UIColor greenColor];
[self addChildViewController:VC04];
}
封裝 - 封裝添加自定義子控制器的方法
- 由于自定義子控制器的代碼很相似，所以可以進(jìn)行抽取
- (void)viewDidLoad {
[super viewDidLoad];
// 通過(guò)appearance統(tǒng)一設(shè)置UITabbarItem的文字屬性
NSMutableDictionary * attrs = [NSMutableDictionary dictionary];
attrs[NSFontAttributeName] = [UIFont systemFontOfSize:12.0]; // 設(shè)置文字大小
attrs[NSForegroundColorAttributeName] = [UIColor grayColor]; // 設(shè)置文字的前景色
NSMutableDictionary * selectedAttrs = [NSMutableDictionary dictionary];
selectedAttrs[NSFontAttributeName] = attrs[NSFontAttributeName];
selectedAttrs[NSForegroundColorAttributeName] = [UIColor darkGrayColor];
UITabBarItem * item = [UITabBarItem appearance]; // 設(shè)置appearance
[item setTitleTextAttributes:attrs forState:UIControlStateNormal];
[item setTitleTextAttributes:selectedAttrs forState:UIControlStateSelected];
// 添加子控制器
[self setupChildVC:@"精華" andImage:@"tabBar_essence_icon" andSelectImage:@"tabBar_essence_click_icon"];
[self setupChildVC:@"新帖" andImage:@"tabBar_new_icon" andSelectImage:@"tabBar_new_click_icon"];
[self setupChildVC:@"關(guān)注" andImage:@"tabBar_friendTrends_icon" andSelectImage:@"tabBar_friendTrends_click_icon"];
[self setupChildVC:@"我" andImage:@"tabBar_me_icon" andSelectImage:@"tabBar_me_click_icon"];
}
/**
* 初始化子控制器
*/
- (void)setupChildVC:(NSString * )title andImage:(NSString * )image andSelectImage:(NSString *)selectImage{
UIViewController * VC = [[UIViewController alloc]init];
VC.tabBarItem.title = title;
VC.tabBarItem.image = [UIImage imageNamed:image];
VC.tabBarItem.selectedImage = [UIImage imageNamed:selectImage];
VC.view.backgroundColor = [UIColor greenColor];
[self addChildViewController:VC];
}
自定義底部tabbar樣式
通過(guò)上面的方法設(shè)置之后tabbar的樣式
如果想要在這個(gè)tabbar上面添加一個(gè)按鈕(注意不是item朵诫，tabbaritem是圖片在上辛友，文字在下的格式)，這個(gè)按鈕和item樣式不一樣剪返，占據(jù)了和item上文字加上圖片的大小废累。由于添加到tabbar上面的item是從左到右順序排列的，如果是直接添加一個(gè)item脱盲，那么不能達(dá)到我們想要的樣式（當(dāng)然邑滨，如果你是添加一個(gè)item的話，直接按照以前的方法就行了）钱反，這個(gè)時(shí)候可以通過(guò)自定義tabbar來(lái)實(shí)現(xiàn)掖看。
想要實(shí)現(xiàn)的效果
- 由于tabbar是read-only屬性，所以只能通過(guò)KVC模式跟換tabbar
步驟：
- 新建一個(gè)繼承自UITabbar的類
- 在這個(gè)類里面實(shí)現(xiàn)初始化
- 在
layoutSubviews方法里面重新布局 - 在TabbarController里面跟換tabbar
- 雖然我們?cè)赥abbarController里面換成了自定義的tabbar面哥，但是因?yàn)檫@個(gè)tabbar繼承自u(píng)itabbar哎壳，所以它原來(lái)的屬性和內(nèi)容還在
#import "LMHTabbar.h"
@interface LMHTabbar()
/** 發(fā)布按鈕 */
@property (nonatomic, weak) UIButton * publishBtn;
@end
@implementation LMHTabbar
/**
* 初始化
*/
- (instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
// 設(shè)置tabbar的子控件
UIButton * publishBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[publishBtn setBackgroundImage:[UIImage imageNamed:@"tabBar_publish_icon"] forState:UIControlStateNormal];
[publishBtn setBackgroundImage:[UIImage imageNamed:@"tabBar_publish_click_icon"] forState:UIControlStateHighlighted];
[publishBtn sizeToFit];
[self addSubview:publishBtn];
self.publishBtn = publishBtn;
}
return self;
}
/**
* 重寫(xiě)布局子控件的方法進(jìn)行布局
*/
- (void)layoutSubviews{
[super layoutSubviews];
CGFloat width = self.frame.size.width;
CGFloat height = self.frame.size.height;
// 設(shè)置發(fā)布按鈕的frame
self.publishBtn.center = CGPointMake(width * 0.5, height * 0.5);
// 設(shè)置其他的UITabBar的frame
CGFloat buttonY = 0;
CGFloat buttonW = width /5;
CGFloat buttonH = height;
NSInteger index = 0;
for (UIView * button in self.subviews) {
// 判斷 - 只有是UITabBarButton的button才進(jìn)行布局（也就是tabbar上面的精華、新帖尚卫、關(guān)注归榕、我這四個(gè)按鈕） 而發(fā)布按鈕不是UITabBarButton，就不進(jìn)行布局
// 由于UITabBar是蘋(píng)果官方私有的吱涉， 所以不能直接設(shè)置
if (![button isKindOfClass:NSClassFromString(@"UITabBarButton")]) continue;
// 計(jì)算按鈕的x值
CGFloat buttonX = buttonW * ((index > 1) ? (index + 1): (index));
button.frame = CGRectMake(buttonX, buttonY, buttonW, buttonH);
// 索引增加
index ++;
}
}
@end
