我們都知道在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