UITabBarController自定义标签栏

UITabBarController自带的标签栏样式太过单一，很多时候都需要我们去自定义标签栏。对于自定义标签栏，比较常见的有两种方法：

   1、扩展UIViewController,自已用代码构造出一个标签栏控制器，然后定制tabBar。

   2、隐藏UITabBarController自带的标签栏，自己用UIView定制一个tabBar。

用第1种方法定制，如果想要在性能上和表现上都很接近UITabBarController，难度较大。索性网络上有很多这样的demo。我们只要拿来用就可以了。例如：http://code4app.com/ios/AKTabBarController/510892996803faf06b000000

本文所要讲解的是用第2种方法实现标签栏定制(源码)。下图是工程整体结构：

最为标准的做法，我们会在工程的AppDelegate文件中实例化标签栏控制器，然后为它的viewControllers属性赋值，接着就着手定制标签栏。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];    // Override point for customization after application launch.    self.viewController = [[[UITabBarController alloc] init] autorelease];    FirstViewController *first = [[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil];    SecondViewController *second = [[SecondViewController alloc] initWithNibName:@"SecondViewController" bundle:nil];    ThirdViewController *third = [[ThirdViewController alloc] initWithNibName:@"ThirdViewController" bundle:nil];    FourthViewController *fourth = [[FourthViewController alloc] initWithNibName:@"FourthViewController" bundle:nil];    FifthViewController *fifth = [[FifthViewController alloc] initWithNibName:@"FifthViewController" bundle:nil];    UINavigationController *firstNav = [[UINavigationController alloc] initWithRootViewController:first];    UINavigationController *secondNav = [[UINavigationController alloc] initWithRootViewController:second];    UINavigationController *thirdNav = [[UINavigationController alloc] initWithRootViewController:third];    UINavigationController *fourthNav = [[UINavigationController alloc] initWithRootViewController:fourth];    UINavigationController *fifthNav = [[UINavigationController alloc] initWithRootViewController:fifth];    self.viewController.viewControllers = [NSArray arrayWithObjects:firstNav,secondNav,thirdNav,fourthNav,fifthNav, nil];    [first release];    [second release];    [third release];    [fourth release];    [fifth release];    [firstNav release];    [secondNav release];    [thirdNav release];    [fourthNav release];    [fifthNav release];    /* 自定义标签栏 */    self.customTabBar = [[[CustomTabBar alloc] init] autorelease];    self.customTabBar.tabBarController = self.viewController;    [self.customTabBar custom];        self.window.rootViewController = self.viewController;    [self.window makeKeyAndVisible];    return YES;}

       上面的代码中，我们创建了一个有5个标签的标签栏控制器,然后我们开始定制它的标签栏。你会注意到，工程中把所有定制标签栏的代码都封装进了CustomTabBar类。等到需要我们定制的时候，只要实例化CustomTabBar，然后初始化它的tabController属性，最后调用它的custom:方法就可以实现定制。你也许会问，既然要封装这些代码，为什么不选择将它们封装进UITabBarController的子类中呢？原因是苹果的官方文档不提倡我们子类化UITabBarController，考虑到此，故创建了一个继承自NSObject的类，来封装自定义标签栏的所有操作。到时候我们只要简单地调用一个接口就可以实现自定义标签栏。是不是很方便呢。下面是CustomTabBar类的实现:

CustomTabBar.h

#import <Foundation/Foundation.h>@interface CustomTabBar : NSObject@property (nonatomic,retain) UITabBarController *tabBarController;   // 要定制标签栏的标签栏控制器，比须先为它赋值@property (nonatomic,retain) NSArray *items;@property (nonatomic,retain) UIImage *tabBarBgImage;@property (nonatomic,retain) UIView *customTabBar;@property (nonatomic,assign) NSInteger nowSelected;@property (nonatomic,assign) NSInteger lastSelected;- (void)custom;                  // 自定义标签栏- (void)hideRealTabBar;          // 隐藏自带的标签栏- (void)configTabBar;            // 配置标签按钮图片、标题- (void)createTabBar;            // 创建自定义的tabBar- (void)tabBarButtonClicked:(id)sender;   // 标签栏按钮点击时间回调@end

