ios基础篇（九）——自定义UITabBar

上一篇讲到了UITabBarViewController，接着说说UITabBarViewController中怎么自定义TabBar.

今天仿写了微博，发现底部tabbar中间的button和其他有所不同，button较大且着色；而且我们平时工作中也有很多类似这样的问题，有些app有一个看起来像标准 tabBarController，但是呢，tabBar的中间是凸起的或者着色的。我们怎样做可以构建这种现实效果呢？

如图：

 

 

这些标签栏除了中间项以外看起来都相当的标准，所以我们会从一个标准的包含一个tabBar的UITabBarController开始；查看应用内的图片，显而易见的是中间的标签是一个简单的自定义button，一个UITabBar 包含了一个UITabBaritems的数组，UITabBaritem继承自UIBarItem。但是和同样继承自UIBarItem的UIBarButtonItem不同，苹果官方没有提供给UITabBarItem创建自定义视图的api。

我们的基本方案是子类化UITabBarController然后添加一个自定义的button再UITabBar上面。

代码实现：(这里我用第二张图片举例)

  1 //
  2 //  TabBarViewController.m
  3 //  WeiBo
  4 //
  5 //  Created by Oran Wu on 15-11-18.
  6 //  Copyright (c) 2015年 Xinxin. All rights reserved.
  7 //
  8 
  9 #import "TabBarViewController.h"
 10 #import "ViewAdditions.h"
 11 #import "AddViewController.h"
 12 
 13 @interface TabBarViewController ()<UITabBarControllerDelegate>{
 14 
 15     UITabBar *tabBar;
 16     UIImageView *tabBarView;
 17     UIButton *lastSelectedButton;
 18 
 19     UILabel *titleLabel;
 20 
 21 }
 22 
 23 @end
 24 
 25 @implementation TabBarViewController
 26 
 27 
 28 - (void)viewDidLoad {
 29     [super viewDidLoad];
 30     // Do any additional setup after loading the view.
 31     
 32     //把原tabBar隐藏
 33     self.tabBar.hidden = YES;
 34 
 35     //在底部创建一个tabBarView替代原tabBar
 36     tabBarView =[[UIImageView alloc] initWithFrame:(CGRect){0,self.view.height-45,self.view.width,45}];
 37     [self.view addSubview:tabBarView];
 38     //可交互
 39     tabBarView.userInteractionEnabled = YES;
 40     
 41     //创建常见的四个tabBarButton
 42     [self creatButtonWithNormalName:@"tabbar_home" andSelectedName:@"tabbar_home_selected" andTitle:@"首页" andIndex:0];
 43     [self creatButtonWithNormalName:@"tabbar_message_center" andSelectedName:@"tabbar_message_center_selected" andTitle:@"消息" andIndex:1];
 44     [self creatButtonWithNormalName:@"tabbar_discover" andSelectedName:@"tabbar_discover_selected" andTitle:@"发现" andIndex:2];
 45     [self creatButtonWithNormalName:@"tabbar_profile" andSelectedName:@"tabbar_profile_selected" andTitle:@" 我" andIndex:3];
 46     [self creatCenterButton:@"jia"];
 47     
 48     //这里用了通知，切换页面时用来隐藏tabBar
 49     [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(hideTabbar:) name:@"HideTabbar" object:nil];
 50     [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(showTabbar) name:@"ShowTapBar" object:nil];
 51 }
 52 
 53 - (void)hideTabbar:(NSNotification *)notification{
 54  //   NSNumber *number = notification.object;
 55     
 56     tabBarView.hidden = YES;
 57 }
 58 
 59 - (void)showTabbar{
 60 
 61     tabBarView.hidden = NO;
 62 }
 63 
 64 //自定义方法用来设置button两种状态的图片
 65 - (void)creatButtonWithNormalName:(NSString*)normal andSelectedName:(NSString*)selected andTitle:(NSString*)title
 66 andIndex:(int)index{
 67 
 68     //初始化button
 69     UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
 70     button.tag = index+100;
 71 
 72     CGFloat buttonWidth = tabBarView.width/5;
 73     CGFloat buttonHeight = tabBarView.height;
 74     //设置button位置及大小，注意：要留出中间特殊button的位置
 75     if (index<2) {
 76          button.frame = (CGRect){18+70*index,0,buttonWidth,buttonHeight};
 77     }else
 78         button.frame = (CGRect){18+70*(index+1),0,buttonWidth,buttonHeight};
 79    
 80     [button setImage:[UIImage imageNamed:normal] forState:UIControlStateNormal];
 81     [button setImage:[UIImage imageNamed:selected] forState:UIControlStateSelected];
 82     
 83     //设置buttonLabel（tabBar的文字）
 84     [button.titleLabel setFont:[UIFont systemFontOfSize:10]];
 85     [button setTitle:title forState:UIControlStateNormal];
 86     [button setTitleColor:[UIColor colorWithWhite:0.5 alpha:1] forState:UIControlStateNormal];
 87     [button setTitleColor:[UIColor orangeColor] forState:UIControlStateSelected];
 88 
 89     [button setTitleEdgeInsets:(UIEdgeInsets){36, -25, 0, 25}];
 90     
 91     //button动作
 92     [button addTarget:self action:@selector(changeViewController:) forControlEvents:UIControlEventTouchUpInside];
 93     button.imageView.contentMode =UIViewContentModeCenter;
 94     [tabBarView addSubview:button];
 95     
 96     UIButton *bt = tabBarView.subviews[0];
 97     [self changeViewController:bt];
 98     
 99 }
100 
101 - (void)creatCenterButton:(NSString*)centerImage{
102 
103     //初始化中间特殊button
104     UIButton *centerButton = [UIButton buttonWithType:UIButtonTypeCustom];
105     //位置及大小
106     centerButton.frame = (CGRect){148,6,75,tabBarView.height-6};
107     //图片
108     [centerButton setImage:[UIImage imageNamed:centerImage] forState:UIControlStateNormal];
109     //动作
110     [centerButton addTarget:self action:@selector(addViewController) forControlEvents:UIControlEventTouchUpInside];
111     //加到tabBarView上
112     [tabBarView addSubview:centerButton];
113 
114 }
115 
116 //换页和button的动作关联上
117 - (void)changeViewController:(UIButton*)button {
118     
119     if (self.selectedIndex == button.tag-100) {
120         return;
121     }
122   
123     self.selectedIndex = button.tag-100;
124     
125     button.selected = YES;
126     
127     if (lastSelectedButton != button) {
128         lastSelectedButton.selected = NO;
129     }
130     lastSelectedButton = button;
131     
132     self.tabBarController.selectedViewController = [self.tabBarController.viewControllers objectAtIndex:self.selectedIndex];
133     
134 }
135 
136 //中间button点击动作
137 - (void)addViewController{
138     AddViewController *AddVC = [[AddViewController alloc] init];
139     [self presentViewController:AddVC animated:YES completion:nil];
140 
141 }

 

转载于:https://www.cnblogs.com/0320y/p/5039824.html