自定义UITabBar

虽然apple提供了很完善的UIKit框架，但是有些内容还是需要自定义的。

UITabBar是一个很常用的UIKit控件，虽然它很常用，但是如果想要做出区别apple原有的界面风格，一般是很难定义的。下面是我自己结合一些参考，自定义的UITabBar(只适合ARC模式)。

HYTabBar由两个视图组成：一个是HYTabBar视图，一个是HYTabBarItem视图。我们只需要调用HYTabBar视图，并赋予几个HYTabBarItem的参数，即可完成一个自定义UITabBar。

一、HYTabBar.h

#import <UIKit/UIKit.h>
#import "HYTabBarItem.h"

#define HYTabBarItemImage @"image"
#define HYTabBarItemText @"text"
#define HYTabBarItemSelected @"select"

@interface HYTabBar : UIView

@property (weak, nonatomic) id delegate;

- (void)addTabBarItems:(NSArray*)items;


@end

@protocol HYTabBarDelegate <NSObject>

@optional
/**
 *  选择HYTabBar选项卡
 *
 *  @param hyTabBar     HYTabBar对象
 *  @param hyTabBarItem 所选HYTabBarItem对象
 *  @param index        所选HYTabBarItem的Index值
 */
- (void)hyTabBar:(HYTabBar*)hyTabBar didSelectItem:(HYTabBarItem*)hyTabBarItem index:(NSInteger)index;

@end

HYTabBar.m

#import "HYTabBar.h"

@implementation HYTabBar {
    NSMutableArray *tabBarItems;
    NSArray *resources;
}

- (void)dealloc {
    [tabBarItems removeAllObjects];
    tabBarItems = nil;
    resources = nil;
}

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        self.backgroundColor = [UIColor clearColor];
        
        UIImageView *imvHyTabBarBg = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
        imvHyTabBarBg.image = [UIImage imageNamed:@"TabBar_Bg.png"];
        [self addSubview:imvHyTabBarBg];
        
        tabBarItems = [[NSMutableArray alloc] initWithCapacity:5];
    }
    return self;
}

- (void)addTabBarItems:(NSArray*)items {
    resources = items;
    
    float width = self.frame.size.width / resources.count;
    
    int index = 0;
    for(NSMutableDictionary *dicResources in resources) {
        HYTabBarItem *item = [[HYTabBarItem alloc] initWithFrame:CGRectMake(width * index, 0, width, self.frame.size.height)
                                                           image:[dicResources objectForKey:HYTabBarItemImage]
                                                            text:[dicResources objectForKey:HYTabBarItemText]
                                                    willSelected:[[dicResources objectForKey:HYTabBarItemSelected] boolValue]                                                         delegate:self];
        item.button.tag = index;
        [tabBarItems addObject:item];
        [self addSubview:item];
        index ++;
    }
}

- (void)didSelectItem:(id)sender {
    UIButton *btnTabBarItem = (UIButton*)sender;
    for (NSInteger intIndex = 0; intIndex < tabBarItems.count; intIndex++)
    {
        HYTabBarItem *tabBarItem = [tabBarItems objectAtIndex:intIndex];
        
        if(btnTabBarItem.tag == intIndex) {
            if (!tabBarItem.bolSelected) {
                tabBarItem.backgroundColor = [UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.4f];
                tabBarItem.bolSelected = YES;
                if (self.delegate) {
                    if ([self.delegate respondsToSelector:@selector(hyTabBar: didSelectItem: index:)]) {
                        [self.delegate hyTabBar:self didSelectItem:tabBarItem index:intIndex];
                    }
                }
            }
        } else {
            tabBarItem.backgroundColor = [UIColor clearColor];
            tabBarItem.bolSelected = NO;
        }
    }
}

@end

二、HYTabBarItem.h

#import <UIKit/UIKit.h>

@interface HYTabBarItem : UIView

@property (strong, nonatomic) UIButton *button;
@property (readwrite, nonatomic) BOOL bolSelected;

/**
 *  初始化TabBarItem
 *
 *  @param frame    TabBarItem的Frame
 *  @param image    TabBarItem的图标
 *  @param text     TabBarItem的文字
 *  @param selected TabBarItem是否默认选中
 *  @param delegate TabBarItem的委托
 *
 *  @return 初始化TabBarItem
 */
- (id)initWithFrame:(CGRect)frame image:(UIImage*)image text:(NSString*)text willSelected:(BOOL)selected delegate:(id)delegate;

@end

HYTabBarItem.m

#import "HYTabBarItem.h"

@implementation HYTabBarItem {
    UIImageView *imageView;
    UILabel *label;
}


