ios 仿淘宝自定义TabBar

iOS 自带的TabBar样式比较单一，很多时候需要自定义，仿淘宝的效果如下：



自定义TabBar的类MainController继承UITabBarController

#import <UIKit/UIKit.h>

@interface MainController : UITabBarController
{
@private
UIButton *homeBtn;
UIButton *myTaobaoBtn;
UIButton *cartBtn;
UIButton *weitaoBtn;
UIButton *searchBtn;

UIImageView *tabbarBG;
UIImageView *itemBG;

}

- (void)createCustomTabBar; //创建自定义TabBar
- (void)showTabBar; //显示TabBar
- (void)hideTabBar; //隐藏TabBar

@end

主要是上面三个方法：

createCustomTabBar创建一个自定义TabBar,主要思想就是：把系统自带的TabBar隐藏，然后在TabBar的位置上放自定义的TabBar视图

自定义TabBar的视图层次关系：

背景（最下面）,选择图片（中间），按钮（最上面）

主要代码：

- (void)createCustomTabBar
{
/*
*层次关系：背景（最下面）,选择图片（中间），按钮（最上面）
*/

tabbarBG = [[UIImageView alloc]initWithFrame:CGRectMake(0, 480-49, 320, 49)];
tabbarBG.image = [UIImage imageNamed:@"tabbar_background.png"];
tabbarBG.userInteractionEnabled = YES;
[self.view addSubview:tabbarBG];

itemBG = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"tabbar_item_selected.png"]];
[tabbarBG addSubview:itemBG];

homeBtn = [UIButton buttonWithType:UIButtonTypeCustom];
homeBtn.tag = 0;
homeBtn.frame = CGRectMake(0.0, 0.0, 64.0, 49.0);
[homeBtn setImage:[UIImage imageNamed:@"tabbar_home_unselected.png"] forState:UIControlStateNormal];
[homeBtn setImage:[UIImage imageNamed:@"tabbar_home_selected.png"] forState:UIControlStateSelected];
[homeBtn setTitle:@"首页" forState:UIControlStateNormal];
[homeBtn setTitleColor:[UIColor colorWithRed:135.0/255.0 green:145.0/255.0 blue:165.0/255.0 alpha:1] forState:UIControlStateNormal];
[homeBtn setTitleColor:[UIColor colorWithRed:235.0/255.0 green:81.0/255.0 blue:17.0/255.0 alpha:1] forState:UIControlStateSelected];
homeBtn.titleLabel.font = [UIFont systemFontOfSize:10.0];
[homeBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, -29, -30, 0)];
[homeBtn setImageEdgeInsets:UIEdgeInsetsMake(-10, 18, 0, 18)];
[homeBtn addTarget:self action:@selector(homeBtn_Click:) forControlEvents:UIControlEventTouchUpInside];
homeBtn.selected = YES;
itemBG.frame = CGRectMake(0, 0, 64, 49);
[tabbarBG addSubview:homeBtn];

myTaobaoBtn = [UIButton buttonWithType:UIButtonTypeCustom];
myTaobaoBtn.tag = 1;
myTaobaoBtn.frame = CGRectMake(64, 0.0, 64.0, 49.0);
[myTaobaoBtn setImage:[UIImage imageNamed:@"tabbar_mytaobao_unselected.png"] forState:UIControlStateNormal];
[myTaobaoBtn setImage:[UIImage imageNamed:@"tabbar_mytaobao_selected.png"] forState:UIControlStateSelected];
[myTaobaoBtn setTitle:@"我的淘宝" forState:UIControlStateNormal];
[myTaobaoBtn setTitleColor:[UIColor colorWithRed:135.0/255.0 green:145.0/255.0 blue:165.0/255.0 alpha:1] forState:UIControlStateNormal];
[myTaobaoBtn setTitleColor:[UIColor colorWithRed:235.0/255.0 green:81.0/255.0 blue:17.0/255.0 alpha:1] forState:UIControlStateSelected];
myTaobaoBtn.titleLabel.font = [UIFont systemFontOfSize:10.0];
[myTaobaoBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, -29, -30, 0)];
[myTaobaoBtn setImageEdgeInsets:UIEdgeInsetsMake(-10, 18, 0, 18)];
[myTaobaoBtn addTarget:self action:@selector(myTaobaoBtn_Click:) forControlEvents:UIControlEventTouchUpInside];
[tabbarBG addSubview:myTaobaoBtn];

