iOS两种方式自定义UITabBar

参与了几个项目，基本上都遇到了UITabBar这种设计，项目视图的主框架也是从这里开始的，下面我就给整理了自定义UITabBar几种方式，以备后用。

Snip20160624_1.png

方式一：传统的给UITabBar添加子视图##

第一步：新建一个类继承UITabBarController####

#import 

@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

第三步：没有第三步了，就是这么简单，不过还是说明一下，我这里给每个子视图添加了导航栏控制器，我相信细看代码你就会明白视图的结构了。

方式二：给UITabBar上盖一个UIView然后添加按钮##

第一步：新建一个类继承UITabBarController####

#import 

@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

到此就结束了####

结语##

说了这么多，我还是比较喜欢第一种方式，也比较推荐使用第一种方式，代码拷贝过去稍微修改一下就可以用了，相信这一块能给你带来很大的帮助。