当前位置: 首页 > 编程笔记 >

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

马高谊
2023-03-14
本文向大家介绍iOS实现滑动弧形菜单的思路与方法,包括了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

总结

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

 类似资料:
  • 本文向大家介绍Android实现自定义的卫星式菜单(弧形菜单)详解,包括了Android实现自定义的卫星式菜单(弧形菜单)详解的使用技巧和注意事项,需要的朋友参考一下 一、前言 Android 实现卫星式菜单也叫弧形菜单,主要要做的工作如下: 1.动画的处理 2.自定义ViewGroup来实现卫星式菜单View (1)自定义属性        a. 在attrs.xml中定义属性        b

  • 本文向大家介绍Android利用滑动菜单框架实现滑动菜单效果,包括了Android利用滑动菜单框架实现滑动菜单效果的使用技巧和注意事项,需要的朋友参考一下 之前我向大家介绍了史上最简单的滑动菜单的实现方式,相信大家都还记得。如果忘记了其中的实现原理或者还没看过的朋友,请先去看一遍之前的文章Android仿人人客户端滑动菜单的侧滑特效实现代码,史上最简单的侧滑实现 ,因为我们今天要实现的滑动菜单框架

  • 问题内容: 有没有办法在没有任何第三方库的情况下在IOS Swift中实现Slide Sidebar Menu(像Facebook应用程序)?我在寻找解决方案,但我只建立了在Objective-C中实现的功能。 问题答案: 我相信您可以启动UISplitViewController表单,该表单已在iOS8中进行了大幅更新。观看会话 以了解详细信息,查看iOS8中的Controller Advanc

  • 我正在寻找一个像facebook应用那样的滑动菜单,即点击左侧菜单按钮,主屏幕向右滑动,然后点击“查看全部”,在幻灯片视图屏幕上,一个新的视图从右向左滑动。

  • 本文向大家介绍Android实现侧滑菜单DrawerLayout,包括了Android实现侧滑菜单DrawerLayout的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android实现侧滑菜单的具体代码,供大家参考,具体内容如下 点击左侧滑动 效果如下 代码实现过程: 1.导入框架build.gradle中 2.xml文件 主要的界面放在DrawerLayout 中,需要强调的是

  • 本文向大家介绍jquery实现最简单的滑动菜单效果代码,包括了jquery实现最简单的滑动菜单效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery实现最简单的滑动菜单效果代码。分享给大家供大家参考。具体如下: 这是一款最简单的jQuery下拉滑出菜单,jQuery代码实现,这里没有过多的去修饰菜单,仅是一些基本的实现,特别是对学习jQuery是个不错的参考实例,这里使用了一