iOS两种方式自定义UITabBar
2016-06-24 本文已影响1718人
Snoopy008
参与了几个项目，基本上都遇到了UITabBar这种设计，项目视图的主框架也是从这里开始的，下面我就给整理了自定义UITabBar几种方式，以备后用。
Snip20160624_1.png
方式一：传统的给UITabBar添加子视图##
<br />第一步：新建一个类继承UITabBarController####
#import <UIKit/UIKit.h>
@interface RZMainPageTabBarController : UITabBarController
@end
第二步：设置UITabBar####
#import "RZMainPageTabBarController.h"
#import "RZHomeViewController.h"
#import "RZCreatViewController.h"
#import "RZSearchViewController.h"
#import "RZMyViewController.h"
#import "RZNavigationController.h"
@interface RZMainPageTabBarController ()
@end
@implementation RZMainPageTabBarController
- (void)viewDidLoad
{
[super viewDidLoad];
self.tabBar.backgroundColor = [UIColor whiteColor];
RZHomeViewController *homeVC = [[RZHomeViewController alloc] init];
[self addChildVC:homeVC title:@"首页" imageMainName:@"1" NavTitle:@"首页"];
RZCreatViewController *creatVC = [[RZCreatViewController alloc] init];
[self addChildVC:creatVC title:@"创建" imageMainName:@"2" NavTitle:@"创建"];
RZSearchViewController *searchVC = [[RZSearchViewController alloc] init];
[self addChildVC:searchVC title:@"搜索" imageMainName:@"3" NavTitle:@"项目查询"];
RZMyViewController *myVC = [[RZMyViewController alloc] init];
[self addChildVC:myVC title:@"我的" imageMainName:@"4" NavTitle:@"我的"];
}
/**
* 创建TabBar子视图控制器
*
* @param childVC 视图控制器
* @param title tabbar标题
* @param imageMainName 图片核心名
* @param navTitle 导航栏标题
*/
- (void)addChildVC:(UIViewController *)childVC title:(NSString *)title imageMainName:(NSString *)imageMainName NavTitle:(NSString *)navTitle
{
childVC.tabBarItem.title = title;
childVC.navigationItem.title = navTitle;
NSString *imageName = [NSString stringWithFormat:@"tab_%@",imageMainName];
childVC.tabBarItem.image = [UIImage imageNamed:imageName];
NSString *selectedImageName = [NSString stringWithFormat:@"tab_%@_hlight",imageMainName];
childVC.tabBarItem.selectedImage = [[UIImage imageNamed:selectedImageName] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
NSMutableDictionary *textAttrs = [NSMutableDictionary dictionary];
textAttrs[NSForegroundColorAttributeName] = [UIColor grayColor];
textAttrs[NSFontAttributeName] = [UIFont systemFontOfSize:12];
[childVC.tabBarItem setTitleTextAttributes:textAttrs forState:UIControlStateNormal];
NSMutableDictionary *selectTextAttrs = [NSMutableDictionary dictionary];
selectTextAttrs[NSForegroundColorAttributeName] = UIColorFromRGB(0x660000);
selectTextAttrs[NSFontAttributeName] = [UIFont systemFontOfSize:12];
[childVC.tabBarItem setTitleTextAttributes:selectTextAttrs forState:UIControlStateSelected];
RZNavigationController *nav = [[RZNavigationController alloc] initWithRootViewController:childVC];
[self addChildViewController:nav];
}
@end
<br />第三步：没有第三步了，就是这么简单，不过还是说明一下，我这里给每个子视图添加了导航栏控制器，我相信细看代码你就会明白视图的结构了。
<br />方式二：给UITabBar上盖一个UIView然后添加按钮##
<br />第一步：新建一个类继承UITabBarController####
#import <UIKit/UIKit.h>
@interface RZMainPageTabBarController : UITabBarController
@end
第二步：设置UITabBar并盖一个UIView####
#import "CXBusTabBarController.h"
#import "CXRouteViewController.h"
#import "CXStationViewController.h"
#import "CXTransferViewController.h"
#import "CXCollectionViewController.h"
#import "CXTabBarButton.h"
@implementation CXBusTabBarController
{
UIImageView *tabbarBG;
NSMutableArray *btnArr;
}
- (void)viewDidLoad
{
[super viewDidLoad];
btnArr = [NSMutableArray array];
self.navigationItem.title = @"实时公交";
CXRouteViewController *route = [[CXRouteViewController alloc] init];
[self addChildViewController:route];
CXStationViewController *station = [[CXStationViewController alloc] init];
[self addChildViewController:station];
CXTransferViewController *transfer = [[CXTransferViewController alloc] init];
[self addChildViewController:transfer];
CXCollectionViewController *collection = [[CXCollectionViewController alloc] init];
[self addChildViewController:collection];
[self loadCustomTabControllers];
}
- (void)loadCustomTabControllers
{
tabbarBG = [[UIImageView alloc]initWithFrame:CGRectMake(0,SCREEN_HEIGHT - 49, SCREEN_WIDTH, 49)];
tabbarBG.userInteractionEnabled = YES;
[self.view addSubview:tabbarBG];
float viewNum = 4;
float buttonW = SCREEN_WIDTH / viewNum;
for (int index = 0; index < viewNum; index++) {
CXTabBarButton *button = [CXTabBarButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(buttonW * index, 0, buttonW, 49);
button.tag = index;
if (index == 0) {
button.selected = YES;
}else{
button.selected = NO;
}
NSString *imageName = [NSString stringWithFormat:@"TabBar%d",index + 1];
[button setBackgroundImage:[UIImage imageNamed:imageName] forState:UIControlStateNormal];
NSString *selImageName = [NSString stringWithFormat:@"TabBar%dSel",index + 1];
[button setBackgroundImage:[UIImage imageNamed:selImageName] forState:UIControlStateSelected];
[tabbarBG addSubview:button];
[btnArr addObject:button];
[button addTarget:self action:@selector(changeViewController:) forControlEvents:UIControlEventTouchDown];
}
}
- (void)changeViewController:(UIButton *)button
{
for (UIButton *btn in btnArr) {
btn.selected = NO;
}
self.selectedIndex = button.tag;
button.selected = !button.selected;
}
- (void)showTabBar
{
tabbarBG.hidden = NO;
}
- (void)hiddenTabBar
{
tabbarBG.hidden = YES;
}
@end