cartBtn = [UIButton buttonWithType:UIButtonTypeCustom];
cartBtn.tag = 2;
cartBtn.frame = CGRectMake(64*2, 0.0, 64.0, 49.0);
[cartBtn setImage:[UIImage imageNamed:@"tabbar_cart_unselected.png"] forState:UIControlStateNormal];
[cartBtn setImage:[UIImage imageNamed:@"tabbar_cart_selected.png"] forState:UIControlStateSelected];
[cartBtn setTitle:@"购物车" forState:UIControlStateNormal];
[cartBtn setTitleColor:[UIColor colorWithRed:135.0/255.0 green:145.0/255.0 blue:165.0/255.0 alpha:1] forState:UIControlStateNormal];
[cartBtn setTitleColor:[UIColor colorWithRed:235.0/255.0 green:81.0/255.0 blue:17.0/255.0 alpha:1] forState:UIControlStateSelected];
cartBtn.titleLabel.font = [UIFont systemFontOfSize:10.0];
[cartBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, -27, -30, 0)];
[cartBtn setImageEdgeInsets:UIEdgeInsetsMake(-10, 18, 0, 18)];
[cartBtn addTarget: self action:@selector(cartBtn_Click:) forControlEvents:UIControlEventTouchUpInside];
[tabbarBG addSubview:cartBtn];

weitaoBtn = [UIButton buttonWithType:UIButtonTypeCustom];
weitaoBtn.tag = 3;
weitaoBtn.frame = CGRectMake(64*3, 0.0, 64.0, 49.0);
[weitaoBtn setImage:[UIImage imageNamed:@"tabbar_weitao_unselected.png"] forState:UIControlStateNormal];
[weitaoBtn setImage:[UIImage imageNamed:@"tabbar_weitao_selected.png"] forState:UIControlStateSelected];
[weitaoBtn setTitle:@"微淘" forState:UIControlStateNormal];
[weitaoBtn setTitleColor:[UIColor colorWithRed:135.0/255.0 green:145.0/255.0 blue:165.0/255.0 alpha:1] forState:UIControlStateNormal];
[weitaoBtn setTitleColor:[UIColor colorWithRed:235.0/255.0 green:81.0/255.0 blue:17.0/255.0 alpha:1] forState:UIControlStateSelected];
weitaoBtn.titleLabel.font = [UIFont systemFontOfSize:10.0];
[weitaoBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, -27, -30, 0)];
[weitaoBtn setImageEdgeInsets:UIEdgeInsetsMake(-10, 18, 0, 18)];

[weitaoBtn addTarget: self action:@selector(weitaoBtn_Click:) forControlEvents:UIControlEventTouchUpInside];
[tabbarBG addSubview:weitaoBtn];

searchBtn = [UIButton buttonWithType:UIButtonTypeCustom];
searchBtn.tag = 4;
searchBtn.frame = CGRectMake(64*4, 0.0, 64.0, 49.0);
[searchBtn setImage:[UIImage imageNamed:@"tabbar_search_unselected.png"] forState:UIControlStateNormal];
[searchBtn setImage:[UIImage imageNamed:@"tabbar_search_selected.png"] forState:UIControlStateSelected];
[searchBtn setTitle:@"搜索" forState:UIControlStateNormal];
[searchBtn setTitleColor:[UIColor colorWithRed:135.0/255.0 green:145.0/255.0 blue:165.0/255.0 alpha:1] forState:UIControlStateNormal];
[searchBtn setTitleColor:[UIColor colorWithRed:235.0/255.0 green:81.0/255.0 blue:17.0/255.0 alpha:1] forState:UIControlStateSelected];
searchBtn.titleLabel.font = [UIFont systemFontOfSize:10.0];
[searchBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, -27, -30, 0)];
[searchBtn setImageEdgeInsets:UIEdgeInsetsMake(-10, 18, 0, 18)];

[searchBtn addTarget: self action:@selector(searchBtn_Click:) forControlEvents:UIControlEventTouchUpInside];
[tabbarBG addSubview:searchBtn];
}

然后在跳转的时候，有时候需要隐藏TabBar，返回到控制页面的时候需要显示TabBar,下面是show和hide方法

- (void)showTabBar
{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.35];
tabbarBG.frame = CGRectMake(0, 431, 320, 49);
[UIView commitAnimations];
NSLog(@"显示TabBar");
}
- (void)hideTabBar
{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.35];
tabbarBG.frame = CGRectMake(-320, 431, 320, 49);
[UIView commitAnimations];
NSLog(@"隐藏TabBar");
}

这里加了动画，隐藏了系统自带的TabBar之后，那一块会变成黑色，因为被自定义的TabBar隐藏，所以看不到，但是在跳转的时候，如果自定义的TabBar移动的速度跟系统页面移动的速度不一致，那么那个黑色的部分就会在跳转的过程中显示出来（可能描述得不是很清楚，大家可以屏蔽动画看一下效果）。

这里放上源码的下载地址：http://download.csdn.net/detail/smk524198002/6201655

希望大家多多批评指正，谢谢。