前段时间产品提的需求要在APP里面添加一个球的悬浮按钮,点击之后可以展开,这种设计已经越来越少,本人虽不认可,但还是本着职业的态度去完成了,在这来记录一下自己的做法和方案。
先看一下效果图
拖拽到右边之后
这个按钮按钮悬浮窗点击之后可以关闭,关闭了就变成一个可以拖拽的按钮。关于拖拽这个很简单,我们给这个视图加一个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也是可以的。