服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - IOS - iOS Tabbar中间添加凸起可旋转按钮功能

iOS Tabbar中间添加凸起可旋转按钮功能

2021-04-09 15:43suiling IOS

最近的项目中有需求在tabbar中间添加凸起按钮,并且点击时按钮要旋转,看了仿斗鱼的凸起,点击后是present出来View,这篇文章主要介绍了iOS Tabbar中间添加凸起可旋转按钮,需要的朋友可以参考下

最近的项目中有需求在tabbar中间添加凸起按钮,并且点击时按钮要旋转,看了仿斗鱼的凸起,点击后是present出来view,而不是像常规的tabbar上添加一个页面,所以不符合要求,经过一段摸索最后得的一个比较好的效果,下面看效果图

iOS 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];
}

这样实现的效果如下图所示

iOS Tabbar中间添加凸起可旋转按钮功能

[图一.png]

* 添加凸起按钮

我们可以在uitabbar上添加我们的凸起按钮,让他的位置在没有设置的中间按钮偏上,按钮的点击和中间按钮点击绑定,这里直接在mctabbarcontroller.m中添加会有问题

1、因为凸起按钮的frame超出了uitabbar的frame,这样超出的区域点击按钮会没有响应(图二红框区域),原因和解决办法详情参考我的这篇[ios uibutton 点击无响应的解决办法](),由于要在uitabbar上添加凸起按钮,并且处理点击无效的问题,所以这里创建了mctabbar继承uitabbar

iOS Tabbar中间添加凸起可旋转按钮功能

[图二.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

延伸 · 阅读

精彩推荐
  • IOSiOS布局渲染之UIView方法的调用时机详解

    iOS布局渲染之UIView方法的调用时机详解

    在你刚开始开发 iOS 应用时,最难避免或者是调试的就是和布局相关的问题,下面这篇文章主要给大家介绍了关于iOS布局渲染之UIView方法调用时机的相关资料...

    windtersharp7642021-05-04
  • IOSiOS通过逆向理解Block的内存模型

    iOS通过逆向理解Block的内存模型

    自从对 iOS 的逆向初窥门径后,我也经常通过它来分析一些比较大的应用,参考一下这些应用中某些功能的实现。这个探索的过程乐趣多多,不仅能满足自...

    Swiftyper12832021-03-03
  • IOSIOS 屏幕适配方案实现缩放window的示例代码

    IOS 屏幕适配方案实现缩放window的示例代码

    这篇文章主要介绍了IOS 屏幕适配方案实现缩放window的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...

    xiari5772021-06-01
  • IOSiOS 雷达效果实例详解

    iOS 雷达效果实例详解

    这篇文章主要介绍了iOS 雷达效果实例详解的相关资料,需要的朋友可以参考下...

    SimpleWorld11022021-01-28
  • IOS解析iOS开发中的FirstResponder第一响应对象

    解析iOS开发中的FirstResponder第一响应对象

    这篇文章主要介绍了解析iOS开发中的FirstResponder第一响应对象,包括View的FirstResponder的释放问题,需要的朋友可以参考下...

    一片枫叶4662020-12-25
  • IOS关于iOS自适应cell行高的那些事儿

    关于iOS自适应cell行高的那些事儿

    这篇文章主要给大家介绍了关于iOS自适应cell行高的那些事儿,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    daisy6092021-05-17
  • IOSIOS开发之字典转字符串的实例详解

    IOS开发之字典转字符串的实例详解

    这篇文章主要介绍了IOS开发之字典转字符串的实例详解的相关资料,希望通过本文能帮助到大家,让大家掌握这样的方法,需要的朋友可以参考下...

    苦练内功5832021-04-01
  • IOSiOS中tableview 两级cell的展开与收回的示例代码

    iOS中tableview 两级cell的展开与收回的示例代码

    本篇文章主要介绍了iOS中tableview 两级cell的展开与收回的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    J_Kang3862021-04-22