最近的项目中有需求在tabbar中间添加凸起按钮，并且点击时按钮要旋转，看了仿斗鱼的凸起，点击后是present出来view，而不是像常规的tabbar上添加一个页面，所以不符合要求，经过一段摸索最后得的一个比较好的效果，下面看效果图
![效果图.gif]
##需求分析
* tabbar有5个item，每个对应一个页面
* 中间item为凸起按钮
* 中间按钮点击后旋转
##效果实现
* 设置5个item
我们一步步来解决这个问题，首先创建mctabbarcontroller继承uitabbarcontroller，然后和常规一样创建5个item，中间的按钮不设置图片，代码如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//mctabbarcontroller.m
//添加子控制器
- (void)addchildviewcontrollers{
//图片大小建议32*32
[self addchildrenviewcontroller:[[viewcontroller alloc] init] andtitle:@"首页" andimagename:@"tab1_n" andselectimage:@"tab1_p"];
[self addchildrenviewcontroller:[[viewcontroller alloc] init] andtitle:@"扩展" andimagename:@"tab2_n" andselectimage:@"tab2_p"];
//中间这个不设置东西，只占位
[self addchildrenviewcontroller:[[viewcontroller alloc] init] andtitle:@"旋转" andimagename:@"" andselectimage:@""];
[self addchildrenviewcontroller:[[viewcontroller alloc] init] andtitle:@"发现" andimagename:@"tab3_n" andselectimage:@"tab3_p"];
[self addchildrenviewcontroller:[[viewcontroller alloc] init] andtitle:@"我" andimagename:@"tab4_n" andselectimage:@"tab4_p"];
}
- (void)addchildrenviewcontroller:(uiviewcontroller *)childvc andtitle:(nsstring *)title andimagename:(nsstring *)imagename andselectimage:(nsstring *)selectedimage{
childvc.tabbaritem.image = [uiimage imagenamed:imagename];
childvc.tabbaritem.selectedimage = [uiimage imagenamed:selectedimage];
childvc.title = title;
basenavigationcontroller *basenav = [[basenavigationcontroller alloc] initwithrootviewcontroller:childvc];
[self addchildviewcontroller:basenav];
}
|
这样实现的效果如下图所示
[图一.png]
* 添加凸起按钮
我们可以在uitabbar上添加我们的凸起按钮，让他的位置在没有设置的中间按钮偏上，按钮的点击和中间按钮点击绑定，这里直接在mctabbarcontroller.m中添加会有问题
1、因为凸起按钮的frame超出了uitabbar的frame，这样超出的区域点击按钮会没有响应（图二红框区域），原因和解决办法详情参考我的这篇[ios uibutton 点击无响应的解决办法]()，由于要在uitabbar上添加凸起按钮，并且处理点击无效的问题，所以这里创建了mctabbar继承uitabbar
[图二.png]
2、由于uitabbar是readonly的，所以我们不能直接对他进行赋值，这里利用kvc访问私有变量将mctabbar赋值给"tabbar"
**具体实现**
mctabbar
```
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
#import
@interface mctabbar : uitabbar
@property (nonatomic, strong) uibutton *centerbtn; //中间按钮
@end
```
```
@implementation mctabbar
- (instancetype)init{
if (self = [super init]){
[self initview];
}
return self;
}
- (void)initview{
_centerbtn = [uibutton buttonwithtype:uibuttontypecustom];
// 设定button大小为适应图片
uiimage *normalimage = [uiimage imagenamed:@"tabbar_add"];
_centerbtn.frame = cgrectmake(0, 0, normalimage.size.width, normalimage.size.height);
[_centerbtn setimage:normalimage forstate:uicontrolstatenormal];
//去除选择时高亮
_centerbtn.adjustsimagewhenhighlighted = no;
//根据图片调整button的位置(图片中心在tabbar的中间最上部，这个时候由于按钮是有一部分超出tabbar的，所以点击无效，要进行处理)
_centerbtn.frame = cgrectmake(([uiscreen mainscreen].bounds.size.width - normalimage.size.width)/2.0, - normalimage.size.height/2.0, normalimage.size.width, normalimage.size.height);
[self addsubview:_centerbtn];
}
//处理超出区域点击无效的问题
- (uiview *)hittest:(cgpoint)point withevent:(uievent *)event{
uiview *view = [super hittest:point withevent:event];
if (view == nil){
//转换坐标
cgpoint temppoint = [self.centerbtn convertpoint:point fromview:self];
//判断点击的点是否在按钮区域内
if (cgrectcontainspoint(self.centerbtn.bounds, temppoint)){
//返回按钮
return _centerbtn;
}
}
return view;
}
```
|
利用kvc赋值
```
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
//mctabbarcontroller.m
- (void)viewdidload {
[super viewdidload];
_mctabbar = [[mctabbar alloc] init];
[_mctabbar.centerbtn addtarget:self action:@selector(buttonaction:) forcontrolevents:uicontroleventtouchupinside];
//选中时的颜色
_mctabbar.tintcolor = [uicolor colorwithred:27.0/255.0 green:118.0/255.0 blue:208/255.0 alpha:1];
//透明设置为no，显示白色，view的高度到tabbar顶部截止，yes的话到底部
_mctabbar.translucent = no;
//利用kvc 将自己的tabbar赋给系统tabbar
[self setvalue:_mctabbar forkeypath:@"tabbar"];
self.delegate = self;
[self addchildviewcontrollers];
}
```
|
* 点击旋转
在中间按钮的点击事件执行时旋转第二个index，然后执行旋转动画，
在tabbar的代理事件中监听旋中中间按钮的事件，然后执行旋转动画，其他按钮则移除动画，代码如下
```
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
- (void)buttonaction:(uibutton *)button{
self.selectedindex = 2;//关联中间按钮
[self rotationanimation];
}
//tabbar选择时的代理
- (void)tabbarcontroller:(uitabbarcontroller *)tabbarcontroller didselectviewcontroller:(uiviewcontroller *)viewcontroller{
if (tabbarcontroller.selectedindex == 2){//选中中间的按钮
[self rotationanimation];
}else {
[_mctabbar.centerbtn.layer removeallanimations];
}
}
//旋转动画
- (void)rotationanimation{
cabasicanimation *rotationanimation = [cabasicanimation animationwithkeypath:@"transform.rotation.z"];
rotationanimation.tovalue = [nsnumber numberwithfloat:m_pi*2.0];
rotationanimation.duration = 3.0;
rotationanimation.repeatcount = huge;
[_mctabbar.centerbtn.layer addanimation:rotationanimation forkey:@"key"];
}
|
```
* 其他
这里写了basenavigationcontroller继承自uinavigationcontroller，处理了push后隐藏底部uitabbar的情况，并解决了iphonx上push时uitabbar上移的问题。
最后，附上demo地址，如果对你有所帮助，不要吝啬你的star✨哦！[mctabbardemo]
(https://github.com/ccalary/mctabbardemo)
总结
以上所述是小编给大家介绍的ios tabbar中间添加凸起可旋转按钮功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！
原文链接：http://www.cocoachina.com/ios/20171218/21572.html