iOS-快速自定义UITabBarController内的tabbar控件
我们都知道在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 @interface GXViewController () 6 { 7 8 UIImageView *_tabBarView; //自定义的覆盖原先的tarbar的控件 9 10 GXCustomButton *_previousBtn; //记录前一次选中的按钮 11 12 } 13 14 @end 15 16 17 18 @implementation GXViewController 19 20 - (void)viewDidLoad 21 { 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)index 49 { 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 *)sender 82 { 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 @implementation GXCustomButton 4 5 #pragma mark 设置Button内部的image的范围 6 - (CGRect)imageRectForContentRect:(CGRect)contentRect 7 { 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)contentRect 16 { 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
