iOS 用KVC来自定义Tabbar

开发是一个学习的过程,当你在项目中遇到难点的时候,第一个想到的应该是Google,百度...我总是拿这样一句话来形容自己,逆水行舟,不进则退,每时每刻都要学习,活到老,学到老.

1.首先看个例子,看下今天我们要自定义的这个tabbar.

这种tabbar在很多应用中都有,最最常见的就是新浪微博,那这样的我们该怎么做呢,不要着急慢慢来,我接下来采用的方法是利用系统的tabbar来自定义tabbar.

2.话不多说上代码

• 首先创建一个集成与UITabBarController的控制器,以下我们把他成为XTTabBarController,让大家更好明白.
• 还要创建好其余四个空的控制器.

• 在XTTabBarController中,先来做一些我们大家都熟悉的设置

//先对tabbar做一些属性设置.这个initialize方法,只会走一次,所以我们把tabbar初始化的一些方法放在这里面
+(void)initialize{
    //通过apperance统一设置UITabBarItem的文字属性
    //后面带有UI_APPEARANCE_SELECTOR的方法, 都可以通过appearance对象来统一设置
    NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
    attrs[NSFontAttributeName] = [UIFont systemFontOfSize:12];
    attrs[NSForegroundColorAttributeName] = [UIColor grayColor];
    
    NSMutableDictionary *selectedAtts = [NSMutableDictionary dictionary];
    selectedAtts[NSFontAttributeName] = [UIFont systemFontOfSize:12];
    selectedAtts[NSForegroundColorAttributeName] = [UIColor grayColor];

    UITabBarItem *item = [UITabBarItem appearance];
    [item setTitleTextAttributes:attrs forState:UIControlStateNormal];
    [item setTitleTextAttributes:selectedAtts forState:UIControlStateSelected];
}

• 然后添加子控制器(以下的方法都是我们经常用到的,我就不多做解释了)

-(void)viewDidLoad {
    [super viewDidLoad];
      // 添加子控制器
    [self setupChildVc:[[XTEssenceViewController alloc] init] title:@"精华" image:@"tabBar_essence_icon" selectedImage:@"tabBar_essence_click_icon"];
    
    [self setupChildVc:[[XTNewViewController alloc] init] title:@"新帖" image:@"tabBar_new_icon" selectedImage:@"tabBar_new_click_icon"];
    
    [self setupChildVc:[[XTFriendTrendsViewController alloc] init] title:@"关注" image:@"tabBar_friendTrends_icon" selectedImage:@"tabBar_friendTrends_click_icon"];
    
    [self setupChildVc:[[XTMeViewController alloc] init] title:@"我" image:@"tabBar_me_icon" selectedImage:@"tabBar_me_click_icon"];
}
-(void)setupChildVc:(UIViewController *)vc title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage{
    //设置文字和图片
    vc.tabBarItem.title = title;
    vc.tabBarItem.image = [UIImage imageNamed:image];
    vc.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage];
    vc.view.backgroundColor = [UIColor colorWithRed:arc4random_uniform(100)/100.0 green:arc4random_uniform(100)/100.0 blue:arc4random_uniform(100)/100.0 alpha:1.0];
    UINavigationController *navVc = [[UINavigationController alloc]initWithRootViewController:vc];
    [self addChildViewController:navVc];
}

• 通过以上的设置现在我们的tabbar是这样的

  
  tabbar.png
  

  这是正常的tabbar,但是要再增加中间的那个按钮该如何做能?接下来的就是重点

• 通过KVC的方式来获取系统的tabbar然后对系统的tabbar进行自定义,如果有些人对KVC不是很了解,可以看我之前写过的一遍对KVC的博客,大家可以去看看:iOS KVC简单理解
  自定义一个UITabBar,我们以下称为XTTabBar,然后用XTTabBar来替换系统的tabbar,因为系统的tabbar是readonly的,所以我们只能通过KVC的方式来替换.

@property(nonatomic,readonly) UITabBar *tabBar NS_AVAILABLE_IOS(3_0); .

//替换tabbar
-(void)viewDidLoad {
    [super viewDidLoad];
      // 添加子控制器
    [self setupChildVc:[[XTEssenceViewController alloc] init] title:@"精华" image:@"tabBar_essence_icon" selectedImage:@"tabBar_essence_click_icon"];
    
    [self setupChildVc:[[XTNewViewController alloc] init] title:@"新帖" image:@"tabBar_new_icon" selectedImage:@"tabBar_new_click_icon"];
    
    [self setupChildVc:[[XTFriendTrendsViewController alloc] init] title:@"关注" image:@"tabBar_friendTrends_icon" selectedImage:@"tabBar_friendTrends_click_icon"];
    
    [self setupChildVc:[[XTMeViewController alloc] init] title:@"我" image:@"tabBar_me_icon" selectedImage:@"tabBar_me_click_icon"];

    //跟换tabbar(KVC)   这里是关键
    XTTabBar *tabbar = [[XTTabBar alloc]init];
    [self setValue:tabbar forKeyPath:@"tabBar"];
}```

- 这样我们就只需要在自定义的`XTTabBar`中去做一些操作了

//先初始化中间的那个按钮
-(instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
[self setBackgroundImage:[UIImage imageNamed:@"tabbar-light"]];
UIButton *publishButton = [[UIButton alloc]init];
[publishButton setBackgroundImage:[UIImage imageNamed:@"tabBar_publish_icon"] forState:UIControlStateNormal];
[publishButton setBackgroundImage:[UIImage imageNamed:@"tabBar_publish_click_icon"] forState:UIControlStateHighlighted];
[self addSubview:publishButton];
self.publishButton = publishButton;
}
return self;
}

//设置tabbar上按钮的Frame
-(void)layoutSubviews{
[super layoutSubviews];

//设置其他tabbar的frame
CGFloat buttonY = 0;
CGFloat buttonW = self.width / 5;
CGFloat buttonH = self.height;

int index = 0;
for (UIView *button in self.subviews) {
    
    if (![button isKindOfClass:NSClassFromString(@"UITabBarButton")])continue;
        // 计算按钮的x值
        CGFloat buttonX = buttonW * ((index > 1)?(index + 1):index);
        button.frame = CGRectMake( buttonX, buttonY, buttonW, buttonH);
        index++;
}

self.publishButton.size = self.publishButton.currentBackgroundImage.size;
self.publishButton.frame = CGRectMake(0, 0, self.publishButton.width,self.publishButton.height);
self.publishButton.center = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height * 0.5);

}

- 在这里我做一个补充,当我们去打印tabbar.subviews的时候,我们发现,在他的子视图中有`UITabBarButton`,这样一个类,但是我们找不到这个类.我们做的就是,把这4个`UITabBarButton`找出来,然后在给他们重新设置Frame.这就是为什么我上面的代码中去遍历他的子视图了.
![tabbar.subviews.png](https://img.haomeiwen.com/i1656986/753b74d006642f19.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- ######这样我们的自定义tabbar就自定义好了,如果想看自定义的导航栏请看:[iOS 导航栏的自定义,完美侧滑返回](http://www.jianshu.com/p/2d544bfd3e9c)

- ####如有错误,欢迎雅正