效果图
效果图.gif
这是一个自定义的弧形菜单控件，手指滑动可以对其进行旋转，点击图标可以做一些操作，功能就是这样，下面介绍是如何实现的。
功能实现
自定义属性
要实现这样一个控件，首先要知道这个圆弧的半径mRadius，以及初始可见的图标个数mVisiableItemCount（这里是5个）。我们来设置两个自定义属性，在attrs.xml中添加如下代码：
<declare-styleable name="ArcDragMenu">
<attr name="mradius" format="dimension" />
<attr name="visibleitemcount" format="integer" />
</declare-styleable>
这样我们就可以在布局文件中设置自定义的属性。
<com.example.arcmenu.view.ArcDragMenu
android:id="@+id/arcdragmenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:mradius="360dp"
app:visibleitemcount="5"/>
在ArcDragMenu的构造方法中获取自定义属性的值。
public ArcDragMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// 获取自定义属性的值
TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.ArcDragMenu, defStyleAttr, 0);
mRadius = (int) a.getDimension(R.styleable.ArcDragMenu_mradius, TypedValue
.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 360,
getResources().getDisplayMetrics()));
mVisiableItemCount = (int) a.getInteger(R.styleable.ArcDragMenu_visibleitemcount, 5);
a.recycle();
}
计算角度和位置
角度.PNG
如图，我们把整个圆弧的角度分成mVisiableItemCount份（这里是5份），那么图中蓝∠占1份，黄∠占2份，黑∠占2.5份。黑∠的对边为VIew宽度的一半，斜边为圆弧半径mRadius，由此可得：
黑∠ = Math.asin((getMeasuredWidth()/2.0)/mRadius);
蓝∠的角度的大小angleDelay为：
angleDelay = Math.asin((getMeasuredWidth()/2.0)/mRadius)*2/ mVisiableItemCount;
第一个图标初始角度mInitialAngle的值（即黄∠）：
//这里加负号表示位于中心轴的左边
mInitialAngle = angleDelay *(-(mVisiableItemCount /2.0 - 0.5));
第二个图标的角度为mInitialAngle+angleDelay ，其他以此类推。
知道了角度，计算位置就很简单了，这里就不一一计算了，直接看代码。
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
angleDelay = Math.asin((getMeasuredWidth()/2.0)/mRadius)*2/ mVisiableItemCount;
mInitialAngle = angleDelay *(-(mVisiableItemCount /2.0-0.5));
if(mCurrAngle ==0){
mCurrAngle = mInitialAngle;
}
double angle = mCurrAngle;
int count = getChildCount();
for (int i = 0; i < count; i++){
View child = getChildAt(i);
//子View的左上角坐标（cl,ct）
int cl = (int) (mRadius * Math.sin(angle)) + getMeasuredWidth()/2 - child.getMeasuredWidth()/2;
int ct = (int) (mRadius * Math.cos(angle)) ;
//测量的子View的宽，高
int cWidth = child.getMeasuredWidth();
int cHeight = child.getMeasuredHeight();
//设置子view的位置
child.layout(cl, ct, cl + cWidth, ct + cHeight);
angle += angleDelay;
}
}
滑动
由上面的代码可以看出，图标的位置是由当前角度mCurrAngle来计算的，所以我们只需改变mCurrAngle的值即可滑动控件。我们要计算出手指按下的角度，手指移动过程中角度，从而计算出移动了多少角度，然后加到mCurrAngle上。部分代码如下：
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
float x = ev.getRawX();
float y = ev.getRawY();
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
mLastX = x;
mLastY = y;
break;
case MotionEvent.ACTION_MOVE:
/**
* 获得开始的角度
*/
float start = getAngle(mLastX, mLastY);
/**
* 获得当前的角度
*/
float end = getAngle(x, y);
float dr = end - start;
//防止超出范围，左滑到最后一个，右滑到第一个就不能再滑了
if(mCurrAngle + dr <= mInitialAngle && mCurrAngle + dr >= mInitialAngle - (mMenuItemCount- mVisiableItemCount)*angleDelay){
mCurrAngle += dr;
}
// 重新布局
requestLayout();
mLastX = x;
mLastY = y;
break;
case MotionEvent.ACTION_UP:
break;
default:
break;
}
return super.dispatchTouchEvent(ev);
}
private float getAngle(float xTouch, float yTouch) {
double x = xTouch - getMeasuredWidth()/2;
double y = yTouch;
return (float) (Math.asin(x / Math.hypot(x, y)));//其中Math.hypot(x, y)为sqrt(x2 +y2)
}
这样图标就可以随着手指一起滑动了，但是你可能会觉得太生硬了，手指松开就立刻停了，如果快速滑动时让它Fling一会就好了。
Fling
当手指抬起时，我们计算一下移动的角的速度。
// 计算每秒移动的角度
float anglePerSecond = mTmpAngle * 1000 / (System.currentTimeMillis() - mDownTime);
我们开一个任务去慢慢递减anglePerSecond 的值，同时去改变mCurrAngle的值，这样手指抬起后还能继续滑动，代码如下：
/**
* 记录上一次的x，y坐标
*/
private float mLastX;
private float mLastY;
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
float x = ev.getRawX();
float y = ev.getRawY();
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
mLastX = x;
mLastY = y;
mDownTime = System.currentTimeMillis();
mTmpAngle = 0;
// 如果当前已经在快速滚动
if (isFling){
// 移除快速滚动的回调
removeCallbacks(mFlingRunnable);
isFling = false;
return true;
}
break;
case MotionEvent.ACTION_MOVE:
/**
* 获得开始的角度
*/
float start = getAngle(mLastX, mLastY);
/**
* 获得当前的角度
*/
float end = getAngle(x, y);
float dr = end - start;
//防止超出范围，左滑到最后一个，右滑到第一个就不能再滑了
if(mCurrAngle + dr <= mInitialAngle && mCurrAngle + dr >= mInitialAngle - (mMenuItemCount- mVisiableItemCount)*angleDelay){
mCurrAngle += dr;
}
mTmpAngle += end - start;
// 重新布局
requestLayout();
mLastX = x;
mLastY = y;
break;
case MotionEvent.ACTION_UP:
// 计算每秒移动的角度
float anglePerSecond = mTmpAngle * 1000
/ (System.currentTimeMillis() - mDownTime);
// 如果达到该值认为是快速移动
if (Math.abs(anglePerSecond) > FLINGABLE_VALUE && !isFling) {
// post一个任务，去自动滚动
post(mFlingRunnable = new AutoFlingRunnable(anglePerSecond));
return true;
}
// 如果当前旋转角度超过NOCLICK_VALUE屏蔽点击
if (Math.abs(mTmpAngle) > NOCLICK_VALUE || System.currentTimeMillis()-mDownTime >500) {
return true;
}
break;
default:
break;
}
return super.dispatchTouchEvent(ev);
}
private float getAngle(float xTouch, float yTouch) {
double x = xTouch - getMeasuredWidth()/2;
double y = yTouch;
return (float) (Math.asin(x / Math.hypot(x, y)));//其中Math.hypot(x, y)为sqrt(x2 +y2)
}
/**
* 自动滚动的任务
*/
private class AutoFlingRunnable implements Runnable{
private float angelPerSecond;
public AutoFlingRunnable(float velocity)
{
this.angelPerSecond = velocity;
}
public void run(){
// 如果小于0.1,则停止
if (Math.abs(angelPerSecond) < 0.1f){
isFling = false;
return;
}
isFling = true;
// 不断改变mCurrAngle ，让其滚动，/60为了避免滚动太快
float dr = (angelPerSecond / 60);
if(mCurrAngle + dr <= mInitialAngle && mCurrAngle + dr >= mInitialAngle - (mMenuItemCount- mVisiableItemCount)*angleDelay){
mCurrAngle += dr;
}else if(mCurrAngle + dr <= mInitialAngle){
mCurrAngle = mInitialAngle - (mMenuItemCount- mVisiableItemCount)*angleDelay;
}else if(mCurrAngle + dr >= mInitialAngle - (mMenuItemCount- mVisiableItemCount)*angleDelay){
mCurrAngle = mInitialAngle;
}
// 逐渐减小这个值
angelPerSecond /= 1.066f;
postDelayed(this, 10);
// 重新布局
requestLayout();
}
}
到此已经全部结束了，有哪些做的不对的地方，希望大家多多指点。
源码
欢迎关注.jpg
网友评论