iOS两种方式自定义UITabBar

参与了几个项目,基本上都遇到了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

到此就结束了####

<br />结语##

说了这么多,我还是比较喜欢第一种方式,也比较推荐使用第一种方式,代码拷贝过去稍微修改一下就可以用了,相信这一块能给你带来很大的帮助。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容