看了建行的圆盘菜单，效果还不错，于是也动手试试做一个，目标——高度定制化，数量、样式及动画。
为什么要用适配器做成定制化？你知道的，UI那边总是动不动就改的，加点什么啊，删点什么啊，而且有多态机器需要适配，底色不一样就算了，数量和Item也不一样，怎么搞啊？我们总不能每一次都改一大串吧，改一大串和重复类似工作对我们来说简直就是折磨，所以，需要定制化。当然，如果第二次就直接淘汰圆盘了，那另当别论，。
工程代码：https://github.com/aknew123/CircleMenu 点击打开链接
效果如下：
程序架构的UML图，如下：
一、圆盘菜单自定义控件的使用
网上查看了一下，看一下他们的实现方式千篇一律，功能都写在一个文件里，阅读难度稍大，于是采用适配器模式做一个，把view和实现逻辑分离，就是简单的MVC，代码结构如下图：
当然，这只是一个Library，把DefaultMenuAdapter删了，重新编译就可以直接用jar包了，测试模块写在另一个工程，使用示例如下：
package com.example.circlemenutest;
import java.util.ArrayList;
import java.util.List;
import android.animation.ObjectAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.Toast;
import com.pan.tanglang.circlemenu.model.CircleMenuStatus;
import com.pan.tanglang.circlemenu.view.CircleMenu;
import com.pan.tanglang.circlemenu.view.CircleMenu.OnMenuItemClickListener;
import com.pan.tanglang.circlemenu.view.CircleMenu.OnMenuStatusChangedListener;
public class MainActivity extends Activity {
public static final String TAG = "MainActivity";
private String[] mItemTexts = new String[] { "安全中心", "特殊服务", "投资理财", "转账汇款", "我的账户", "信用卡", "腾讯", "阿里", "百度" };
private int[] mItemImgs = new int[] { R.drawable.foreign01, R.drawable.foreign02, R.drawable.foreign03,
R.drawable.foreign04, R.drawable.foreign05, R.drawable.foreign06, R.drawable.foreign07,
R.drawable.foreign08, R.drawable.foreign09 };
private CircleMenu mCircleMenu;
private ImageView ivCenter;
private float startRotate;
private float startFling;
ObjectAnimator animRotate = null;
ObjectAnimator animFling = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mCircleMenu = (CircleMenu) findViewById(R.id.cm_main);
ivCenter = (ImageView) findViewById(R.id.iv_center_main);
ivCenter.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "圆盘中心", Toast.LENGTH_SHORT).show();
}
});
mCircleMenu.setOnItemClickListener(new OnMenuItemClickListener() {
@Override
public void onClick(View view, int position) {
Toast.makeText(MainActivity.this, mItemTexts[position], Toast.LENGTH_SHORT).show();
}
});
mCircleMenu.setOnStatusChangedListener(new OnMenuStatusChangedListener() {
@Override
public void onStatusChanged(CircleMenuStatus status, double rotateAngle) {
// TODO 可在此处定制各种动画
odAnimation(status, (float)rotateAngle);
}
});
List<ItemInfo> data = new ArrayList<>();
ItemInfo item = null;
for (int i = 0; i < mItemTexts.length; i++) {
item = new ItemInfo(mItemImgs[i], mItemTexts[i]);
data.add(item);
}
mCircleMenu.setAdapter(new CircleMenuAdapter(data));
}
private void odAnimation(CircleMenuStatus status, float rotateAngle) {
switch (status) {
case IDLE:
Log.i(TAG, "--- -IDLE-----");
animRotate.cancel();
animRotate.cancel();
break;
case START_ROTATING:
Log.i(TAG, "--- -START_ROTATING-----");
break;
case ROTATING:
animRotate = ObjectAnimator.ofFloat(ivCenter, "rotation", startRotate, startRotate + rotateAngle);
animRotate.setDuration(200).start();
startRotate += rotateAngle;
// Log.i(TAG, "--- -ROTATING-----");
break;
case STOP_ROTATING:
Log.i(TAG, "--- -STOP_ROTATING-----");
break;
case START_FLING:
Log.i(TAG, "--- -START_FLING-----");
break;
case FLING:
// Log.i(TAG, "--- -FLING-----");
animFling = ObjectAnimator.ofFloat(ivCenter, "rotation", startFling, startFling + rotateAngle);
animFling.setDuration(200).start();
startFling += rotateAngle;
break;
case STOP_FLING:
Log.i(TAG, "--- -STOP_FLING-----");
break;
default:
break;
}
}
}
后面的是用户定制化动画实现（提供诸多状态，爱怎么折腾怎么折腾）。好了，我们来看看实现原理。
二、实现原理
1.先看需要做什么
（1）.圆盘菜单CircleMenu是一个转盘，装有各种Item，是一个容器，那理所当然是继承ViewGroup，为了方便实现飞转，所以监听用户手势OnGestureListener；
（2）.菜单项CircleItemView，虽是一个item，但为了可定制化，当然也是一个容器，也是为了方便实现飞转，重写onFling方法，所以这里继承LinearLayout，纯属为了方便布局，若有特殊需求，可在布局的时候，在外层添加一个FrameLayout容器，爱怎么搞怎么搞；
（3）.Adapter和Model，既然有Item那肯定也有Adapter和数据model，Adapter继承BaseAdapter即可，就跟ListView一样。
好了,就这3个玩意儿，另外几个都是从上面这两个抽出来的。
2.旋转原理
来看一下转动分析图，
图中圆心的坐标应为（ mRadius， mRadius），则圆盘半径为mRadius，按照大多数人的习惯右手向下滑动，圆盘也就跟着顺时针转动（或者说滚动），当然不是圆盘在转，是菜单项在滚动，滚动了弧度为a，那途中Item的x、y坐标应为
x = tmp *cos a；
y = tmp*sin a；
这是相对于圆心的坐标，再加上圆盘的半径，就是圆盘中的坐标了，子View只管在父容器中的坐标，父容器布局时会加上自身的left和top，这样逐层往上推就是在屏幕中的坐标了）。
我们将Item强制为正方形，itemWidth为Item的宽度，当 tmp = mRaiuds - itemWidth / Math.sqrt(2) 时，那Item的外直角就走在圆盘圆周上，再大则要出边界了，所以，Item的中心点位于mRaiuds/2和mRaiuds - itemWidth / Math.sqrt(2)之间最为合理，那么，item的x、y为
final int childCount = getChildCount();
int left, top, halfDiagonal;
// 限制Item的宽高
int itemWidth = (int) (mRadius * RADIO_DEFAULT_CHILD_DIMENSION);
float angleDelay = 360 / childCount;
for (int i = 0; i < childCount; i++) {
final View child = getChildAt(i);
if (child.getVisibility() == View.GONE) {
continue;
}
mStartAngle %= 360;
// 取Item对角线的一半为Item中心到圆盘圆周的距离
halfDiagonal = (int) (itemWidth / Math.sqrt(2));
float distanceFromCenter = mRadius - halfDiagonal - mPadding;
left = mRadius + (int) Math.round(distanceFromCenter * Math.cos(Math.toRadians(mStartAngle)) - 1 / 2f * itemWidth);
top = mRadius + (int) Math.round(distanceFromCenter * Math.sin(Math.toRadians(mStartAngle)) - 1 / 2f * itemWidth);
// 重新Layout
child.layout(left, top, left + itemWidth, top + itemWidth);
mStartAngle += angleDelay;
}
left 为 x， top 为y，mStartAngle为间隔角度，一个for循环就可以把所有Item按角度Layout出来。要让他们滚动起来，只要在ACTION_MOVE的时候给一个角度就行。那转动原理就这样了。
3.测量和布局
Android View 的绘制过程，如下图
过程为 measure() ---> layout () ---> draw()，measure() 中会掉用onMeasure()方法， layout () 中调用onLayout()方法，draw()我们就不管了，因为还是SDK继承而来，他可以自己绘制。
onMeasure方法实现如下：
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 测量自身
// measureMyself(widthMeasureSpec, heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 测量子View
measureChildViews();
}
private void measureChildViews() {
if (mAdapter.getCount() <= 0) {
return;
}
// 获取半径,
mRadius = Math.max(getMeasuredWidth(), getMeasuredHeight()) / 2;
final int count = getChildCount();
// 取mRadius/2为Item宽度
int childSize = (int) (mRadius * RADIO_DEFAULT_CHILD_DIMENSION);
int childMode = MeasureSpec.EXACTLY;
int makeMeasureSpec = -1;
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
if (child.getVisibility() == View.GONE) {
continue;
}
makeMeasureSpec = MeasureSpec.makeMeasureSpec(childSize, childMode);
// 设置为正方形
child.measure(makeMeasureSpec, makeMeasureSpec);
}
// 取mRadius/10为默认内边距
if (mPadding == -1) {
mPadding = RADIO_PADDING_LAYOUT * mRadius;
}
}
onLayout()在父类里是一个抽象方法，没有返回值，所以其中没有改变任何成员变量的话，是没有效果的。
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if (mAdapter.getCount() <= 0) {
return;
}
final int childCount = getChildCount();
int left, top, halfDiagonal;
// 限制Item的宽高
int itemWidth = (int) (mRadius * RADIO_DEFAULT_CHILD_DIMENSION);
float angleDelay = 360 / childCount;
for (int i = 0; i < childCount; i++) {
final View child = getChildAt(i);
if (child.getVisibility() == View.GONE) {
continue;
}
mStartAngle %= 360;
// 取Item对角线的一半为Item中心到圆盘圆周的距离
halfDiagonal = (int) (itemWidth / Math.sqrt(2));
float distanceFromCenter = mRadius - halfDiagonal - mPadding;
left = mRadius
+ (int) Math.round(distanceFromCenter * Math.cos(Math.toRadians(mStartAngle)) - 1 / 2f * itemWidth);
top = mRadius
+ (int) Math.round(distanceFromCenter * Math.sin(Math.toRadians(mStartAngle)) - 1 / 2f * itemWidth);
// 重新Layout
child.layout(left, top, left + itemWidth, top + itemWidth);
mStartAngle += angleDelay;
}
}
onLayout里就是把所有的Iitem逐个布局，这样就显示一个静态的圆盘了。
4.圆盘滚动
圆盘的滚动，可以在onTouchEvent(MotionEvent event)方法里实现，但这意味着你要同时在CircleMenu和CircleItemView的onTouchEvent方法里都要实现，当然两套代码可以提出来（但有可能子View和父View的x、y坐标不同，有麻烦），由于我们知道Android事件分发机制，Touch事件首先是父View的dispatchTouchEvent(MotionEvent event)先获得，然后往下分发，所以在dispatchTouchEvent方法实现Item转动一举两得，还有个原因是我们还要监听手势，需要重写onTouchEvent方法，so。。。。Item的滚动通过重写dispatchTouchEvent实现，代码如下：
// 因为父view的dispatchTouchEvent先获得事件，所以在这里可以连带子view的滚动事件一起处理
@Override
public boolean dispatchTouchEvent(MotionEvent event) {
if (mRotate != null) {
mRotate.onCircleMenuTouch(event, mRadius, this);
}
return super.dispatchTouchEvent(event);
}
简单吧，呵呵，提出来了，提到了RotateEngine.java里实现，如下：
package com.pan.tanglang.circlemenu.control;
import android.util.Log;
import android.view.MotionEvent;
import com.pan.tanglang.circlemenu.model.CircleMenuStatus;
import com.pan.tanglang.circlemenu.view.CircleMenu;
import com.pan.tanglang.circlemenu.view.CircleMenu.RotateDirection;
/**
* 随手势旋转引擎
*/
public class RotateEngine {
public static final String TAG = "RotateEngine";
private static RotateEngine instance = null;
private float startX;
private float startY;
/** 请求重新布局的起始角度 **/
private double mStartAngle;
private RotateEngine() {
}
public static RotateEngine getInstance() {
if (instance == null) {
synchronized (RotateEngine.class) {
if (instance == null) {
instance = new RotateEngine();
}
}
}
return instance;
}
// 通过dispatch实现
public void onCircleMenuTouch(MotionEvent ev, int radius, CircleMenu mCircleMenu) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
startX = ev.getX();
startY = ev.getY();
break;
case MotionEvent.ACTION_MOVE:
double start = getAngle(startX, startY, radius);
if (mCircleMenu.getStatus() == CircleMenuStatus.STOP_FLING
|| mCircleMenu.getStatus() == CircleMenuStatus.IDLE) {
// 开始滚动
mCircleMenu.startRotate();
// 拿到Fling停下（自然停或按停）之后的开始角度
mStartAngle = mCircleMenu.getmStartAngle();
}
float x = ev.getX();
float y = ev.getY();
toCircleMenuScroll(mCircleMenu, radius, start, ev);
startX = x;
startY = y;
break;
case MotionEvent.ACTION_UP:
CircleMenuStatus status = mCircleMenu.getStatus();
Log.i(TAG, "---ACTION_UP---status = " + status);
if (status == CircleMenuStatus.ROTATING || status == CircleMenuStatus.PAUSE_ROTATING) {
mCircleMenu.stopRotate();
}
break;
default:
break;
}
}
public void toCircleMenuScroll(CircleMenu mCircleMenu, int radius, double start, MotionEvent e2) {
float x = e2.getX();
float y = e2.getY();
// 一个连续的角度差值，用于判断滑动方向，得出顺时针、逆时针
float directionAngle = 0;
double end = getAngle(x, y, radius);
// 如果是一、四象限，则直接end-start，角度值都是正值
if (getQuadrant(x, y, radius) == 1 || getQuadrant(x, y, radius) == 4) {
mStartAngle += end - start;
directionAngle += end - start;
} else {
// 二、三象限，角度值是负值
mStartAngle += start - end;
directionAngle += start - end;
}
if (directionAngle > 0) {//得到旋转方向---顺时针，用于Fling飞转
mCircleMenu.setmDirection(RotateDirection.CLOCKWISE);
} else {
mCircleMenu.setmDirection(RotateDirection.ANTICLOCKWISE);
}
// 旋转角度, 请求重新布局
mCircleMenu.relayoutMenu(mStartAngle);
if (startX != x || startY != y) {
mCircleMenu.onRotating(directionAngle);
} else {
mCircleMenu.onPauseRotate();
}
}
public double getAngle(float xTouch, float yTouch, int radius) {
double x = xTouch - radius;
double y = yTouch - radius;
return (double) (Math.asin(y / Math.hypot(x, y)) * 180 / Math.PI);
}
public int getQuadrant(float x, float y, int radius) {
int tmpX = (int) (x - radius);
int tmpY = (int) (y - radius);
if (tmpX >= 0) {
return tmpY >= 0 ? 4 : 1;
} else {
return tmpY >= 0 ? 3 : 2;
}
}
}
之所以代码这么多，是因为要处理诸多逻辑和 诸多状态，主要思路就是得到x、y差值，计算角度差值，根据象限给加减角度，看ACTION_MOVE这段即可当然里面还牵扯到后面3个方法也差不多看完了。
5.圆盘飞转
飞转显然就是Fling，肯定是要在onFling()方法里面实现的，那么要实现OnGestureListener接口，同时，重写dispatchTouchEvent(MotionEvent event)方法，代码如下：
@Override
public boolean onTouchEvent(MotionEvent event) {
boolean result = mDetector.onTouchEvent(event);
if (event.getAction() == MotionEvent.ACTION_UP) {
if (mStatus != CircleMenuStatus.START_FLING && mStatus != CircleMenuStatus.FLING) {
idle();
}
}
return result;
}
再来看onFling方法
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
startFling(e1, e2, velocityX, velocityY);
return false;
}
/**
* 开始飞转
* @param e1
* @param e2
* @param velocityX
* @param velocityY
*/
public void startFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
if (mStatus == CircleMenuStatus.STOP_ROTATING) {
startMenuFling();
float velocity = Math.abs(velocityX) > Math.abs(velocityY) ? velocityX : velocityY;
double start = mRotate.getAngle(e2.getX(), e2.getY(), mRadius);
if (mFlingEngine == null) {
mFlingEngine = new FlingEngine();
}
mFlingEngine.start(this, velocity, start);
}
}
也很简单，都提出来的，看FlingEngine.java。
package com.pan.tanglang.circlemenu.control;
import com.pan.tanglang.circlemenu.model.CircleMenuStatus;
import com.pan.tanglang.circlemenu.view.CircleMenu;
import com.pan.tanglang.circlemenu.view.CircleMenu.RotateDirection;
/**
* @description 描 述：飞转引擎
*/
public class FlingEngine implements Runnable {
private static final String TAG = "FlingEngine";
private int mVelocity;
private int DELAY = 10;
private double startAngle;
private CircleMenu mCircleMenu;
public void start(CircleMenu circleMenu, float velocity, double start) {
mCircleMenu = circleMenu;
mVelocity = (int) Math.abs(velocity);
startAngle = start;
if (circleMenu.getStatus() == CircleMenuStatus.START_FLING) {
circleMenu.post(this);
}
}
@Override
public void run() {
// 如果小于20,则停止
if (mCircleMenu.getStatus() == CircleMenuStatus.STOP_FLING || mVelocity <= 0) {
//叫停或自动停止
mCircleMenu.idle();
return;
}
double preStartAngle = startAngle;
// 顺时针
if (mCircleMenu.getmDirection() == RotateDirection.CLOCKWISE) {
flingSlowDownByClockwise();
} else if (mCircleMenu.getmDirection() == RotateDirection.ANTICLOCKWISE) {
flingSlowDownByAnticlockwise();
}
mCircleMenu.relayoutMenu(startAngle);
mCircleMenu.onMenuFling(startAngle - preStartAngle);
mCircleMenu.postDelayed(this, DELAY);
}
// 逆时针减速
private void flingSlowDownByAnticlockwise() {
if (mVelocity > 10000) {
mVelocity -= 1000;
startAngle -= 10;
} else if (mVelocity > 5000) {
mVelocity -= 100;
startAngle -= 8;
} else if (mVelocity > 1000) {
mVelocity -= 50;
startAngle -= 6;
} else if (mVelocity > 500) {
mVelocity -= 10;
startAngle -= 4;
} else if (mVelocity > 100) {
mVelocity -= 5;
startAngle -= 2;
} else {
mVelocity--;
startAngle--;
}
}
// 顺时针减速
private void flingSlowDownByClockwise() {
if (mVelocity > 10000) {
mVelocity -= 1000;
startAngle += 10;
} else if (mVelocity > 5000) {
mVelocity -= 100;
startAngle += 8;
} else if (mVelocity > 1000) {
mVelocity -= 50;
startAngle += 6;
} else if (mVelocity > 500) {
mVelocity -= 10;
startAngle += 4;
} else if (mVelocity > 100) {
mVelocity -= 5;
startAngle += 2;
} else {
mVelocity--;
startAngle++;
}
}
public int getQuadrant(float angle, int radius) {
float x = Math.round(radius * Math.cos(Math.toRadians(angle)));
float y = Math.round(radius * Math.sin(Math.toRadians(angle)));
int tmpX = (int) (x - radius / 2);
int tmpY = (int) (y - radius / 2);
if (tmpX >= 0) {
return tmpY >= 0 ? 4 : 1;
} else {
return tmpY >= 0 ? 3 : 2;
}
}
}
之所以要提出 startFling方法是因为Item也要用到，通过getParent强转之后调用，所以， CircleItemView.java的代码就相当简单了，如下：
package com.pan.tanglang.circlemenu.view;
import android.annotation.SuppressLint;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.GestureDetector;
import android.view.View;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.widget.LinearLayout;
import com.pan.tanglang.circlemenu.model.CircleMenuStatus;
import com.pan.tanglang.circlemenu.model.UserEvent;
/**
* @description 描 述：Item项自定义控件，主要是为了实现Item的onFling
*/
public class CircleItemView extends LinearLayout implements OnGestureListener {
public static final String TAG = "CircleItemView";
private GestureDetector mDetector;
private CircleMenu mParent;
public CircleItemView(Context context, AttributeSet attrs) {
super(context, attrs);
setClickable(true);
mDetector = new GestureDetector(context, this);
}
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouchEvent(MotionEvent event) {
mDetector.onTouchEvent(event);
//将滑动状态从 STOP_ROTATING 置为 IDLE，多一个STOP_ROTATING，是ROTATING之后，TART_FLING之前的一个状态，目前意义不大，主要看用户怎么利用
if (event.getAction() == MotionEvent.ACTION_UP) {
CircleMenuStatus status = mParent.getStatus();
if (status != CircleMenuStatus.IDLE &&status != CircleMenuStatus.START_FLING && status != CircleMenuStatus.FLING) {
mParent.idle();
}
}
return super.onTouchEvent(event);// 防止点击事件丢失
}
@Override
public boolean onDown(MotionEvent e) {
if (mParent == null) {
mParent = (CircleMenu) getParent();
}
if (mParent != null) {
CircleMenuStatus status = mParent.getStatus();
if (status == CircleMenuStatus.FLING) {
mParent.stopFling();
}
if (status == CircleMenuStatus.ROTATING) {
mParent.stopRotate();
}
}
return true;
}
@Override
public void onShowPress(MotionEvent e) {
}
@Override
public boolean onSingleTapUp(MotionEvent e) {
return false;
}
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
return false;
}
@Override
public void onLongPress(MotionEvent e) {
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
if (mParent != null) {
mParent.startFling(e1, e2, velocityX, velocityY);
}
return false;
}
}
CircleMenu.java的代码就不贴出来了，上https://github.com/aknew123/CircleMenu上downloade吧，里面有状态控制，其实代码也不到400行，只是贴进来显得文长（想想还是贴吧）。
package com.pan.tanglang.circlemenu.view;
import android.annotation.SuppressLint;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListAdapter;
import com.pan.tanglang.circlemenu.control.FlingEngine;
import com.pan.tanglang.circlemenu.control.RotateEngine;
import com.pan.tanglang.circlemenu.model.CircleMenuStatus;
import com.pan.tanglang.circlemenu.model.UserEvent;
/**
* @description 描 述：圆盘菜单容器,圆盘菜单功能的核心文件
* @author 作 者：SergioPan
*/
public class CircleMenu extends ViewGroup implements OnGestureListener {
public static final String TAG = "CircleMenu";
/** 圆盘半径，那么圆心为（mRadius， mRadius） **/
public int mRadius;
private static final float RADIO_DEFAULT_CHILD_DIMENSION = 1 / 2f;
private static final float RADIO_PADDING_LAYOUT = 1 / 20f;
/** 内边距，默认为mRadius/20 **/
public float mPadding = -1;
private double mStartAngle = 0;
private OnMenuItemClickListener mListener;
private ListAdapter mAdapter;
private CircleMenuStatus mStatus = CircleMenuStatus.IDLE;
private OnMenuStatusChangedListener mStatusListener;
private GestureDetector mDetector;
private RotateEngine mRotate;
private RotateDirection mDirection = RotateDirection.CLOCKWISE;
private FlingEngine mFlingEngine;
// 用户输入事件，默认为无用行为，主要用于解决Fling后的按停，此时屏蔽点击事件
private UserEvent mUserEvent = UserEvent.USELESS_ACTION;
public CircleMenu(Context context, AttributeSet attrs) {
super(context, attrs);
setPadding(0, 0, 0, 0);
setClickable(true);
mDetector = new GestureDetector(context, this);
mRotate = RotateEngine.getInstance();
}
/** 转动方向 **/
public enum RotateDirection {
/** 顺时针 **/
CLOCKWISE,
/** 逆时针 **/
ANTICLOCKWISE;
}
//依附到窗口上
@Override
protected void onAttachedToWindow() {
if (mAdapter != null) {
buildMenuItems();
}
super.onAttachedToWindow();
}
/**
* 菜单重新布局
*
* @param startAngle
*/
public void relayoutMenu(double startAngle) {
mStartAngle = startAngle;
requestLayout();
}
// 构建菜单项
@SuppressLint("NewApi")
private void buildMenuItems() {
if (mAdapter.getCount() <= 0) {
return;
}
for (int i = 0; i < mAdapter.getCount(); i++) {
CircleItemView itemView = (CircleItemView) mAdapter.getView(i, null, this);
final int position = i;
itemView.setClickable(true);
itemView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (mUserEvent == UserEvent.FLING) {
// 正在飞转时，接收用户的点击事件，则视为停止飞转动作，而屏蔽点击事件
mUserEvent = UserEvent.USELESS_ACTION;
return;
}
// 非飞转时响应点击事件
if (mListener != null) {
mListener.onClick(v, position);
}
}
});
addView(itemView);
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 测量自身
// measureMyself(widthMeasureSpec, heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 测量子View
measureChildViews();
}
private void measureChildViews() {
if (mAdapter.getCount() <= 0) {
return;
}
// 获取半径,
mRadius = Math.max(getMeasuredWidth(), getMeasuredHeight()) / 2;
final int count = getChildCount();
// 取mRadius/2为Item宽度
int childSize = (int) (mRadius * RADIO_DEFAULT_CHILD_DIMENSION);
int childMode = MeasureSpec.EXACTLY;
int makeMeasureSpec = -1;
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
if (child.getVisibility() == View.GONE) {
continue;
}
makeMeasureSpec = MeasureSpec.makeMeasureSpec(childSize, childMode);
// 设置为正方形
child.measure(makeMeasureSpec, makeMeasureSpec);
}
// 取mRadius/10为默认内边距
if (mPadding == -1) {
mPadding = RADIO_PADDING_LAYOUT * mRadius;
}
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if (mAdapter.getCount() <= 0) {
return;
}
final int childCount = getChildCount();
int left, top, halfDiagonal;
// 限制Item的宽高
int itemWidth = (int) (mRadius * RADIO_DEFAULT_CHILD_DIMENSION);
float angleDelay = 360 / childCount;
for (int i = 0; i < childCount; i++) {
final View child = getChildAt(i);
if (child.getVisibility() == View.GONE) {
continue;
}
mStartAngle %= 360;
// 取Item对角线的一半为Item中心到圆盘圆周的距离
halfDiagonal = (int) (itemWidth / Math.sqrt(2));
float distanceFromCenter = mRadius - halfDiagonal - mPadding;
left = mRadius
+ (int) Math.round(distanceFromCenter * Math.cos(Math.toRadians(mStartAngle)) - 1 / 2f * itemWidth);
top = mRadius
+ (int) Math.round(distanceFromCenter * Math.sin(Math.toRadians(mStartAngle)) - 1 / 2f * itemWidth);
// 重新Layout
child.layout(left, top, left + itemWidth, top + itemWidth);
mStartAngle += angleDelay;
}
}
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouchEvent(MotionEvent event) {
boolean result = mDetector.onTouchEvent(event);
if (event.getAction() == MotionEvent.ACTION_UP) {
if (mStatus != CircleMenuStatus.START_FLING && mStatus != CircleMenuStatus.FLING) {
idle();
}
}
return result;
}
// 因为父view的dispatchTouchEvent先获得事件，所以在这里可以连带子view的滚动事件一起处理
@Override
public boolean dispatchTouchEvent(MotionEvent event) {
if (mRotate != null) {
mRotate.onCircleMenuTouch(event, mRadius, this);
}
return super.dispatchTouchEvent(event);
}
public void startMenuFling() {
mStatus = CircleMenuStatus.START_FLING;
if (mStatusListener != null) {
mStatusListener.onStatusChanged(mStatus, 0);
}
}
public void stopFling() {
mStatus = CircleMenuStatus.STOP_FLING;
if (mStatusListener != null) {
mStatusListener.onStatusChanged(mStatus, 0);
}
}
public void onMenuFling(double angle) {
mStatus = CircleMenuStatus.FLING;
if (mStatusListener != null) {
mStatusListener.onStatusChanged(mStatus, angle);
mUserEvent = UserEvent.FLING;
}
}
public void startRotate() {
mStatus = CircleMenuStatus.START_ROTATING;
if (mStatusListener != null) {
mStatusListener.onStatusChanged(mStatus, 0);
}
}
public void onRotating(float angle) {
mStatus = CircleMenuStatus.ROTATING;
if (mStatusListener != null) {
mStatusListener.onStatusChanged(mStatus, angle);
}
}
public void onPauseRotate() {
mStatus = CircleMenuStatus.PAUSE_ROTATING;
if (mStatusListener != null) {
mStatusListener.onStatusChanged(mStatus, 0);
}
}
public void stopRotate() {
mStatus = CircleMenuStatus.STOP_ROTATING;
if (mStatusListener != null) {
mStatusListener.onStatusChanged(mStatus, 0);
}
}
public void idle() {
mStatus = CircleMenuStatus.IDLE;
if (mStatusListener != null) {
mStatusListener.onStatusChanged(mStatus, 0);
}
}
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
return true;
}
@Override
public boolean onDown(MotionEvent e) {
if (mStatus == CircleMenuStatus.FLING) {
stopFling();
}
return true;
}
@Override
public void onShowPress(MotionEvent e) {
}
@Override
public boolean onSingleTapUp(MotionEvent e) {
return true;
}
@Override
public void onLongPress(MotionEvent e) {
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
startFling(e1, e2, velocityX, velocityY);
return false;
}
/**
* 开始飞转
* @param e1
* @param e2
* @param velocityX
* @param velocityY
*/
public void startFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
if (mStatus == CircleMenuStatus.STOP_ROTATING) {
startMenuFling();
float velocity = Math.abs(velocityX) > Math.abs(velocityY) ? velocityX : velocityY;
double start = mRotate.getAngle(e2.getX(), e2.getY(), mRadius);
if (mFlingEngine == null) {
mFlingEngine = new FlingEngine();
}
mFlingEngine.start(this, velocity, start);
}
}
public RotateDirection getmDirection() {
return mDirection;
}
public void setmDirection(RotateDirection mDirection) {
this.mDirection = mDirection;
}
public void setStatus(CircleMenuStatus status) {
mStatus = status;
}
public CircleMenuStatus getStatus() {
return mStatus;
}
public void setAdapter(ListAdapter adapter) {
mAdapter = adapter;
}
public ListAdapter getAdapter() {
return mAdapter;
}
public void setOnItemClickListener(OnMenuItemClickListener listener) {
this.mListener = listener;
}
public void setOnStatusChangedListener(OnMenuStatusChangedListener statusListener) {
this.mStatusListener = statusListener;
}
public UserEvent getmUserEvent() {
return mUserEvent;
}
public void setmUserEvent(UserEvent mUserEvent) {
this.mUserEvent = mUserEvent;
}
public double getmStartAngle() {
return mStartAngle;
}
public float getmPadding() {
return mPadding;
}
public void setmPadding(float mPadding) {
this.mPadding = mPadding;
}
/**
* 圆盘菜单状态改变监听器，用于定制外围或圆心动画
*
* @author SergioPan
*/
public interface OnMenuStatusChangedListener {
/**
* @param status
* 状态
* @param rotateAngle
* 旋转量（角度）
*/
public void onStatusChanged(CircleMenuStatus status, double rotateAngle);
}
/**
* Item点击事件监听器
*
* @author SergioPan
*/
public interface OnMenuItemClickListener {
public void onClick(View view, int position);
}
}
下面说说适配器模式，按开发的角度，应该一开始就该说了，要不怎么调试啊，好！马上来！
6.适配器模式
想要定制化就要用适配器模式，这样才人性化，要不只能写一些只能用一次的逻辑代码而已。适配器模式也是一个小的MVC模式，
Modle ----- DefaultItem
View ---- CircleItemView
Controller ---- Adapter
用起来，其实挺简单，当然这是简单的MVC，父容器CircleMenu要实现2个方法，如下：
public void setAdapter(ListAdapter adapter) {
mAdapter = adapter;
}
//依附到窗口上
@Override
protected void onAttachedToWindow() {
if (mAdapter != null) {
buildMenuItems();
}
super.onAttachedToWindow();
}
// 构建菜单项
@SuppressLint("NewApi")
private void buildMenuItems() {
if (mAdapter.getCount() <= 0) {
return;
}
for (int i = 0; i < mAdapter.getCount(); i++) {
CircleItemView itemView = (CircleItemView) mAdapter.getView(i, null, this);
final int position = i;
itemView.setClickable(true);
itemView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (mUserEvent == UserEvent.FLING) {
// 正在飞转时，接收用户的点击事件，则视为停止飞转动作，而屏蔽点击事件
mUserEvent = UserEvent.USELESS_ACTION;
return;
}
// 非飞转时响应点击事件
if (mListener != null) {
mListener.onClick(v, position);
}
}
});
addView(itemView);
}
}
其实就是装饰(装饰模式)了一下Adapter，然后调用 Adapter的getView方法，即
mAdapter.getView(i, null, this);
然后，Adapter就更简单了，跟ListView一样，继承BaseAdapter，再重写这4个方法，DefaultMenuAdapter.java代码如下
package com.pan.tanglang.circlemenu.adapter;
import java.util.List;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.pan.tanglang.circlemenu.R;
import com.pan.tanglang.circlemenu.model.DefaultItem;
/**
* @description 描 述：圆盘菜单默认适配器，如有其他需求，用户自行定义适配器，继承BaseAdapter就可以，自行编写xml文件
*/
public class DefaultMenuAdapter extends BaseAdapter {
private List<DefaultItem> items;
public DefaultMenuAdapter(List<DefaultItem> data) {
items = data;
}
@Override
public int getCount() {
if (items == null) {
return 0;
}
return items.size();
}
@Override
public Object getItem(int position) {
return items.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
if (convertView == null) {
convertView = View.inflate(parent.getContext(), R.layout.item_default, null);
holder = new ViewHolder();
holder.iv = (ImageView) convertView.findViewById(R.id.iv_default_circle_menu_item);
holder.tv = (TextView) convertView.findViewById(R.id.tv_default_circle_menu_item);
convertView.setTag(holder);
}
holder = (ViewHolder) convertView.getTag();
DefaultItem item = items.get(position);
if (item != null) {
holder.iv.setImageResource(item.getImgId());
holder.tv.setText(item.getText());
}
return convertView;
}
class ViewHolder {
ImageView iv;
TextView tv;
}
}
这样就做到，高度定制化。
7.状态模式定制动画
可根据圆盘状态，定制与之相匹配的动画，想要多炫有多炫，只要监听setOnStatusChangedListener方法即可实现。
public enum CircleMenuStatus {
/** 静止 **/
IDLE,
/** 开始旋转 **/
START_ROTATING,
/** 正在旋转 **/
ROTATING,
/** 暂停旋转 **/
PAUSE_ROTATING,
/** 叫停旋转，是ROTATING之后，START_FLING之前的一个状态，本项目中意义不大，看用户怎么利用 **/
STOP_ROTATING,
/** 开始飞转 **/
START_FLING,
/**正在飞转 **/
FLING,
/** 叫停飞转 **/
STOP_FLING;
}
mCircleMenu.setOnStatusChangedListener(new OnMenuStatusChangedListener() {
@Override
public void onStatusChanged(CircleMenuStatus status, double rotateAngle) {
// TODO 可在此处定制各种动画
odAnimation(status, (float)rotateAngle);
}
});
private void odAnimation(CircleMenuStatus status, float rotateAngle) {
switch (status) {
case IDLE:
Log.i(TAG, "--- -IDLE-----");
animRotate.cancel();
animRotate.cancel();
break;
case START_ROTATING:
Log.i(TAG, "--- -START_ROTATING-----");
break;
case ROTATING:
animRotate = ObjectAnimator.ofFloat(ivCenter, "rotation", startRotate, startRotate + rotateAngle);
animRotate.setDuration(200).start();
startRotate += rotateAngle;
// Log.i(TAG, "--- -ROTATING-----");
break;
case STOP_ROTATING:
Log.i(TAG, "--- -STOP_ROTATING-----");
break;
case START_FLING:
Log.i(TAG, "--- -START_FLING-----");
break;
case FLING:
// Log.i(TAG, "--- -FLING-----");
animFling = ObjectAnimator.ofFloat(ivCenter, "rotation", startFling, startFling + rotateAngle);
animFling.setDuration(200).start();
startFling += rotateAngle;
break;
case STOP_FLING:
Log.i(TAG, "--- -STOP_FLING-----");
break;
default:
break;
}
}
是不是很炫啊
完！