- (void)dealloc {
    imageView = nil;
    label = nil;
    self.button = nil;
}

/**
 *  初始化TabBarItem
 *
 *  @param frame    TabBarItem的Frame
 *  @param image    TabBarItem的图标
 *  @param text     TabBarItem的文字
 *  @param selected TabBarItem是否默认选中
 *  @param delegate TabBarItem的委托
 *
 *  @return 初始化TabBarItem
 */
- (id)initWithFrame:(CGRect)frame image:(UIImage*)image text:(NSString*)text willSelected:(BOOL)selected delegate:(id)delegate {
    if (self = [super initWithFrame:frame]) {
        if (selected) {
            self.bolSelected = YES;
            self.backgroundColor = [UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.4f];
        } else {
            self.bolSelected = NO;
            self.backgroundColor = [UIColor clearColor];
        }
        
        imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
        imageView.center = CGPointMake(self.frame.size.width*0.5, 20);
        imageView.image = image;
        [self addSubview:imageView];
        
        UIFont *font = [UIFont systemFontOfSize:12];
        label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, [text sizeWithFont:font].width, 15)];
        label.center = CGPointMake(self.frame.size.width*0.5, 45);
        label.backgroundColor = [UIColor clearColor];
        label.font = font;
        label.textColor = [UIColor whiteColor];
        label.text = text;
        [self addSubview:label];
        
        self.button = [UIButton buttonWithType:UIButtonTypeCustom];
        self.button.frame = CGRectMake(0, 0, frame.size.width, frame.size.height);
        self.button.backgroundColor = [UIColor clearColor];
        [self.button addTarget:delegate action:@selector(didSelectItem:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:self.button];
    }
    
    return self;
}

@end

三、调用代码

//添加标签栏
        NSMutableDictionary *dicTabBarItem1 = [[NSMutableDictionary alloc] init];
        [dicTabBarItem1 setObject:[UIImage imageNamed:@"TabBar01_Icon.png"] forKey:HYTabBarItemImage];
        [dicTabBarItem1 setObject:@"主页" forKey:HYTabBarItemText];
        [dicTabBarItem1 setObject:[NSNumber numberWithBool:YES] forKey:HYTabBarItemSelected];
        
        NSMutableDictionary *dicTabBarItem2 = [[NSMutableDictionary alloc] init];
        [dicTabBarItem2 setObject:[UIImage imageNamed:@"TabBar02_Icon.png"] forKey:HYTabBarItemImage];
        [dicTabBarItem2 setObject:@"信息交流" forKey:HYTabBarItemText];
        [dicTabBarItem2 setObject:[NSNumber numberWithBool:NO] forKey:HYTabBarItemSelected];
        
        NSMutableDictionary *dicTabBarItem3 = [[NSMutableDictionary alloc] init];
        [dicTabBarItem3 setObject:[UIImage imageNamed:@"TabBar03_Icon.png"] forKey:HYTabBarItemImage];
        [dicTabBarItem3 setObject:@"消息中心" forKey:HYTabBarItemText];
        [dicTabBarItem3 setObject:[NSNumber numberWithBool:NO] forKey:HYTabBarItemSelected];
        
        NSMutableDictionary *dicTabBarItem4 = [[NSMutableDictionary alloc] init];
        [dicTabBarItem4 setObject:[UIImage imageNamed:@"TabBar04_Icon.png"] forKey:HYTabBarItemImage];
        [dicTabBarItem4 setObject:@"个人中心" forKey:HYTabBarItemText];
        [dicTabBarItem4 setObject:[NSNumber numberWithBool:NO] forKey:HYTabBarItemSelected];
        
        HYTabBar *hyTabBar = [[HYTabBar alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, 57)];
        hyTabBar.center = CGPointMake(self.frame.size.width*0.5, self.frame.size.height-28);
        hyTabBar.delegate = self;
        [hyTabBar addTabBarItems:[[NSArray alloc] initWithObjects:dicTabBarItem1, dicTabBarItem2, dicTabBarItem3, dicTabBarItem4, nil]];
        [self addSubview:hyTabBar];

四、响应代码

#pragma mark -
#pragma mark HYTabBar Delegate
- (void)hyTabBar:(HYTabBar*)hyTabBar didSelectItem:(HYTabBarItem*)hyTabBarItem index:(NSInteger)index {
    //TODO EVERYTHING
}

五、运行效果

　　

我在开发的时候没有加入动画效果，还有就是没有在原生UITabBar上面扩展，可能是一些瑕疵。有时间在进一步增加功能。