1. 需求
自定义tabBar.png
如图所示,有时候,传统的4个tabBarButton不能满足我们的要求,比如说我们想多添加一个plusButton,这个plusButton的样式明显与其它的4个tabBarButton不同。
2. 设计思路
2.1 利用KVC替换掉系统自带的tabBar
在自定义的SCTabBarController里面做一些操作,替换掉系统自带的tabBar
SCTabBar *newDefinedTabBar = [[SCTabBar alloc]init];
[self setValue:newDefinedTabBar forKey:@"tabBar"];
2.2 添加子navigationController控制器作为tabbarController的item。
完成步骤1后,再执行系统添加子控制器的操作,这时候,相关联的tabBarButton其实是与新的SCTabBar相关联了
HomeViewController *homeVC = [[HomeViewController alloc]init];
[self addViewControlerWithController:homeVC title:@"首页" tabBarItemImageName:@"tabbar_home" selectedTabBarItemImageName:@"tabbar_home_selected"];
2.3 创建并添加plusButton
可以在SCTabBarController里添加子plusButton,设置其位置在中间显示
但最好是放在自定义的SCTabBar里面
- (instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
//1.将button加入到self.tabBar中去,并设置其frame
UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(0,0,64,44)];
[button setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button"] forState:UIControlStateNormal];
[button setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button_highlighted"] forState:UIControlStateHighlighted];
[button setImage:[UIImage imageNamed:@"tabbar_compose_icon_add"] forState:UIControlStateNormal];
[button setImage:[UIImage imageNamed:@"tabbar_compose_icon_add_highlighted"] forState:UIControlStateHighlighted];
[self addSubview:button];
[button addTarget:self action:@selector(plusButtonClicked:) forControlEvents:UIControlEventTouchUpInside];
}
return self;
}
2.4 重写layoutSubViews方法,对其子控件进行重新布局
- (void)layoutSubviews{
[super layoutSubviews];
//重新排布tabBar的位置
int count = 5;
NSLog(@"self.subViews.count=%ld",self.subviews.count);
CGFloat width = self.width / count*1.0f;
CGFloat height = self.height;
CGFloat tabBarButtonIndex = 0;
for (UIView *subView in self.subviews) {
//设置center的中心位置
if ([subView isKindOfClass:[UIButton class]]) {
NSLog(@"self.centerX is %f",self.centerX);
subView.centerX = self.centerX;
}
Class classStr = NSClassFromString(@"UITabBarButton");
if ([subView isKindOfClass:classStr]) {
subView.width = width;
subView.height = height;
subView.x = width * tabBarButtonIndex;
tabBarButtonIndex++;
if (tabBarButtonIndex==2) {
tabBarButtonIndex++;
}
}
}
}