自定义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上面扩展，可能是一些瑕疵。有时间在进一步增加功能。