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

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

![效果图.gif](http://upload-images.jianshu.io/upload_images/1828346-c472c423ad7e1e0c.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##需求分析

* tabbar有5个item,每个对应一个页面

* 中间item为凸起按钮

* 中间按钮点击后旋转

##效果实现

* 设置5个item

我们一步步来解决这个问题,首先创建MCTabBarController继承UITabBarController,然后和常规一样创建5个item,中间的按钮不设置图片,代码如下

//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 点击无响应的解决办法](http://www.jianshu.com/p/7a35d6c25bfe),由于要在UITabBar上添加凸起按钮,并且处理点击无效的问题,所以这里创建了MCTabBar继承UITabBar

[图二.png]

2、由于UITabBar是readonly的,所以我们不能直接对他进行赋值,这里利用KVC访问私有变量将MCTabBar赋值给"tabBar"

**具体实现**

MCTabBar

```

#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赋值

```

//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的代理事件中监听旋中中间按钮的事件,然后执行旋转动画,其他按钮则移除动画,代码如下

```

- (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中间添加凸起可旋转按钮功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • iOS应用开发中UITabBarController标签栏控制器使用进阶

    做了这么长时间的ios开发了,最基本的UITabBarController和UINavigationController都用了好长时间了,总是改现成的代码,或者各种自定义控件的修改,用的都有些混乱了,呵呵.还是自己做个demo再复习一下吧,记录下来以备后续翻查. 一.UITabBarController和UINavigationController的联合使用 这种方法最常见,好像一般有tabbar都会有naviBar.一般使用, 1. 在appDelegate里面创建UITabBarContro

  • iOS界面跳转时导航栏和tabBar的隐藏与显示功能

    一.当A页面要push到B页面,需要将B页面的导航栏隐藏时,我们只需要在A页面中重写以下两个方法: override func viewWillAppear(animated: Bool) { super.viewWillAppear(animated) self.navigationController?.setNavigationBarHidden(true, animated: true) } override func viewWillDisappear(animated: Bool)

  • iOS开发中UITabBarController的使用示例

    首先我们看一下它的view层级图: 复制代码 代码如下: - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions  {      self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];      // Override point fo

  • iOS中给自定义tabBar的按钮添加点击放大缩小的动画效果

    之前想过一些通过第三方的方式实现动画,感觉有点麻烦,就自己写了一个 不足之处还望大家多多指出 // 一句话,写在UITabBarController.m脚本中,tabBar是自动执行的方法 // 点击tabbarItem自动调用 -(void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item { NSInteger index = [self.tabBar.items indexOfObject:item]; [self a

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

    最近的项目中有需求在tabbar中间添加凸起按钮,并且点击时按钮要旋转,看了仿斗鱼的凸起,点击后是present出来View,而不是像常规的tabbar上添加一个页面,所以不符合要求,经过一段摸索最后得的一个比较好的效果,下面看效果图 ![效果图.gif](http://upload-images.jianshu.io/upload_images/1828346-c472c423ad7e1e0c.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/

  • iOS启动页倒计时跳过按钮功能

    WSDrawCircleProgress, 根据UIBezierPath和CAShapeLayer自定义倒计时进度条,适用于app启动的时候设置一个倒计时关闭启动页面.可以设置进度条颜色,填充颜色,进度条宽度以及点击事件等. 公共方法: //set track color @property (nonatomic,strong)UIColor *trackColor; //set progress color @property (nonatomic,strong)UIColor *progre

  • iOS 中Swift仿微信添加提示小红点功能(无数字)

    具体内容详情如下所示: 以分类的方式实现 代码 UITabBar+Extenstion.swift fileprivate let lxfFlag: Int = 666 extension UITabBar { // MARK:- 显示小红点 func showBadgOn(index itemIndex: Int, tabbarItemNums: CGFloat = 4.0) { // 移除之前的小红点 self.removeBadgeOn(index: itemIndex) // 创建小红点

  • iOS键盘如何添加隐藏键盘功能

    本文实例为大家分享了iOS添加隐藏键盘功能的具体方法,供大家参考,具体内容如下 键盘添加个隐藏键盘功能 使用方法:导入XMCustomKeyBoard.h [XMCustomKeyBoard CancelableKeyboard:控件对象 ]; 控件对象可以是UITextFiled,UITextView,UISearchBar 等一系列调用键盘输入的类的实例 1.自定义个UIBarButtonItem,添加属性editableView,editableView存储需要添加隐藏键盘功能的那个控件

  • iOS 增加右侧按钮功能实例代码

    一,工程图. 二,代码. ViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. //增加右侧按钮 [self addRightButton]; } #pragma -mark -functions //增加右侧按钮 -(void)addRightButton { UIBarButtonI

  • Android标题栏中添加返回按钮功能

    标题栏中的返回按钮在实际使用中用的比较多,今天就来讲讲我在项目开发中的使用经历,话不多说,还是直接上源码,上源码是最给力的. 一. 编写自定义类 public class CustomTitle { private static Activity mActivity; public static void getCustomTitle(Activity activity, String title) { mActivity = activity; mActivity.requestWindowF

  • 微信小程序中添加客服按钮contact-button功能

    小程序的客服系统,是微信做的非常成功的一个功能,开发者可以很方便的通过一行代码,就可实现客服功能. 1. 普通客服按钮添加 <button open-type='contact' session-from=''>客服-联系我们</button> 2. 悬浮客服按钮添加,图片自定义 大家看地图的有个客服图片图片资源.大家去iconfont 网站去找一个就可以了 index.wxml <button class="kf_button" open-type=&q

  • Java 在PDF中添加页面跳转按钮功能(代码演示)

    在PDF 中可通过按钮来添加动作跳转到指定页面,包括跳转到文档首页.文档末页.跳转到上一页.下一页.或跳转到指定页面等.下面将通过java代码来演示如何添加具有以上几种功能的按钮. 使用工具: Free Spire.PDF for Java (免费版) IntelliJ IDEA Jar文件获取及导入: 方法1:通过官网下载jar文件包.下载后,解压文件,并将lib文件夹下的Spire.Pdf.jar文件导入java程序.参考如下导入效果: 方法2: 可通过maven仓库安装导入. Java 代

  • IOS提醒用户重新授权打开定位功能

    iOS 8及以上版本最不为人知的一个特点是与应用设置的深层链接,用户可以根据APP的需要授权启用位置.通知.联系人.相机.日历以及健康等设置. 大多数应用程序仅仅是弹出一个包含操作指令的警示窗口,如"进入设置>隐私>位置>OUR_APP".例如,推特的应用程序有一个更为精致和友好的指示对话框,所以我就把它当做一个例子来使用(可惜大多数应用程序都会有一个非常糟糕的版本). 我现在以一个心情沮丧用户的身份写这个帖子,希望更多的iOS开发者能与用户设置建立直接的深层链接,尤

  • iOS仿微信添加标签效果(shape实现)

    一. 概述 可以说微信做的用户体验太棒了,可以做到老少皆宜,给个赞,我们也同时应该告诫自己,用户体验应该向微信看齐,微信就是我们的标杆,那我们今天也来仿一仿微信添加的标签功能.只能仿着做了,真是做不到微信的那种体验.甘拜下风. 我们上篇学习了shape属性的用法,那我们今天就用shape来做下微信的标签功能.先看一下效果. 我不仅用到了shape属性,还用到了翔哥的标签布局FlowLayout跟TagFlowLayout鸿洋的博客 二.效果图 三 .定义shape 添加标签 <?xml vers

随机推荐