我们都知道在IOS7之前,Xcode中自带的UITabBarController控制器的tabbar样子很难看,可有时又想利用UITabBarController来快速切换界面,这样就牵扯到要自定义其中的tabbar。那么,如何才能自定义一个tabbar,拥有与QQ或者新浪微博那样好看的界面呢?
如上图中,我们的目标是自定义tabbar做成图中下方的样子,这样点击下方,以快速切换界面。
思路:1.定义一个GXViewController类继承自UITabBarController
2.将原先的tabbar隐藏,自定义一个控件覆盖在上面
3.在控件内增加可以点击的按钮,调整控件和按钮的具体细节,以达到上图中的效果。
具体代码如下:
在GXViewController的.m文件中
1 #import "GXViewController.h"
2
3 #import "GXCustomButton.h"
4
5 @interfaceGXViewController ()6 {7
8 UIImageView *_tabBarView; //自定义的覆盖原先的tarbar的控件
9
10 GXCustomButton *_previousBtn; //记录前一次选中的按钮
11
12 }13
14 @end
15
16
17
18 @implementationGXViewController19
20 - (void)viewDidLoad21 {22
23 [super viewDidLoad];24
25
26 self.tabBar.hidden = YES; //隐藏原先的tabBar
27 CGFloat tabBarViewY = self.view.frame.size.height - 49;28
29 _tabBarView = [[UIImageView alloc] initWithFrame:CGRectMake(0, tabBarViewY, 320, 49)];30 _tabBarView.userInteractionEnabled = YES; //这一步一定要设置为YES,否则不能和用户交互
31 _tabBarView.image = [UIImage imageNamed:@"背景图片"];32
33 [self.view addSubview:_tabBarView];34
35 //下面的方法是调用自定义的生成按钮的方法
36 [self creatButtonWithNormalName:@"图片1"andSelectName:@"图片2"andTitle:@"消息"andIndex:0];37 [self creatButtonWithNormalName:@"图片3"andSelectName:@"图片4"andTitle:@"联系人"andIndex:1];38 [self creatButtonWithNormalName:@"图片5"andSelectName:@"图片6"andTitle:@"动态"andIndex:2];39 [self creatButtonWithNormalName:@"图片7"andSelectName:@"图片8"andTitle:@"设置"andIndex:3];40
41 GXCustomButton *btn = _tabBarView.subviews[0];42
43 [self changeViewController:btn]; //自定义的控件中的按钮被点击了调用的方法,默认进入界面就选中第一个按钮
44
45 }46
47 #pragma mark 创建一个按钮
48 - (void)creatButtonWithNormalName:(NSString *)normal andSelectName:(NSString *)selected andTitle:(NSString *)title andIndex:(int)index49 {50 /*
51 GXCustomButton是自定义的一个继承自UIButton的类,自定义该类的目的是因为系统自带的Button可以设置image和title属性,但是默认的image是在title的左边,若想想上面图片中那样,将image放在title的上面,就需要自定义Button,设置一些东西。(具体GXCustomButton设置了什么,放在下面讲)52 */
53
54 GXCustomButton *button =[GXCustomButton buttonWithType:UIButtonTypeCustom];55 button.tag =index;56
57
58 CGFloat buttonW = _tabBarView.frame.size.width / 4;59 CGFloat buttonH =_tabBarView.frame.size.height;60 button.frame = CGRectMake(80 *index, 0, buttonW, buttonH);61
62
63 [button setImage:[UIImage imageNamed:normal] forState:UIControlStateNormal];64 [button setImage:[UIImage imageNamed:selected] forState:UIControlStateDisabled];65 [button setTitle:title forState:UIControlStateNormal];66
67
68 [button addTarget:self action:@selector(changeViewController:) forControlEvents:UIControlEventTouchDown];69
70 button.imageView.contentMode = UIViewContentModeCenter; //让图片在按钮内居中
71 button.titleLabel.textAlignment = NSTextAlignmentCenter; //让标题在按钮内居中
72 button.font = [UIFont systemFontOfSize:12]; //设置标题的字体大小
73
74 [_tabBarView addSubview:button];75
76 }77
78
79
80 #pragma mark 按钮被点击时调用
81 - (void)changeViewController:(GXCustomButton *)sender82 {83 self.selectedIndex = sender.tag; //切换不同控制器的界面
84
85 sender.enabled =NO;86
87 if (_previousBtn !=sender) {88
89 _previousBtn.enabled =YES;90
91 }92
93 _previousBtn =sender;94
95 }96
97 @end
自定义的GXCustomButton按钮.m中的代码如下:
1 #import "GXCustomButton.h"
2
3 @implementationGXCustomButton4
5 #pragma mark 设置Button内部的image的范围
6 -(CGRect)imageRectForContentRect:(CGRect)contentRect7 {8 CGFloat imageW =contentRect.size.width;9 CGFloat imageH = contentRect.size.height * 0.6;10
11 return CGRectMake(0, 0, imageW, imageH);12 }13
14 #pragma mark 设置Button内部的title的范围
15 -(CGRect)titleRectForContentRect:(CGRect)contentRect16 {17 CGFloat titleY = contentRect.size.height *0.6;18 CGFloat titleW =contentRect.size.width;19 CGFloat titleH = contentRect.size.height -titleY;20
21 return CGRectMake(0, titleY, titleW, titleH);22 }23
24 @end
经过以上代码,就完成了快速自定义UITabBarController内的tabbar控件的目标。
如有任何疑问,欢迎各位留言沟通。
郭晓
2014.1.4