Android 自定义 ViewGroup 实现 RayMenu

先来看一下实现的效果

RayMenu.gif

github 上有大神写的类似效果的项目:
ArcMenu

我这个思路来源于鸿洋大神的 blog,感谢!
http://blog.csdn.net/lmj623565791/article/details/37567907

实现思路

标题已经说了是自定义 ViewGroup,ViewGroup 中的第一个子View作为 Menu 开启的按钮,之后的6个子 View 作为 Item

动画效果实现

这里我用 TranslateAnimation 实现,对动画有了解的同学应该知道,TranslateAnimation 本质是不会改变按钮的位置,而我们的按钮在动画结束后是要点击的。做法:默认让子菜单就已经在目标位置,然后 GONE,当点击加号时,让按钮 VISIBLE,开始动画,把起始位置设为定点,终点位置就是我们隐藏的区域。当然,也可以用属性动画实现这个效果。

确定位置

如上图,我们可以计算出1-3号 item 的位置,同理也可以计算出4-6号 item 的位置,而6号 item 的位置就是 menu 开启按钮的位置,当 menu 打开时,menu 开启按钮隐藏,反之显示。

接下来看具体实现

onMeasure()

方法比较简单,计算子 View 的大小,获取 ViewGroup 的宽度、高度、paddingLeft 和 paddingRight,计算我们自定义 ViewGroup 实际显示的宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 当前ViewGroup的宽度和高度
mMeasuredWidth = getMeasuredWidth();
mMeasuredHeight = getMeasuredHeight();
mPaddingLeft = getPaddingLeft();
mPaddingRight = getPaddingRight();

// ViewGroup实际可显示的宽,减去左右的padding
mActualWidth = mMeasuredWidth - mPaddingLeft - mPaddingRight;

for (int i = 0; i < getChildCount(); i++) {
getChildAt(i).measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
}

super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

onLayout()

确定子 View 的位置。
首先在 layoutFirstChildView() 中对 menu 开关按钮(就是 ViewGroup 中的第一个子 View )进行设置,以及初始化点击事件;然后从第二个子 View 开始为菜单项,分别设置其位置,计算的原理就是上面的草图,把子 View 事先设置在要显示的位置,然后 GONE。

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
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// changed参数,当前ViewGroup的尺寸或者位置是否发生了改变
if (!changed) {
return;
}
// 第一个子View,作为menu的开关button
View firstChildView = getChildAt(0);

// 所有子View的宽高都一致
mCWidth = firstChildView.getMeasuredWidth();
mCHeight = firstChildView.getMeasuredHeight();

// 水平间隔
mHorizontalSpace = (mActualWidth - 3 * mCWidth) / 2;
// 垂直间隔
mVerticalSpace = dip2px(mContext, 40);

// 绘制第一个子View
layoutFirstChildView(firstChildView);

int childCount = getChildCount();

// 子View的行数
mLine = (int) Math.ceil(childCount / 3.0f);

for (int i = 1; i < childCount; i++) {
View childView = getChildAt(i);
childView.setVisibility(GONE);

// 标记当前子View的所在行
int lineTag = (i - 1) / mLine;

// 水平偏移量
int horizontalOffset = (i - 1 - lineTag * 3) * (mHorizontalSpace + mCWidth);
// 垂直偏移量
int verticalOffset = (2 - lineTag) * mVerticalSpace;

int left = horizontalOffset + mPaddingLeft;
int top = mMeasuredHeight - (2 - lineTag) * mCHeight - verticalOffset;
int right = left + mCWidth;
int bottom = mMeasuredHeight - (1 - lineTag) * mCHeight - verticalOffset;

childView.layout(left, top, right, bottom);
}
}

设置 menu 开启事件和子 View 点击事件

