前天跟着慕课网学习了星级菜单的功能的做法，具体效果如下图所示：
星级菜单.gif
1.这个星级菜单的位置在控件的四个角：左上，左下，右上，右下。
2.绘制主按钮，星级菜单按钮的位置
3.点击主按钮会旋转，切换星级菜单的打开关闭状态
4.当前星级菜单是关闭状态:需要做如下操作
(1)星级菜单的动画是，从主菜单的位置移动到最终的位置
(2)移动的过程会有旋转的动画
(3)切换状态为打开的状态
当前状态是打开状态:需要如下操作
(1)星级菜单的动画是，从要显示的最终位置移动到主菜单的位置
(2)移动的过程会有旋转的动画
(3)切换状态为关闭的状态
5当点击星级菜单的时候，被点击的星级菜单会放大变透明，其余的星级菜单是缩小到透明
注意：星级菜单其实一直都在那个最终的位置,我们只是根据开关状态让其是否显示而已
接下来就一步一步的操作
1.星级菜单的位置有四种可能，所以需要控制其位置，星级菜单的半径
自定义view ArcMenu继承ViewGroup
配置控件需要的参数：在value目录下创建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++) {
//测量内部的大小
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);
}
星级菜单的位置就要用数学知识
星级菜单位置确定.png
根据这样就是知道cl ，ct了，但是并不是真正的坐标，因为
这整个星级菜单可能在左上，左下，右上，右下，
通过观察，我们发现，
左上，左下的横坐标 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);
}
}
这样星级菜单的位置就确定了，我们前面说过星级菜单的位置一直在那里，我们通过开关状态，判断是否显示星级菜单，默认是关闭的，所以要加上隐藏
child.setVisibility(GONE);
7.主菜单设置点击事件，主菜单的变化
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 {//关闭
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.改变星级菜单的状态
/**
* 改变item打开状态
*/
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.至此，星级菜单能够正常的打开，关闭，并且点击，但是当星级菜单在打开的状态时，点击星级菜单以外的控件就让其关闭，如效果图所示，点击button，关闭星级菜单
判断星级菜单是否打开
/**
* 打开状态的判定
* @return
*/
public boolean isOpen() {
return mCurrentStatus == Status.OPEN;
}
如果是打开状态，就调用改变星级菜单状态的方法
if (arcMenu.isOpen()) {
arcMenu.toggleMenu(600);
}
给各位大佬奉上项目的地址：
https://github.com/diudiuhf/SatelliteMenu
