現(xiàn)如今大多數(shù)的app都會用到tabbar，然后tabbar的創(chuàng)建卻是各種各樣的。下面來做個總結(jié)。閑話不多說，直接上代碼。
一、利用系統(tǒng)自帶的tabbar
首先先設(shè)置圖片，圖片必須得經(jīng)過UIImageRenderingModeAlwaysOriginal處理，否則圖片在選中情況下會被系統(tǒng)渲染，改成藍色。
// 五套圖片
UIImage *homepageImage = [UIImage imageNamed:@"tab_home"];
UIImage *homepageImageSelected = [UIImage imageNamed:@"tab_home_sel"];
homepageImage = [homepageImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
homepageImageSelected = [homepageImageSelected imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *collectionImage = [UIImage imageNamed:@"tab_collect"];
UIImage *collectionImageSelected = [UIImage imageNamed:@"tab_collect_sel"];
collectionImage = [collectionImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
collectionImageSelected = [collectionImageSelected imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *messageImage = [UIImage imageNamed:@"tab_message"];
UIImage *messageImageSelected = [UIImage imageNamed:@"tab_message_sel"];
messageImage = [messageImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
messageImageSelected = [messageImageSelected imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *personalImage = [UIImage imageNamed:@"tab_me"];
UIImage *personalImageSelected = [UIImage imageNamed:@"tab_me_sel"];
personalImage = [personalImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
personalImageSelected = [personalImageSelected imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *searchImage = [UIImage imageNamed:@"tab_search"];
UIImage *searchImageSelected = [UIImage imageNamed:@"tab_search_sel"];
searchImage = [searchImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
searchImageSelected = [searchImageSelected imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
接下去設(shè)置tabbar的自控制器以及屬性，最后添加。舉例：
/*首頁*/
SKNavigationController *home = [[SKNavigationController alloc] initWithRootViewController:[[SKHomeViewController alloc] init]];
[self setupChildControllerWith:home normalImage:homepageImage selectedImage:homepageImageSelected title:@"首頁"];
為了方便可以自己寫一個方法來完成這個任務(wù)。
- (void)setupChildControllerWith:(UIViewController *)childViewController normalImage:(UIImage *)normalImage selectedImage:(UIImage *)selectedImage title:(NSString *)title
{
childViewController.tabBarItem.title = title;
childViewController.tabBarItem.image = normalImage;
childViewController.tabBarItem.selectedImage = selectedImage;
[self addChildViewController:childViewController];
}
效果如圖
屏幕快照 2016-09-19 下午9.32.45.png
仔細看會發(fā)現(xiàn)一個問題，那就是首頁選中的時候，字體的顏色和app的風(fēng)格顏色不一致，不美觀，解決這個問題的方法是添加以下代碼
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor blackColor], NSForegroundColorAttributeName, nil] forState:UIControlStateNormal];
[[UITabBarItem appearance] setTitleTextAttributes:
[NSDictionary dictionaryWithObjectsAndKeys:[UIColor redColor],NSForegroundColorAttributeName, nil]forState:UIControlStateSelected];
效果圖：
屏幕快照 2016-09-19 下午9.33.09.png
顯然根據(jù)代碼也可知道同時可以更改字體大小之類的其他屬性
然而有些小清新的app不需要下面的label，直接是一個圖標(biāo)，例如這樣：
屏幕快照 2016-09-19 下午9.34.05.png
解決方法就是修改下面的方法并不傳title屬性
- (void)setupChildControllerWith:(UIViewController *)childViewController normalImage:(UIImage *)normalImage selectedImage:(UIImage *)selectedImage title:(NSString *)title
{
childViewController.tabBarItem.title = title;
childViewController.title = title;
childViewController.tabBarItem.image = normalImage;
childViewController.tabBarItem.selectedImage = selectedImage;
// 加一行，移動image的位置
childViewController.tabBarItem.imageInsets = UIEdgeInsetsMake(7.0, 0, - 7.0, 0);
[self addChildViewController:childViewController];
}
二、利用數(shù)組的enumerateObjectsUsingBlock方法設(shè)置tabbar屬性
代碼如下
NSArray *childItemsArray = @[
@{kClassKey : @"MXHomeViewController",
kTitleKey : @"首頁",
kImgKey : @"tab_button_home_nor",
kSelImgKey : @"tab_button_home_sel"},
@{kClassKey : @"MXMapViewController",
kTitleKey : @"地圖",
kImgKey : @"tab_button_map_nor",
kSelImgKey : @"tab_button_map_sel"},
@{kClassKey : @"MXTimeLineViewController",
kTitleKey : @"行圈",
kImgKey : @"tab_button_discover_nor",
kSelImgKey : @"tab_button_discover_sel"},
@{kClassKey : @"MXMineViewController",
kTitleKey : @"我的",
kImgKey : @"tab_button_me_nor",
kSelImgKey : @"tab_button_me_sel"} ];
[childItemsArray enumerateObjectsUsingBlock:^(NSDictionary *dict, NSUInteger idx, BOOL *stop) {
UIViewController *vc = [NSClassFromString(dict[kClassKey]) new];
vc.title = dict[kTitleKey];
MXBaseNavigationController *nav = [[MXBaseNavigationController alloc] initWithRootViewController:vc];
UITabBarItem *item = nav.tabBarItem;
item.title = dict[kTitleKey];
item.image = [UIImage imageNamed:dict[kImgKey]];
item.selectedImage = [[UIImage imageNamed:dict[kSelImgKey]] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[item setTitleTextAttributes:@{NSForegroundColorAttributeName : Global_tintColor} forState:UIControlStateSelected];
[self addChildViewController:nav];
}];
當(dāng)然，kClassKey等四個是我自己寫的宏。
三、自定義tabbar
首先新建一個tabbar，繼承自UITabBar，然后在tabbar上add需要的按鈕來充當(dāng)tabbarButton
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
UIButton *leftViewBtn = [[UIButton alloc] init];
[leftViewBtn setTitle:@"鑰匙" forState:UIControlStateNormal];
[leftViewBtn setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
[leftViewBtn setTitleColor:[UIColor orangeColor] forState:UIControlStateHighlighted];
[leftViewBtn addTarget:self action:@selector(buttonDidClick:) forControlEvents:UIControlEventTouchUpInside];
leftViewBtn.tag = 0;
[self addSubview:leftViewBtn];
self.leftViewBtn = leftViewBtn;
UIButton *openBtn = [[UIButton alloc] init];
[openBtn setTitle:@"開鎖" forState:UIControlStateNormal];
[openBtn setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
[openBtn setTitleColor:[UIColor orangeColor] forState:UIControlStateSelected];
[openBtn addTarget:self action:@selector(buttonDidClick:) forControlEvents:UIControlEventTouchUpInside];
openBtn.tag = 1;
[self addSubview:openBtn];
self.openBtn = openBtn;
UIButton *shareBtn = [[UIButton alloc] init];
[shareBtn setTitle:@"分享" forState:UIControlStateNormal];
[shareBtn setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
[shareBtn setTitleColor:[UIColor orangeColor] forState:UIControlStateSelected];
[shareBtn addTarget:self action:@selector(buttonDidClick:) forControlEvents:UIControlEventTouchUpInside];
shareBtn.tag = 2;
[self addSubview:shareBtn];
self.shareBtn = shareBtn;
}
return self;
}
在layoutSubviews里面重寫位置
- (void)layoutSubviews
{
[super layoutSubviews];
[self setTabBarButtonFrame];
[self setleftViewBtnFrame];
}
//設(shè)置所有TabbarItem的frame
- (void)setTabBarButtonFrame
{
//遍歷所有的button
for (UIView *tabbarButton in self.subviews) {
if (![tabbarButton isKindOfClass:NSClassFromString(@"UITabBarButton")]) continue;
// 隱藏系統(tǒng)的tabbarButton
tabbarButton.hidden = YES;
}
}
//設(shè)置leftViewBtn的frame
- (void)setleftViewBtnFrame
{
self.leftViewBtn.frame = CGRectMake(0, 0, self.width/3, self.height);
self.openBtn.frame = CGRectMake(self.width/3, 0, self.width/3, self.height);
self.shareBtn.frame = CGRectMake(self.width/3 + self.width/3, 0, self.width/3, self.height);
}
這樣，自定義的tabbar就完成了，回到tabbarController中，更改tabbar
YQTabBarView *tabbar = [[YQTabBarView alloc] init];
tabbar.tabBarDelegate = self;
[self setValue:tabbar forKeyPath:@"tabBar"];
當(dāng)然，由于是自定義的，所以我們需要寫代理方法，這樣才能使控制器知道點了哪一個按鈕，才能切換相應(yīng)的控制器。
代理方法以及點擊按鈕回應(yīng)如下
@class YQTabBarView;
@protocol YQTabBarViewDelegate <NSObject>
- (void)tabBar:(YQTabBarView *)tabBar didSelectButtonFrom:(NSUInteger)from to:(NSUInteger)to;
@end
- (void)buttonDidClick:(UIButton *)btn
{
// 如果按到的是鑰匙，
if ([self.tabBarDelegate respondsToSelector:@selector(tabBar:didSelectButtonFrom:to:)]) {
[self.tabBarDelegate tabBar:self didSelectButtonFrom:self.selecedBtn.tag to:btn.tag];
}
self.selecedBtn.selected = NO;
btn.selected = YES;
self.selecedBtn = btn;
}
}
效果如下，可以加上圖片然后更改按鈕的image和titlelabel的位置
屏幕快照 2016-09-19 下午10.16.56.png
