iOS滑动弧形菜单实现与Demo

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

menu.gif

实现思路：

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

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

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

实现细节:

已知圆心、半径与x值求y值：（x-a）^2 + (y - b)^ 2 = r^2。

用到的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，地址:https://github.com/xuuhan/HXCamberMenu

因为项目比较忙，暂时还没时间做完善，效果和功能还有着明显的限制，后续闲下来会进一步完善封装，希望同学们多多指教