此时子 View 已经在要显示的位置了,只是状态是不显示 GONE,当我们点击开始按钮时,遍历子 View 先设置状态为显示 VISIBLE,然后创建动画,开始位置为屏幕外某一点,结束位置就是子 View 实际的位置。最后就是绑定子 View 点击事件。

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
/**
* 开关menu
*/
private void toggleMenu(int durationMillis) {
int childCount = getChildCount();
for (int i = 1; i < childCount; i++) {
View childView = getChildAt(i);
childView.setVisibility(VISIBLE);

// 标记当前子View的所在行
int lineTag = (i - 1) / mLine;
// 垂直偏移量
int verticalOffset = (2 - lineTag) * mVerticalSpace;
int top = mMeasuredHeight - (2 - lineTag) * mCHeight - verticalOffset;

// 创建并且绑定menu动画
createBindMenuAnim(childView, childCount, i, top, durationMillis);

childView.setTag(i);
// 子View点击事件
childView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
bindMenuItemAnim(v, (Integer) v.getTag());
}
});
}
}

创建 menu 开关动画和子 View 点击动画

这里就比较简单了,根据 menu 打开还是关闭,设置不同的动画,子 View 的动画也是类似的,这里有一个时机问题,就是当点击子 View 的时候,要当动画结束的时候再做其他的操作(比如跳转界面)。

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
/**
* menu动画
*
* @param childView 子View
* @param top fromYDelta、toYDelta
* @param i 当前子View的位置
* @param durationMillis 动画时间
* @return
*/
private void createBindMenuAnim(final View childView, int childCount, int i, int top, int durationMillis) {
AnimationSet animset = new AnimationSet(true);
Animation animation = null;
if (!mIsOpen) {
// 打开menu
animset.setInterpolator(new OvershootInterpolator(1.5F));
animation = new TranslateAnimation(0, 0, top, 0);
childView.setClickable(true);
childView.setFocusable(true);
} else {
// 关闭menu
animation = new TranslateAnimation(0, 0, 0, top);
childView.setClickable(false);
childView.setFocusable(false);
}

// 当menu关闭时隐藏所有的子View
animation.setAnimationListener(new Animation.AnimationListener() {
public void onAnimationStart(Animation animation) {
}

public void onAnimationRepeat(Animation animation) {
}

public void onAnimationEnd(Animation animation) {
if (!mIsOpen) {
childView.setVisibility(View.GONE);
}
}
});

animation.setFillAfter(true);
animation.setDuration(durationMillis);
// 设置动画开始的延迟时间
animation.setStartOffset((i * 100) / (childCount - 1));
animset.addAnimation(animation);
childView.startAnimation(animset);
}
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
/**
* 绑定子View动画
*/
private void bindMenuItemAnim(View clickView, int pos) {
mClickView = clickView;
mPos = pos;
Animation animation = null;
for (int i = 1; i < getChildCount(); i++) {
final View childView = getChildAt(i);
if (pos == i) {
// 当前点击的子View
animation = createChildViewAnim(true, 300);
} else {
// 其他未被点击的字View
animation = createChildViewAnim(false, 300);
}
childView.startAnimation(animation);
childView.setClickable(false);
childView.setFocusable(false);
}

mIsOpen = false;
Animation anim = new ScaleAnimation(0f, 1.0f, 0, 1.0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
anim.setDuration(300);
anim.setFillAfter(true);
anim.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {

}

@Override
public void onAnimationEnd(Animation animation) {
if (mListener != null) {
mListener.onClick(mClickView, mPos);
}
}

@Override
public void onAnimationRepeat(Animation animation) {

}
});
mToggleBtn.startAnimation(anim);
}

这里是设置 menu 的状态,还有设置开启按钮的动画效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
* menu状态改变
*/
private void changeStatus(boolean isOpen) {
mIsOpen = isOpen;
// menu开关按钮显示隐藏
if (!mIsOpen) {
Animation anim = new ScaleAnimation(0f, 1.0f, 0, 1.0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
anim.setDuration(300);
anim.setFillAfter(true);
mToggleBtn.startAnimation(anim);

} else {
mToggleBtn.startAnimation(createChildViewAnim(false, 300));
}
}

设置点击背景关闭 menu

这里我是要实现点击除了子 View 的其他位置也要能关闭 menu,也就是背景。

1
2
3
4
5
6
7
8
9
10
@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
// 设置touch事件,点击背景关闭menu,只有当menu已经打开才有效
if (mIsOpen && action == MotionEvent.ACTION_DOWN) {
toggleMenu(300);
changeStatus(false);
}
return super.onTouchEvent(event);
}

这样一个自定义的 ViewGroup 就已经实现了,大家感觉怎么样?

最后给出源码地址 RayMenu