前天跟著慕課網(wǎng)學習了星級菜單的功能的做法，具體效果如下圖所示：
星級菜單.gif
1.這個星級菜單的位置在控件的四個角：左上，左下，右上，右下。
2.繪制主按鈕，星級菜單按鈕的位置
3.點擊主按鈕會旋轉(zhuǎn)，切換星級菜單的打開關(guān)閉狀態(tài)
4.當前星級菜單是關(guān)閉狀態(tài):需要做如下操作
??????(1)星級菜單的動畫是，從主菜單的位置移動到最終的位置
??????(2)移動的過程會有旋轉(zhuǎn)的動畫
??????(3)切換狀態(tài)為打開的狀態(tài)
???當前狀態(tài)是打開狀態(tài):需要如下操作
??????(1)星級菜單的動畫是，從要顯示的最終位置移動到主菜單的位置
??????(2)移動的過程會有旋轉(zhuǎn)的動畫
??????(3)切換狀態(tài)為關(guān)閉的狀態(tài)
5當點擊星級菜單的時候，被點擊的星級菜單會放大變透明，其余的星級菜單是縮小到透明
注意：星級菜單其實一直都在那個最終的位置,我們只是根據(jù)開關(guān)狀態(tài)讓其是否顯示而已
接下來就一步一步的操作
1.星級菜單的位置有四種可能，所以需要控制其位置，星級菜單的半徑
自定義view ArcMenu繼承ViewGroup
配置控件需要的參數(shù)：在value目錄下創(chuàng)建attrs文件
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="position">
<enum name="left_top" value="0" />
<enum name="left_bottom" value="1" />
<enum name="right_top" value="2" />
<enum name="right_bottom" value="3" />
<enum name="center_bottom" value="4" />
</attr>
<attr name="radius" format="dimension" />
<declare-styleable name="ArcMenu">
<attr name="position" />
<attr name="radius" />
</declare-styleable>
</resources>
2.寫布局
<com.diudiu.satellitemenu.satellite.view.ArcMenu
android:id="@+id/arcMenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:position="left_bottom"
app:radius="140dp">
</com.diudiu.satellitemenu.satellite.view.ArcMenu>
3.在ArcMenu的文件中獲取自定義的屬性的值：
mRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100, getResources().getDisplayMetrics());
//獲取自定義屬性的值
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ArcMenu, defStyleAttr, 0);
int pos = a.getInt(R.styleable.ArcMenu_position, POS_RIGHT_BOTTOM);
switch (pos) {
case POS_LEFT_TOP:
mPosition = Position.LEFT_TOP;
break;
case POS_LEFT_BOTTOM:
mPosition = Position.LEFT_BOTTOM;
break;
case POS_RIGHT_TOP:
mPosition = Position.RIGHT_TOP;
break;
case POS_RIGHT_BOTTOM:
mPosition = Position.RIGHT_BOTOTM;
break;
}
mRadius = (int) a.getDimension(R.styleable.ArcMenu_radius, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100, getResources().getDisplayMetrics()));
Log.e("TAG", "position=" + mPosition + ",radius=" + mRadius);
a.recycle();
4.因為ArcMenu繼承ViewGroup，在其里面可以添加按鈕，第一個一般是主按鈕，后面的是星級菜單的按鈕
5.重寫onMeasue方法，測量子控件的大小
int count = getChildCount();
for (int i = 0; i < count; i++) {
//測量內(nèi)部的大小
measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);
}
6.重寫onLayout方法，測量子控件的位置
主button的位置
if (changed) {
layoutCButton();
}
/**
* 測量主Button
*/
private void layoutCButton() {
mCButton = getChildAt(0);
mCButton.setOnClickListener(this);
int l = 0;
int t = 0;
int width = mCButton.getMeasuredWidth();
int height = mCButton.getMeasuredHeight();
switch (mPosition) {
case LEFT_TOP:
l = 0;
t = 0;
break;
case LEFT_BOTTOM:
l = 0;
t = getMeasuredHeight() - height;
break;
case RIGHT_TOP:
l = getMeasuredWidth() - width;
t = 0;
break;
case RIGHT_BOTOTM:
l = getMeasuredWidth() - width;
t = getMeasuredHeight() - height;
break;
}
mCButton.layout(l, t, l + width, t + height);
}
星級菜單的位置就要用數(shù)學知識
星級菜單位置確定.png
根據(jù)這樣就是知道cl ，ct了，但是并不是真正的坐標，因為
這整個星級菜單可能在左上，左下，右上，右下，
通過觀察，我們發(fā)現(xiàn)，
左上，左下的橫坐標 x一樣；右上，右下的橫坐標x一樣
左上右上的縱坐標y一樣；左下，右下的縱坐標y一樣
/**
* 測量item的位置
*/
private void layoutIButton() {
int count = getChildCount();
for (int i = 0; i < count - 1; i++) {
View child = getChildAt(i + 1);
int cWidth = child.getMeasuredWidth();
int cHeight = child.getMeasuredHeight();
int cl = (int) (mRadius * Math.sin(Math.PI / 2 / (count - 2) * i));
int ct = (int) (mRadius * Math.cos(Math.PI / 2 / (count - 2) * i));
if (mPosition == Position.LEFT_BOTTOM || mPosition == Position.RIGHT_BOTOTM) {
ct = getMeasuredHeight() - ct - cHeight;
}
if (mPosition == Position.RIGHT_BOTOTM || mPosition == Position.RIGHT_TOP) {
cl = getMeasuredWidth() - cl - cWidth;
}
child.layout(cl, ct, cl + cWidth, ct + cHeight);
}
}
這樣星級菜單的位置就確定了，我們前面說過星級菜單的位置一直在那里，我們通過開關(guān)狀態(tài)，判斷是否顯示星級菜單，默認是關(guān)閉的，所以要加上隱藏
child.setVisibility(GONE);
7.主菜單設(shè)置點擊事件，主菜單的變化
rotateCButton(mCButton, 0, 360, 300);
private void rotateCButton(View view, float start, float end, int duration) {
RotateAnimation rotateAnimation = new RotateAnimation(start, end, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(duration);
rotateAnimation.setFillAfter(true);
view.startAnimation(rotateAnimation);
}
星級菜單的變化
toggleMenu(300);
/**
* 切換菜單
*
* @param duration
*/
public void toggleMenu(int duration) {
int count = getChildCount();
for (int i = 0; i < count - 1; i++) {
final View childView = getChildAt(i + 1);
childView.setVisibility(VISIBLE);
int cl = (int) (mRadius * Math.sin(Math.PI / 2 / (count - 2) * i));
int ct = (int) (mRadius * Math.cos(Math.PI / 2 / (count - 2) * i));
int xflag = 1;
int yflag = 1;
if (mPosition == Position.LEFT_TOP || mPosition == Position.LEFT_BOTTOM) {
xflag = -1;
}
if (mPosition == Position.RIGHT_TOP || mPosition == Position.LEFT_TOP) {
yflag = -1;
}
AnimationSet animationSet = new AnimationSet(true);
TranslateAnimation translateAnimation = null;
//打開
if (mCurrentStatus == Status.CLOSE) {
translateAnimation = new TranslateAnimation(cl * xflag, 0, ct * yflag, 0);
childView.setFocusable(true);
childView.setEnabled(true);
} else {//關(guān)閉
translateAnimation = new TranslateAnimation(0, cl * xflag, 0, ct * yflag);
childView.setEnabled(false);
childView.setFocusable(false);
}
translateAnimation.setDuration(duration);
translateAnimation.setFillAfter(true);
RotateAnimation rotateAnimation = new RotateAnimation(0, 720, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(duration);
rotateAnimation.setFillAfter(true);
animationSet.addAnimation(rotateAnimation);
animationSet.addAnimation(translateAnimation);
animationSet.setStartOffset(i * 100 / count);
childView.startAnimation(animationSet);
animationSet.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
if (mCurrentStatus == Status.CLOSE) {
childView.setVisibility(GONE);
}
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
changeIStatus();
}
8.改變星級菜單的狀態(tài)
/**
* 改變item打開狀態(tài)
*/
private void changeIStatus() {
mCurrentStatus = (mCurrentStatus == Status.CLOSE) ? Status.OPEN : Status.CLOSE;
}
9為星級菜單添加點擊事件
childView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (onMunuItemClickListener != null) {
onMunuItemClickListener.onClick(childView, pos);
onMenuItemAnimate(pos - 1);
changeIStatus();
}
}
});
判斷被點擊的星級菜單放大，其余的縮小
private void onMenuItemAnimate(int pos) {
for (int i = 0; i < getChildCount() - 1; i++) {
View childView = getChildAt(i + 1);
if (pos == i) {
childView.startAnimation(onMenuBigAnimate(300));
} else {
childView.startAnimation(onMenuSmallAnimate(300));
}
}
}
/**
* 放大的動畫
*
* @param duration
* @return
*/
private Animation onMenuBigAnimate(int duration) {
AnimationSet animationSet = new AnimationSet(true);
ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 4.0f, 1.0f, 4.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0f);
animationSet.addAnimation(alphaAnimation);
animationSet.addAnimation(scaleAnimation);
animationSet.setDuration(duration);
animationSet.setFillAfter(true);
return animationSet;
}
/**
* 縮小的動畫
*
* @param duration
* @return
*/
private Animation onMenuSmallAnimate(int duration) {
AnimationSet animationSet = new AnimationSet(true);
ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 0f, 1.0f, 0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0f);
animationSet.addAnimation(alphaAnimation);
animationSet.addAnimation(scaleAnimation);
animationSet.setDuration(duration);
animationSet.setFillAfter(true);
return animationSet;
}
10.至此，星級菜單能夠正常的打開，關(guān)閉，并且點擊，但是當星級菜單在打開的狀態(tài)時，點擊星級菜單以外的控件就讓其關(guān)閉，如效果圖所示，點擊button，關(guān)閉星級菜單
判斷星級菜單是否打開
/**
* 打開狀態(tài)的判定
* @return
*/
public boolean isOpen() {
return mCurrentStatus == Status.OPEN;
}
如果是打開狀態(tài)，就調(diào)用改變星級菜單狀態(tài)的方法
if (arcMenu.isOpen()) {
arcMenu.toggleMenu(600);
}
給各位大佬奉上項目的地址：
https://github.com/diudiuhf/SatelliteMenu
