iOS圆形布局

前段时间产品提的需求要在APP里面添加一个球的悬浮按钮,点击之后可以展开,这种设计已经越来越少,本人虽不认可,但还是本着职业的态度去完成了,在这来记录一下自己的做法和方案。
先看一下效果图


left.jpg

拖拽到右边之后


right.jpg

这个按钮按钮悬浮窗点击之后可以关闭,关闭了就变成一个可以拖拽的按钮。关于拖拽这个很简单,我们给这个视图加一个pan手势,然后设置它的可拖动范围就可以,下面附上拖拽代码

- (void)panScroll:(UIPanGestureRecognizer *)recognizer {
    if (recognizer.state == UIGestureRecognizerStateChanged) {//设置拖动范围
        CGPoint translation = [recognizer locationInView:self];
        CGPoint newCenter = CGPointMake(recognizer.view.center.x+ translation.x,
                                        recognizer.view.center.y + translation.y);
        newCenter.y = MIN(MYUISCREEN_HEIGHT-49-110, newCenter.y);
        newCenter.y = MAX(190, newCenter.y);
        newCenter.x = MAX(30, newCenter.x);
        newCenter.x = MIN(MYUISCREEN_WIDTH-30,newCenter.x);
        recognizer.view.center = newCenter;
        [recognizer setTranslation:CGPointZero inView:self];
    }
    
    if (recognizer.state == UIGestureRecognizerStateEnded) {//可以在这里做一些复位处理

    }
}

第二个点就是这个按钮布局,按钮布局大概要用到一些高中的知识了,我们知道按钮的圆心坐标和半径,然后根据弧度通过正弦和余弦计算出布局按钮的中心点,下面附上核心代码

#define degreesToRadians(degrees) ((degrees * (float)M_PI) / 180.0f)  //这个公式是计算弧度的

for (int i= 1; i<=_imagesArray.count;i++) {
        float angle = degreesToRadians((360 / _separateValue) * (i+_startValue)); //_separateValue 几等分  _startValue 布局开始的位置,通过它来控制左半圆或者右半圆
        float y = cos(angle) * dist; //下面两个就是通过正余弦计算中心点的
        float x = sin(angle) * dist;

        CGPoint center = CGPointMake(centerBtn.center.x + x, centerBtn.center.y + y);
        btn.center = center;
    }

上面是核心代码,按照以上逻辑,基本上就可以实现这种半圆形的布局了,如果是圆形的话,用collectionview也是可以的。

你可能感兴趣的:(iOS圆形布局)