先來看一下實(shí)現(xiàn)的效果
github上也有大神寫的項(xiàng)目：ArcMenu
我這個(gè)思路來源于鴻洋大神的blog，感謝！
http://blog.csdn.net/lmj623565791/article/details/37567907
實(shí)現(xiàn)思路
標(biāo)題已經(jīng)說了是自定義ViewGroup，ViewGroup中的第一個(gè)子View作為Menu開啟的按鈕，之后的6個(gè)子View作為Item
- 動(dòng)畫效果實(shí)現(xiàn)
這里我用TranslateAnimation實(shí)現(xiàn)，對(duì)動(dòng)畫有了解的同學(xué)應(yīng)該知道，TranslateAnimation本質(zhì)是不會(huì)改變按鈕的位置，而我們的按鈕在動(dòng)畫結(jié)束后是要點(diǎn)擊的。做法：默認(rèn)讓子菜單就已經(jīng)在目標(biāo)位置，然后GONE，當(dāng)點(diǎn)擊加號(hào)時(shí)，讓按鈕VISIBLE，開始動(dòng)畫，把起始位置設(shè)為定點(diǎn)，終點(diǎn)位置就是我們隱藏的區(qū)域。當(dāng)然，也可以用屬性動(dòng)畫實(shí)現(xiàn)這個(gè)效果。
- 確定位置
如上圖，我們可以計(jì)算出1-3號(hào)item的位置，同理也可以計(jì)算出4-6號(hào)item的位置，而6號(hào)item的位置就是menu開啟按鈕的位置，當(dāng)menu打開時(shí)，menu開啟按鈕隱藏，反之顯示。
接下來看具體實(shí)現(xiàn)
1. onMeasure()
方法比較簡單，計(jì)算子View的大小，獲取ViewGroup的寬度、高度、paddingLeft和paddingRight，計(jì)算我們自定義ViewGroup實(shí)際顯示的寬度
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 當(dāng)前ViewGroup的寬度和高度
mMeasuredWidth = getMeasuredWidth();
mMeasuredHeight = getMeasuredHeight();
mPaddingLeft = getPaddingLeft();
mPaddingRight = getPaddingRight();
// ViewGroup實(shí)際可顯示的寬，減去左右的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()中對(duì)menu開關(guān)按鈕（就是ViewGroup中的第一個(gè)子View）進(jìn)行設(shè)置，以及初始化點(diǎn)擊事件；然后從第二個(gè)子View開始為菜單項(xiàng)，分別設(shè)置其位置，計(jì)算的原理就是上面的草圖，把子View事先設(shè)置在要顯示的位置，然后GONE。
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// changed參數(shù)，當(dāng)前ViewGroup的尺寸或者位置是否發(fā)生了改變
if (!changed) {
return;
}
// 第一個(gè)子View，作為menu的開關(guān)button
View firstChildView = getChildAt(0);
// 所有子View的寬高都一致
mCWidth = firstChildView.getMeasuredWidth();
mCHeight = firstChildView.getMeasuredHeight();
// 水平間隔
mHorizontalSpace = (mActualWidth - 3 * mCWidth) / 2;
// 垂直間隔
mVerticalSpace = dip2px(mContext, 40);
// 繪制第一個(gè)子View
layoutFirstChildView(firstChildView);
int childCount = getChildCount();
// 子View的行數(shù)
mLine = (int) Math.ceil(childCount / 3.0f);
for (int i = 1; i < childCount; i++) {
View childView = getChildAt(i);
childView.setVisibility(GONE);
// 標(biāo)記當(dāng)前子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. 設(shè)置menu開啟事件和子View點(diǎn)擊事件
此時(shí)子View已經(jīng)在要顯示的位置了，只是狀態(tài)是不顯示GONE，當(dāng)我們點(diǎn)擊開始按鈕時(shí)，遍歷子View先設(shè)置狀態(tài)為顯示VISIBLE，然后創(chuàng)建動(dòng)畫，開始位置為屏幕外某一點(diǎn)，結(jié)束位置就是子View實(shí)際的位置。最后就是綁定子View點(diǎn)擊事件。
/**
* 開關(guān)menu
*/
private void toggleMenu(int durationMillis) {
int childCount = getChildCount();
for (int i = 1; i < childCount; i++) {
View childView = getChildAt(i);
childView.setVisibility(VISIBLE);
// 標(biāo)記當(dāng)前子View的所在行
int lineTag = (i - 1) / mLine;
// 垂直偏移量
int verticalOffset = (2 - lineTag) * mVerticalSpace;
int top = mMeasuredHeight - (2 - lineTag) * mCHeight - verticalOffset;
// 創(chuàng)建并且綁定menu動(dòng)畫
createBindMenuAnim(childView, childCount, i, top, durationMillis);
childView.setTag(i);
// 子View點(diǎn)擊事件
childView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
bindMenuItemAnim(v, (Integer) v.getTag());
}
});
}
}
4. 創(chuàng)建menu開關(guān)動(dòng)畫和子View點(diǎn)擊動(dòng)畫
這里就比較簡單了，根據(jù)menu打開還是關(guān)閉，設(shè)置不同的動(dòng)畫，子View的動(dòng)畫也是類似的，這里有一個(gè)時(shí)機(jī)問題，就是當(dāng)點(diǎn)擊子View的時(shí)候，要當(dāng)動(dòng)畫結(jié)束的時(shí)候再做其他的操作（比如跳轉(zhuǎn)界面）。
/**
* menu動(dòng)畫
*
* @param childView 子View
* @param top fromYDelta、toYDelta
* @param i 當(dāng)前子View的位置
* @param durationMillis 動(dòng)畫時(shí)間
* @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 {
// 關(guān)閉menu
animation = new TranslateAnimation(0, 0, 0, top);
childView.setClickable(false);
childView.setFocusable(false);
}
// 當(dāng)menu關(guān)閉時(shí)隱藏所有的子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);
// 設(shè)置動(dòng)畫開始的延遲時(shí)間
animation.setStartOffset((i * 100) / (childCount - 1));
animset.addAnimation(animation);
childView.startAnimation(animset);
}
/**
* 綁定子View動(dòng)畫
*/
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) {
// 當(dāng)前點(diǎn)擊的子View
animation = createChildViewAnim(true, 300);
} else {
// 其他未被點(diǎn)擊的字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狀態(tài)改變
這里是設(shè)置menu的狀態(tài)，還有設(shè)置開啟按鈕的動(dòng)畫效果
/**
* menu狀態(tài)改變
*/
private void changeStatus(boolean isOpen) {
mIsOpen = isOpen;
// menu開關(guān)按鈕顯示隱藏
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. 設(shè)置點(diǎn)擊背景關(guān)閉menu
這里我是要實(shí)現(xiàn)點(diǎn)擊除了子View的其他位置也要能關(guān)閉menu，也就是背景。
@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
// 設(shè)置touch事件，點(diǎn)擊背景關(guān)閉menu，只有當(dāng)menu已經(jīng)打開才有效
if (mIsOpen && action == MotionEvent.ACTION_DOWN) {
toggleMenu(300);
changeStatus(false);
}
return super.onTouchEvent(event);
}
這樣一個(gè)自定義的ViewGroup就已經(jīng)實(shí)現(xiàn)了，大家感覺怎么樣？
代碼可能寫的不夠優(yōu)美，歡迎大家指出不足，也歡迎給我留言，共同進(jìn)步，謝謝！
最后給出源碼地址RayMenu
