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 两种方法实现左右滑动出现侧边菜单栏 slide view
- ios 仿facebook 滑动导航菜单实现
- iOS 两种方法实现左右滑动出现侧边菜单栏 slide view
- java实现遍历树形菜单方法——设计思路【含源代码】
- iOS UIScrollView循环拖动的思路和实现方法
- javascript简单实现滑动菜单效果的方法
- jQuery弹出侧边栏滑动菜单实现思路
- IOS开发 左右弹出菜单视图 菜鸟纯代码实现思路
- iOS 两种方法实现左右滑动出现侧边菜单栏 slide view
- js实现鼠标感应向下滑动隐藏菜单的方法
- MUI 实现侧滑菜单及其主体部分上下滑动的方法
- iOS学习笔记44——实现滑动菜单SlidingMenu
- iOS 两种方法实现左右滑动出现侧边菜单栏 slide view
- javascript简单实现滑动菜单效果的方法
- jQuery实现菜单感应鼠标滑动动画效果的方法
- 实现ios常见菜单效果的思路
- iOS边练边学--菜单悬停效果的实现思路
- jQuery弹性滑动导航菜单实现思路及代码
- js实现鼠标感应向下滑动隐藏菜单的方法
- IOS学习:在一个UIViewController中实现侧边菜单的思路及demo