CustomTabBar.m

#import "CustomTabBar.h"#import "YXItem.h"@implementation CustomTabBar@synthesize items,tabBarBgImage,customTabBar,nowSelected,lastSelected,tabBarController;#pragma mark - #pragma mark Custom TabBar// 自定义标签栏- (void)custom{    if (tabBarController) {        [self hideRealTabBar];    // 隐藏自带的标签栏        [self configTabBar];      // 配置自定义的标签栏        [self createTabBar];      // 创建自定义的标签栏    }    else {        NSLog(@"请先为tabBarController属性赋值");    }} // 隐藏自带的标签栏- (void)hideRealTabBar{    for(UIView *view in tabBarController.view.subviews){if([view isKindOfClass:[UITabBar class]]){view.hidden = YES;break;}}}// 配置标签栏，可以根据实际情况更改配置数据- (void)configTabBar{    self.tabBarBgImage = [[UIImage imageNamed:@"tabbar_Bg.png"]resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0) resizingMode:UIImageResizingModeTile];    UIImage *bgImage = [UIImage imageNamed:@"tabBar_BtnBg.png"];    YXItem *item1 = [[YXItem alloc] init];    item1.title = @"star";    item1.iconNormal = [UIImage imageNamed:@"tabBar_icon.png"];    item1.iconSelected = [UIImage imageNamed:@"tabBar_icon.png"];    item1.bgImage = bgImage;    YXItem *item2 = [[YXItem alloc] init];    item2.title = @"star";    item2.iconNormal = [UIImage imageNamed:@"tabBar_icon.png"];    item2.iconSelected = [UIImage imageNamed:@"tabBar_icon.png"];    item2.bgImage = bgImage;    YXItem *item3 = [[YXItem alloc] init];    item3.title = @"star";    item3.iconNormal = [UIImage imageNamed:@"tabBar_icon.png"];    item3.iconSelected = [UIImage imageNamed:@"tabBar_icon.png"];    item3.bgImage = bgImage;    YXItem *item4 = [[YXItem alloc] init];    item4.title = @"star";    item4.iconNormal = [UIImage imageNamed:@"tabBar_icon.png"];    item4.iconSelected = [UIImage imageNamed:@"tabBar_icon.png"];    item4.bgImage = bgImage;    YXItem *item5 = [[YXItem alloc] init];    item5.title = @"star";    item5.iconNormal = [UIImage imageNamed:@"tabBar_icon.png"];    item5.iconSelected = [UIImage imageNamed:@"tabBar_icon.png"];    item5.bgImage = bgImage;    self.items = [NSMutableArray arrayWithObjects:item1, item2, item3, item4, item5, nil];    [item1 release];    [item2 release];    [item3 release];    [item4 release];    [item5 release];}// 代码创建标签栏- (void)createTabBar{    self.customTabBar = [[[UIView alloc] initWithFrame:CGRectMake(0.0f, tabBarController.view.frame.size.height - 49.0f, 320.0f, 49.0f)] autorelease];    UIImageView *bg = [[UIImageView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, self.customTabBar.frame.size.width, self.customTabBar.frame.size.height)];    bg.image = tabBarBgImage;    bg.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;    [customTabBar addSubview:bg];    [bg release], bg = nil;    NSInteger num = items.count;    NSInteger buttonWidth = ceil(self.customTabBar.frame.size.width/num);    for (int i = 0; i < num; i ++)    {        float frame_x;        YXItem *item = [items objectAtIndex:i];        frame_x = i * buttonWidth;        if (i == num - 1) {            buttonWidth = self.customTabBar.frame.size.width - frame_x;        }        // 创建button        UIButton *btnItem = [UIButton buttonWithType:UIButtonTypeCustom];        btnItem.frame = CGRectMake(frame_x, 0.0f, buttonWidth, self.customTabBar.frame.size.height);        btnItem.contentEdgeInsets = UIEdgeInsetsMake(8, 17, 13, 17);  // 设置icon大小        btnItem.tag = 10000 + i;        [btnItem setImage:item.iconNormal forState:UIControlStateNormal];         // normal        [btnItem setImage:item.iconSelected forState:UIControlStateHighlighted];  // highlighted        [btnItem setImage:item.iconSelected forState:UIControlStateSelected];     // selected        [btnItem setBackgroundImage:item.bgImage forState:UIControlStateSelected];        [btnItem addTarget:self action:@selector(tabBarButtonClicked:) forControlEvents:UIControlEventTouchUpInside];        btnItem.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth;        [customTabBar addSubview:btnItem];        // 创建label        UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(btnItem.center.x - 16.0f, btnItem.center.y + 7.0f, 32.0f, 21.0f)];        titleLabel.text = item.title;        titleLabel.textAlignment = NSTextAlignmentCenter;        titleLabel.font = [UIFont fontWithName:@"STHeitiSC-Light" size:9];        titleLabel.backgroundColor = [UIColor clearColor];        titleLabel.enabled = NO;        titleLabel.userInteractionEnabled = NO;        titleLabel.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth;        [customTabBar addSubview:titleLabel];        [titleLabel release], titleLabel = nil;                // 标签栏默认选中第一个        if (i == 0) {            btnItem.selected = YES;            nowSelected = 10000 + i;            lastSelected = 10000 + i;        }    }    customTabBar.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin;    [tabBarController.view addSubview:customTabBar];    [tabBarController.view bringSubviewToFront:customTabBar];}// 按钮点击回调- (void)tabBarButtonClicked:(id)sender{    UIButton *button = (UIButton *)sender;    // 如果当前tab不是被选中的    if (!button.selected) {        lastSelected = nowSelected;        nowSelected = button.tag;        [button setSelected:YES]; // 设定为选中状态        [self.tabBarController setSelectedIndex:nowSelected - 10000];        UIButton *lastBtn = (UIButton *)[customTabBar viewWithTag:lastSelected];        [lastBtn setSelected:NO];    }    else {        // do nothing    }}#pragma mark - - (void)dealloc{    [tabBarController release], tabBarController = nil;    [items release], items = nil;    [tabBarBgImage release], tabBarBgImage = nil;    [customTabBar release], customTabBar = nil;    [super dealloc];}@end

configTabBar:方法配置自定义的数据。然后createTabBar:将调用这些数据进行标签栏定制。为了方便数据的调用和管理，我们还创建了一个数据模型YXItem，它的头文件如下:

#import <Foundation/Foundation.h>@interface YXItem : NSObject@property (nonatomic,copy)  NSString *title;           // 按钮的标题@property (nonatomic,retain) UIImage *iconNormal;      // 一般状态下的icon@property (nonatomic,retain) UIImage *iconSelected;    // 选中或高亮状态下的icon@property (nonatomic,retain) UIImage *bgImage;         // 按钮的背景@end

最终实现的效果如下:

最后，再总结下如何将它们用到自己的工程中：
1、像往常一样，在application: didFinishLaunchingWithOptions:创建UITabBarController作为整个App的根。
2、将YXItem.h\YXItem.m、CustomTabBar.h\CustomTabBar.m拉入你的工程中。
3、在configTabBar:方法中配置数据，主要是按钮的一些icon、背景图等。
4、在application: didFinishLaunchingWithOptions:中适当的位置添加如下代码，实现定制。

/* 自定义标签栏 */self.customTabBar = [[[CustomTabBar alloc] init] autorelease];self.customTabBar.tabBarController = self.viewController;[self.customTabBar custom];