最近在仿写这个软件,发现UITabBar不是使用的原生的。所以,需要自己去自定义
观察掌盟的UITabBar
观察官方的软件下面的tabBar,我们可以发现几点需要我们注意的
1. 当select一个tabBarItem时,图片会变大,然后文字也变大,同时字体的颜色也会变成红色
2. 在图片变大之前和之后,我们可以看到图片都已经超出了,tabBar的高度。这一点可以说明这几个tabBarItem并没有放在固定了高度的tabBar里面
思路
- 如果,我们只放一个UIView在原生的UITabBar里面,然后将这几个按钮放在UIView中的话,图片肯定不能超出这个UIView的高度。所以这样不行
- 然后,我思考既然高度已经超出了,但是这几个按钮还是放在一个UIView中,这个高度是能包含这几个按钮的最高的高度。
- 但是,你可以看到这几个按钮的背景UIView的高度是没有这几个按钮高的。所以我们上面创建的UIView的颜色是clearColor
ok,我们在尝试着做下
- 既然要创建一个UITabBar,而我们要去管理这个tabBar.所以我们最好创建一个BMCustomTabBarController class继承于UITabBarController.好,直接上代码:
// BMCustomTabBarController.m
// BMLOL
//
// Created by donglei on 2/27/16.
// Copyright © 2016 donglei. All rights reserved.
//
#import "BMCustomTabBarController.h"
#import "BMTabBarBtn.h"
@interface BMCustomTabBarController()
@property(nonatomic,strong) UIView *transparenceView; // 透明的view
@property(nonatomic,strong) BMTabBarBtn *previewBtn; // 上一个被选中的按钮
@end
@implementation BMCustomTabBarController
-(void) viewDidLoad{
[super viewDidLoad];
//1>覆盖原生的tabbar
UIView *coverTabBarView = ({
UIView *view = [[UIView alloc] init];
view.backgroundColor = [UIColor colorWithRed:242/255.0 green:242/255.0 blue:242/255.0 alpha:1.0];
[self.view addSubview:view];
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view.mas_left);
make.bottom.equalTo(self.view.mas_bottom);
make.width.equalTo(@(self.tabBar.frame.size.width));
make.height.equalTo(@(self.tabBar.frame.size.height));
}];
view;
}); //我们把这个view放在UITabBarController的view中,去显示那个灰色的背景
[self.tabBar removeFromSuperview]; // 移除默认的tabbar
//2>添加透明的view 方式图片和文字
UIView *transparenceView = ({
UIView *view = [UIView new];
[self.view addSubview:view];
view.backgroundColor = [UIColor clearColor];
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(self.view.mas_bottom);
make.left.equalTo(self.view.mas_left);
make.right.equalTo(self.view.mas_right);
make.height.equalTo(@67);
}];
view;
}); //这个view是clearColor主要的作用去承载那几个按钮
_transparenceView = transparenceView;
//3>创建4个按钮
CGFloat singleBtnW = screenWidth/4;
BMTabBarBtn *newsBtn= [BMTabBarBtn createBtnNormalImage:@"theme_spring_tab_news_normal" selectedImageName:@"theme_spring_tab_news_selected" title:@"咨询"];
newsBtn.tag = 0; //设置tag,以便之后,点击按钮之后。进行控制器的切换
newsBtn.selected = YES; //默认 第一个是选中的
_previewBtn = newsBtn; //保存一个被select的按钮,以便我们选中另一个按钮时,可以取消上一个按钮被选中的状态
[self setBtnLayout:newsBtn marginLeft:0];
BMTabBarBtn *friendBtn= [BMTabBarBtn createBtnNormalImage:@"theme_spring_tab_friend_normal" selectedImageName:@"theme_spring_tab_friend_selected" title:@"好友"];
friendBtn.tag = 1;
[self setBtnLayout:friendBtn marginLeft:1*singleBtnW];
BMTabBarBtn *locateBtn= [BMTabBarBtn createBtnNormalImage:@"theme_spring_tab_locate_normal" selectedImageName:@"theme_spring_tab_locate_selected" title:@"发现"];
locateBtn.tag = 2;
[self setBtnLayout:locateBtn marginLeft:2*singleBtnW];
BMTabBarBtn *mineBtn= [BMTabBarBtn createBtnNormalImage:@"theme_spring_tab_mine_normal" selectedImageName:@"theme_spring_tab_mine_selected" title:@"我"];
mineBtn.tag = 3;
[self setBtnLayout:mineBtn marginLeft:3*singleBtnW];
}
//设置按钮的位置
-(void) setBtnLayout:(BMTabBarBtn *)btn marginLeft:(CGFloat) left{
[_transparenceView addSubview:btn];//把按钮放在透明的view上
[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchDown]; //添加按钮的点击事件
[btn mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(_transparenceView.mas_left).with.offset(left);
make.top.equalTo(_transparenceView.mas_top);
make.bottom.equalTo(_transparenceView.mas_bottom);
make.width.equalTo(_transparenceView.mas_width).multipliedBy(1.0/4);
}];
}
//按钮点击事件
-(void) btnClick:(BMTabBarBtn *)btn{
if (_previewBtn.isSelected) {//上一个按钮,如果是被选中的,就取消选中状态
_previewBtn.selected = NO;
}
_previewBtn = btn; //将本次选中的按钮,设置为上一个被选中的按钮
btn.selected = YES; //设置本次被点击的按钮为选中状态
self.selectedIndex = btn.tag; //切换控制器
}
@end
- 自定义按钮
自定义的原因是,我们需要去调整按钮中图片和文字的位置
代码:
//
// BMTabBarBtn.m
// BMLOL
//
// Created by donglei on 2/27/16.
// Copyright © 2016 donglei. All rights reserved.
//
#import "BMTabBarBtn.h"
#define btnWidth self.frame.size.width
#define btnHeight self.frame.size.height
#define titlePadding 2
@interface BMTabBarBtn ()
@property(nonatomic,assign) CGFloat tittleH;
@end
@implementation BMTabBarBtn
//该类的工厂方法
+(instancetype)createBtnNormalImage:(NSString *)normalName selectedImageName:(NSString*) selectedName title:(NSString *)titileName{
BMTabBarBtn *btn = [[self alloc] init];
if (btn) {
[btn setImage:[UIImage imageNamed:normalName] forState:UIControlStateNormal];
[btn setImage:[UIImage imageNamed:selectedName] forState:UIControlStateSelected];
[btn setTitle:titileName forState:UIControlStateNormal];
[btn setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
[btn setTitleColor:[UIColor redColor] forState:UIControlStateSelected];
btn.titleLabel.textAlignment = NSTextAlignmentCenter;
btn.titleLabel.font = [UIFont systemFontOfSize:13];
}
return btn;
}
//更改按钮标题的位置(这些按钮的图片文字 的高度.宽度 x y 需要自己去截图,然后使用软件去观察。我使用的sketch)
-(CGRect)titleRectForContentRect:(CGRect)contentRect{
_tittleH = 12.f;
CGFloat tittleW = 37;
if(self.selected){
_tittleH = 14.f;
}
CGFloat titleY = btnHeight - _tittleH -titlePadding;
CGFloat titleX = (btnWidth- tittleW)/2;
return CGRectMake(titleX, titleY, tittleW, _tittleH);
}
//更改按钮图片的位置
-(CGRect)imageRectForContentRect:(CGRect)contentRect{
CGFloat imagePadding = 3;
CGFloat imageH = 41;
CGFloat imageW = 37;
if (self.selected) {
imageW = 45;
imageH = 52;
}
CGFloat imageX = (btnWidth - imageW) / 2 ;
CGFloat imageY = btnHeight-titlePadding-_tittleH-imagePadding-imageH;
return CGRectMake(imageX, imageY, imageW, imageH);
}
//禁止高亮
-(BOOL) isHighlighted{
return NO;
}
@end
最后上结果图