iOS实现滑动弧形菜单的思路与方法

 更新时间:2017年05月04日 11:31:49   作者:H的幻想世界  
这篇文章主要给大家介绍了利用iOS实现滑动弧形菜单的思路与方法,实现后的效果非常不错,非常适合大家在开发中使用,文末给出了封装源码下载的地址供大家下载学习,需要的朋友可以参考,下面来一起看看吧。

前言

最近公司的项目中需要用到弧形菜单,起初自定义UICollectionView的layout,但实现出的效果并不符合项目中要求按钮始终垂直于界面、界面始终保持几个按钮等一系列需求(是我水平不够),后来索性用UIView写了一个弧形可滑动菜单。

效果如下:


实现思路:

      1、根据思路可以自己确定到半径与圆心的每个按钮所在的x点,可根据数学公式求得y点

      2、给按钮添加拖动手势UIPanGestureRecognizer,根据偏移量x计算出对应偏移弧线的距离,根据圆的运动轨迹赋值给按钮的x 并更新 y

      3、结束拖动手势的时候计算偏移距离、根据是否划到下一个按钮的一半的width来实施动画更新按钮的center

实现细节:

已知圆心、半径与x值求y值:(x-a)^2 + (y - b)^ 2 = r2。

用到的UIPanGestureRecognizer的三种状态:UIGestureRecognizerStateBegan\UIGestureRecognizerStateChanged\UIGestureRecognizerStateEnded

用UIPanGestureRecognizer的locationInView方法来确定当前点的位置

if(pgr.state==UIGestureRecognizerStateBegan){

  self.endMove = NO;

  self.beginPoint=[pgr locationInView:self];

 }else if (pgr.state==UIGestureRecognizerStateChanged){
  self.movePoint= [pgr locationInView:self];

  self.moveX = sqrt(fabs(self.movePoint.x - self.beginPoint.x) * fabs(self.movePoint.x - self.beginPoint.x) + fabs(self.movePoint.y - self.beginPoint.y) * fabs(self.movePoint.y - self.beginPoint.y));
}

计算出偏移的x点后要根据起始点来判断用户是向左滑动还是向右滑动

if (self.movePoint.x>self.beginPoint.x) {
   self.moveNum += self.moveX;
  } else{
   self.moveNum -= self.moveX;
  }

之后判断判断是否超过了所有按钮所在的范围并赋值

if (self.moveNum > 0) {
   self.moveNum = 0;
  }

  if (self.moveNum < -((SCREEN_WIDTH - 20 - subViewW)/(self.showBtnCount - 1)) * (self.subViewArray.count - self.showBtnCount)) {
   self.moveNum = -((SCREEN_WIDTH - 20 - subViewW)/(self.showBtnCount - 1)) * (self.subViewArray.count - self.showBtnCount);
  }

将偏移量赋值给x并更新y值

 ///中心点
 CGFloat yy = 0.0;
 CGFloat xx = 0.0;
 CGFloat margin = 0.0;
 ///子视图x中点
 UIView *view = self.subViewArray[0];
 CGFloat subCenterX = view.frame.size.width / 2;

 for (NSInteger i=0; i<self.subViewArray.count ;i++) {// 178,245

  margin = i * ((SCREEN_WIDTH - 20 - view.frame.size.width)/(self.showBtnCount - 1));

  xx = 10 + subCenterX + fabs(self.subViewX) + margin + self.moveNum;

  yy = sqrt((self.radius - self.circleMargin / 2) * (self.radius - self.circleMargin / 2) - (xx - self.radius) * (xx - self.radius)) + self.radius;

  if (xx >= self.radius - (self.radius - self.circleMargin / 2) && xx <= self.radius + (self.radius - self.circleMargin / 2)) {

   UIButton *button=[self.subViewArray objectAtIndex:i];
   NSLog(@"~~~~~~~%@",button);
   if (self.isEndMove) {
    [UIView animateWithDuration:0.3 animations:^{
     button.center=CGPointMake(xx , yy);
    }];
   } else{
    button.center=CGPointMake(xx , yy);
   }
  }
  NSLog(@"xx:%f---------yy:%f",xx,yy);
 }

原理大概就是这些

然后把项目中的效果直接做了简单的封装传了个demo

Github地址:https://github.com/xuuhan/HXCamberMenu

本地下载地址:http://xiazai.jb51.net/201705/yuanma/HXCamberMenu(jb51.net).rar

总结

以上就是这篇文章的全部内容了,实现的效果和功能可能还有着明显的限制,希望同学们多多指教,同时也希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • iOS WebView中使用webp格式图片的方法

    iOS WebView中使用webp格式图片的方法

    由于最近项目需求,需要将项目中图片的加载做到同时兼容WebP格式,所以下面这篇文章主要给大家介绍了关于在iOS WebView中使用webp格式图片的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2018-05-05
  • iOS开发中实现显示gif图片的方法

    iOS开发中实现显示gif图片的方法

    这篇文章主要介绍了iOS开发中实现显示gif图片的方法,代码基于传统的Objective-C,需要的朋友可以参考下
    2015-09-09
  • IOS UI学习教程之使用UIImageView控件制作动画

    IOS UI学习教程之使用UIImageView控件制作动画

    这篇文章主要为大家详细介绍了IOS UI学习教程之使用UIImageView控件制作动画,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 快速解决ios微信下audio无法自动播放的问题

    快速解决ios微信下audio无法自动播放的问题

    下面小编就为大家分享一篇快速解决ios微信下audio无法自动播放的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • objective-c实现点到直线的距离及与垂足的交点

    objective-c实现点到直线的距离及与垂足的交点

    这篇文章主要给大家介绍了利用objective-c实现点到直线的距离及与垂足的交点的相关资料,文中给出了详细的实现思路和实现代码,对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-04-04
  • iOS开发之随机生成两圆之间的标准圆

    iOS开发之随机生成两圆之间的标准圆

    这篇文章主要给大家介绍了iOS如何实现在两圆之间随机生成标准圆的方法,实现的效果类似寻找附近人或者附近商家的动态效果,有需要的朋友可以参考借鉴,下面来一起学习学习吧。
    2017-01-01
  • iOS滑动全屏实现返回功能

    iOS滑动全屏实现返回功能

    这篇文章主要为大家详细介绍了iOS滑动全屏实现返回功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • 一篇文章让你看懂IOS中的block为何再也不需要WeakSelf弱引用

    一篇文章让你看懂IOS中的block为何再也不需要WeakSelf弱引用

    这篇文章主要给大家介绍了关于IOS中block为何再也不需要WeakSelf弱引用的相关资料,文中通过示例代码介绍的非常详细,对各位iOS开发者们具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • IOS  开发获取本地图片路径及上传

    IOS 开发获取本地图片路径及上传

    这篇文章主要介绍了IOS 开发获取本地图片路径及上传的相关资料,需要的朋友可以参考下
    2017-05-05
  • iOS开发之适配iOS10以及Xcode8

    iOS开发之适配iOS10以及Xcode8

    这篇文章主要为大家详细介绍了iOS开发之适配iOS10以及Xcode8的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09

最新评论