Android自定义ViewGroup实现RayMenu
2016-05-21 本文已影响492人
bincn
先来看一下实现的效果
RayMenu.gif
github上也有大神写的项目：ArcMenu
我这个思路来源于鸿洋大神的blog，感谢！
http://blog.csdn.net/lmj623565791/article/details/37567907
实现思路
标题已经说了是自定义ViewGroup，ViewGroup中的第一个子View作为Menu开启的按钮，之后的6个子View作为Item
- 动画效果实现
这里我用TranslateAnimation实现，对动画有了解的同学应该知道，TranslateAnimation本质是不会改变按钮的位置，而我们的按钮在动画结束后是要点击的。做法：默认让子菜单就已经在目标位置，然后GONE，当点击加号时，让按钮VISIBLE，开始动画，把起始位置设为定点，终点位置就是我们隐藏的区域。当然，也可以用属性动画实现这个效果。
- 确定位置
屏幕快照 2016-05-04 21.42.03.png
如上图，我们可以计算出1-3号item的位置，同理也可以计算出4-6号item的位置，而6号item的位置就是menu开启按钮的位置，当menu打开时，menu开启按钮隐藏，反之显示。
接下来看具体实现
1. onMeasure()
方法比较简单，计算子View的大小，获取ViewGroup的宽度、高度、paddingLeft和paddingRight，计算我们自定义ViewGroup实际显示的宽度
@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);
}
2. onLayout()
确定子View的位置。首先在layoutFirstChildView()中对menu开关按钮（就是ViewGroup中的第一个子View）进行设置，以及初始化点击事件；然后从第二个子View开始为菜单项，分别设置其位置，计算的原理就是上面的草图，把子View事先设置在要显示的位置，然后GONE。
@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);
}
}
3. 设置menu开启事件和子View点击事件
此时子View已经在要显示的位置了，只是状态是不显示GONE，当我们点击开始按钮时，遍历子View先设置状态为显示VISIBLE，然后创建动画，开始位置为屏幕外某一点，结束位置就是子View实际的位置。最后就是绑定子View点击事件。
/**
* 开关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());
}
});
}
}
4. 创建menu开关动画和子View点击动画
这里就比较简单了，根据menu打开还是关闭，设置不同的动画，子View的动画也是类似的，这里有一个时机问题，就是当点击子View的时候，要当动画结束的时候再做其他的操作（比如跳转界面）。
/**
* 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);
}
/**
* 绑定子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);
}
5. menu状态改变
这里是设置menu的状态，还有设置开启按钮的动画效果
/**
* 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));
}
}
6. 设置点击背景关闭menu
这里我是要实现点击除了子View的其他位置也要能关闭menu，也就是背景。
@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
