炫酷，拉风的UI效果，对于我们每位开发人员来说都是相当具有吸引力的。
上图是雏形，可以扩展成为表盘，转盘，圆形菜单，下图就是扩展的圆形菜单。由于录制工具很不清晰，UI特效效果真心不错。如有感兴趣的，请往后面看。当然灵感来源于上图。
标题是自定义的圆形菜单，我主要讲解圆形菜单的开发流程，如有对上图感兴趣的，请留言。让我给大家一一道来，代码如下：
public class CircleMenuLayout extends ViewGroup {
//圆形半径
private int mRadius;
//开始角度
private double mStartAngle = 0;
//padding属性 默认值为0
private float mPadding = 0;
//滑动时 item偏移量
private int offsetRotation = 0;
//最后一次触摸
private long lastTouchTime;
//判断触摸点 是否在圆类 默认false
boolean isRange = false;
//手指触摸的x,y值
float x = 0, y = 0;
// 手指滑动的方向 默认向右
boolean isLeft = false;
//适配
private ListAdapter mAdapter;
//转动速度 默认速度为0
private float speed = 0;
// 每个item 的默认尺寸
private static final float ITEM_DIMENSION = 1 / 3f;
//转动快慢
private static final int ROTATION_DEGREE = 3;
//distanceFromCenter Item到中心的距离
private static final float DISTANCE_FROM_CENTER = 2 / 3f;
//speed attenuation 速度衰减
private static final int SPEED_ATTENUATION = 1;
//每次转动的角度
private static final int ANGLE = 6;
//消息
private static final int EMPTY_MESSAGE = 1;
// MenuItem的点击事件接口
private OnItemClickListener mOnMenuItemClickListener;
//线程 处理item的转动
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
if (msg.what == EMPTY_MESSAGE) {
if (speed > 0) {
if (isLeft) {
//向左转动
offsetRotation -= ANGLE;
} else {
offsetRotation += ANGLE;
}
//速度衰减
speed -= SPEED_ATTENUATION;
postInvalidate();
handler.sendEmptyMessageDelayed(EMPTY_MESSAGE, 50);
}
}
}
};
/**
* @param context
* @param attrs
*/
public CircleMenuLayout(Context context, AttributeSet attrs) {
super(context, attrs);
setPadding(0, 0, 0, 0);
}
/**
* @param context
*/
public CircleMenuLayout(Context context) {
super(context);
setPadding(0, 0, 0, 0);
}
public void setAdapter(ListAdapter mAdapter) {
this.mAdapter = mAdapter;
}
// 构建菜单项
private void buildMenuItems() {
// 根据用户设置的参数，初始化menu item
for (int i = 0; i < mAdapter.getCount(); i++) {
final View itemView = mAdapter.getView(i, null, this);
final int position = i;
if (itemView != null) {
itemView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (mOnMenuItemClickListener != null) {
mOnMenuItemClickListener.onItemClickListener(itemView, position);
}
}
});
}
// 添加view到容器中
addView(itemView);
}
}
//窗口关联
@Override
protected void onAttachedToWindow() {
if (mAdapter != null) {
buildMenuItems();
}
super.onAttachedToWindow();
}
//设置布局的宽高，并策略menu item宽高
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 丈量自身尺寸
measureMyself(widthMeasureSpec, heightMeasureSpec);
// 丈量菜单项尺寸
measureChildViews();
}
private void measureMyself(int widthMeasureSpec, int heightMeasureSpec) {
int resWidth = 0;
int resHeight = 0;
// 根据传入的参数，分别获取测量模式和测量值
int width = MeasureSpec.getSize(widthMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
// 如果宽或者高的测量模式非精确值
if (widthMode != MeasureSpec.EXACTLY
|| heightMode != MeasureSpec.EXACTLY) {
// 主要设置为背景图的高度
resWidth = getSuggestedMinimumWidth();
// 如果未设置背景图片，则设置为屏幕宽高的默认值
resWidth = resWidth == 0 ? getDefaultWidth() : resWidth;
resHeight = getSuggestedMinimumHeight();
// 如果未设置背景图片，则设置为屏幕宽高的默认值
resHeight = resHeight == 0 ? getDefaultWidth() : resHeight;
} else {
// 如果都设置为精确值，则直接取小值；
resWidth = resHeight = Math.min(width, height);
}
setMeasuredDimension(resWidth, resHeight);
}
private void measureChildViews() {
// 获得半径
mRadius = Math.min(getMeasuredWidth(), getMeasuredHeight()) / 2;
// menu item数量
final int count = getChildCount();
// menu item尺寸
int childSize = (int) (mRadius * ITEM_DIMENSION);
// menu item测量模式
int childMode = MeasureSpec.EXACTLY;
// 迭代测量
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
if (child.getVisibility() == GONE) {
continue;
}
// 计算menu item的尺寸；以及和设置好的模式，去对item进行测量
int makeMeasureSpec = -1;
makeMeasureSpec = MeasureSpec.makeMeasureSpec(childSize,
childMode);
child.measure(makeMeasureSpec, makeMeasureSpec);
}
}
// 布局menu item的位置
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
refresh();
}
//刷新 偏移角度移动item
public void refresh() {
final int childCount = getChildCount();
// 根据menu item的个数，计算item的布局占用的角度
float angleDelay = 360 / childCount;
// 遍历所有菜单项设置它们的位置
for (int i = 0; i < childCount; i++) {
final View child = getChildAt(i);
if (child.getVisibility() == GONE) {
continue;
}
int x = (int) Math.round(Math.sin(Math.toRadians(angleDelay * (i + 1) - offsetRotation)) * (mRadius * DISTANCE_FROM_CENTER));
int y = (int) Math.round(Math.cos(Math.toRadians(angleDelay * (i + 1) - offsetRotation)) * (mRadius * DISTANCE_FROM_CENTER));
//计算item 距离左边距 上边距 的距离
if (x <= 0 && y >= 0) {
x = mRadius - Math.abs(x);
y = mRadius - y;
} else if (x <= 0 && y <= 0) {
y = mRadius + Math.abs(y);
x = mRadius - Math.abs(x);
} else if (x >= 0 && y <= 0) {
y = mRadius + Math.abs(y);
x = mRadius + x;
} else if (x >= 0 && y >= 0) {
x = mRadius + x;
y = mRadius - Math.abs(y);
}
//计算item中心点 距离左边距 上边距 的距离
x = x - (int) (mRadius * ITEM_DIMENSION) / 2;
y = y - (int) (mRadius * ITEM_DIMENSION) / 2;
// 布局child view
child.layout(x, y,
x + (int) (mRadius * ITEM_DIMENSION), y + (int) (mRadius * ITEM_DIMENSION));
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//碰撞 手指与大圆的碰撞 计算距离
x = event.getX();
y = event.getY();
//手指与大圆触摸的误差
int error = 10;
if ((x - mRadius) * (x - mRadius) + (y - mRadius) * (y - mRadius) < (mRadius + error) * (mRadius + error)) {
isRange = true;
lastTouchTime = System.currentTimeMillis();
} else {
isRange = false;
}
break;
case MotionEvent.ACTION_MOVE:
break;
case MotionEvent.ACTION_UP:
float x1 = event.getX();
float y1 = event.getY();
if (isRange) {
long timeStamp = System.currentTimeMillis() - lastTouchTime;
float distance = (float) Math.sqrt((x1 - x) * (x1 - x) + (y1 - y) * (y1 - y));
float speed = distance / timeStamp;
if (x1 - x > 0) {
isLeft = false;
} else {
isLeft = true;
}
//计算速度
speed(speed);
}
break;
}
return true;
}
public void speed(float speed) {
this.speed = speed * ROTATION_DEGREE;
handler.sendEmptyMessage(EMPTY_MESSAGE);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.parseColor("#dddddd"));
canvas.drawCircle(mRadius, mRadius, mRadius, paint);
refresh();
}
//定义点击接口
public interface OnItemClickListener {
public void onItemClickListener(View v, int position);
}
// 设置MenuItem的点击事件接口
public void setOnItemClickListener(OnItemClickListener listener) {
this.mOnMenuItemClickListener = listener;
}
/**
* 获得默认该layout的尺寸
*
* @return
*/
private int getDefaultWidth() {
WindowManager wm = (WindowManager) getContext().getSystemService(
Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
return Math.min(outMetrics.widthPixels, outMetrics.heightPixels);
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
看到这里，我相信很多人都晕了。好吧，那我们一起来理一理。
设计思路
1、通用模式
上图是图片加文字，如果我想换成按钮呢，或者我只需要图片。这里就需要定制。怎么办呢，我采用了适配模式，大家都还记得 ListView的用法，我这里也借鉴了一下：
public void setAdapter(ListAdapter mAdapter) {
this.mAdapter = mAdapter;
}
- 1
- 2
- 3
这样就可以实现Menu的高度定制。
2、构建菜单项
代码参考buildMenuItems()，对mAdapter遍历获取子View，添加点击事件，调用addView()添加到ViewGroup，这个时候系统就会调用onMeasure()对子View计算大小。
3、计算item大小
代码参考measureMyself()和measureChildViews()，确定每个item的尺寸大小。
4、item布局
首先计算item(x,y)距离圆心的长度，我画了一个草图：
int x = (int) Math.round(Math.sin(Math.toRadians(a)) * temp);
int y = (int) Math.round(Math.cos(Math.toRadians(a)) * temp);
- 1
- 2
temp我赋值为半径的三分之二，当然你可以更改成你满意的长度。
然后要计算(x,y)的坐标，通过坐标项象来计算：
if (x <= 0 && y >= 0) { //第二项象
x = mRadius - Math.abs(x);
y = mRadius - y;
} else if (x <= 0 && y <= 0) {//第三项象
y = mRadius + Math.abs(y);
x = mRadius - Math.abs(x);
} else if (x >= 0 && y <= 0) {//第四项象
y = mRadius + Math.abs(y);
x = mRadius + x;
} else if (x >= 0 && y >= 0) {//第一项象
x = mRadius + x;
y = mRadius - Math.abs(y);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
计算到这来，你可能已经发现了问题，如果用(x,y)坐标来表示菜单项的left 和 top位置，那么你会发现整个item相对于父控件是向右下偏移了。为了解决偏移问题，我采用了item控件的中心点来表示菜单项的left 和 top位置。
x = x - item的宽度/ 2;
y = y - item的高度 / 2;
- 1
- 2
最后调用layout()方法，确定item的位置。
5、手势旋转
上面已经完成了静态的Menu，那么怎么才能通过滑动阴影部分使Menu旋转起来呢？
需要重写onTouchEvent()方法，并把返回值改为true。处理手势按下（ACTION_DOWN），抬起（ACTION_UP）的状态。
首先我们要判断手指按下是否在阴影局域内。注意手指按下是指尖局域与屏幕接触，并不是一点，所以有误差。
x = event.getX();
y = event.getY();
if ((x - 圆心x) * (x - 圆心x) + (y - 圆心y) * (y - 圆心y) < (圆心x+ 误差) * (圆心y+ 误差)) {
isRange = true;
}
- 1
- 2
- 3
- 4
- 5
然后我们要计算运动的速度，我刚开始的想法是用重力加速度，非常感谢我同事小贾，他给了我更好的意见：速度=距离/时间。
ACTION_DOWN：
lastTouchTime = System.currentTimeMillis();
- 1
ACTION_UP：
long timeStamp = System.currentTimeMillis() - lastTouchTime;
float distance = (float) Math.sqrt((x1 - x) * (x1 - x) + (y1 - y) * (y1 - y));
float speed = distance / timeStamp;
- 1
- 2
- 3
然后我们通过对比手指按下的x的坐标，和抬起x的坐标，来判断用户是向左滑，还是右滑。
if (x1 - x > 0) {
isLeft = false;
} else {
isLeft = true;
}
- 1
- 2
- 3
- 4
- 5
最后通过handler来改变每次运动的角度，使Menu很自然的旋转了起来：
if (isLeft) {
//向左转动
offsetRotation -= ANGLE;
} else {
//向右转动
offsetRotation += ANGLE;
}
//速度衰减
speed -= SPEED_ATTENUATION;
invalidate();//重绘
handler.sendEmptyMessageDelayed(EMPTY_MESSAGE, 50);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
使用
1、xml布局
<com.github.ws.viewdemo.widget.CircleMenuLayout
android:id="@+id/cm"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f0f0f0">
</com.github.ws.viewdemo.widget.CircleMenuLayout>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
2、class文件
circleMenuLayout.setAdapter(new MyAdapter());
circleMenuLayout.setOnItemClickListener(new CircleMenuLayout.OnItemClickListener() {
@Override
public void onItemClickListener(View v, int position) {
Toast.makeText(MainActivity.this, mList.get(position).text + "", Toast.LENGTH_SHORT).show();
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
源码我已上传到github，地址https://github.com/HpWens/ViewDemo，再一次感谢大家的关注。
<link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/markdown_views-ea0013b516.css">
转自:https://blog.csdn.net/u012551350/article/details/50854234