一、这里用到的是传统动画，不是属性动画。
1、自定义属性：在values文件夹下创建attr.xml文件
?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" />
</attr>
<attr name="radius" format="dimension" />
<declare-styleable name="ArcMenu">
<attr name="position" />
<attr name="radius" />
</declare-styleable>
</resources>2、在布局文件中使用：创建一个新的布局文件代码如下：
这里注意xmlns:singir=”http://schemas.android.com/apk/res/com.zkd.example”
在Studio里只需…/apk/res-auto即可
<com.zkd.drawingboard.view.ArcMenu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:singir="http://schemas.android.com/apk/res/com.zkd.example"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/id_menu"
android:layout_width="match_parent"
android:layout_height="match_parent"
singir:position="left_bottom"
singir:radius="130dp" >
<ImageView
android:id="@+id/id_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/contact"
android:tag="contact" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/bluetooth"
android:tag="Bluetooth" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/data"
android:tag="Data" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/location"
android:tag="Location" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/personal"
android:tag="Personal" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/voice"
android:tag="Voice" />
</com.zkd.drawingboard.view.ArcMenu>3、在自定义控件中摘取
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.zkd.example.MainActivity" >
<ListView
android:id="@+id/id_listview"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ListView>
<include layout="@layout/weixing" />
</RelativeLayout>二、定位
1、基本配置–继承ViewGroup
private static final int POS_LEFT_TOP = 0;
private static final int POS_LEFT_BOTTOM = 1;
private static final int POS_RIGHT_TOP = 2;
private static final int POS_RIGHT_BOTTOM = 3;
private int mRadius;
private Position mPosition = Position.RIGHT_BOTTOM;
// 菜单状态
private Status mCurrentStatus = Status.CLOSE;
// 菜单主按钮
private View mCButton;
private OnMenuItemClickListener mMenuItemClickListener;
public enum Status {
OPEN, CLOSE
}
// 菜单的位置枚举类
public enum Position {
LEFT_TOP, LEFT_BOTTOM, RIGHT_TOP, RIGHT_BOTTOM;
}
// 点击子菜单项回调接口
public interface OnMenuItemClickListener {
void onClick(View view, int pos);
}
public void setOnmMenuItemClickListener(
OnMenuItemClickListener mMenuItemClickListener) {
this.mMenuItemClickListener = mMenuItemClickListener;
}
// 第一个调用第二个，第二个调第三个
public ArcMenu(Context arg0) {
this(arg0, null);
}
public ArcMenu(Context arg0, AttributeSet arg1) {
this(arg0, arg1, 0);
// TODO Auto-generated constructor stub
}
public ArcMenu(Context arg0, AttributeSet arg1, int arg2) {
super(arg0, arg1, arg2);
mRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
100, getResources().getDisplayMetrics());
// 获取自定义属性的值--因为这里把菜单设置了左上左下右上右下，共四种，有兴趣的可以设置底部中间
TypedArray a = arg0.getTheme().obtainStyledAttributes(arg1,
R.styleable.ArcMenu, arg2, 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.LEFT_TOP;
break;
case POS_RIGHT_BOTTOM:
mPosition = Position.RIGHT_BOTTOM;
break;
}
mRadius = (int) a.getDimension(R.styleable.ArcMenu_radius, TypedValue
.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100,
getResources().getDisplayMetrics()));
a.recycle();//回收
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int count = getChildCount();
for (int i = 0; i < count; i++) {
// 测量child
measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
2、定位主菜单按钮；左上按钮起始位置左为0、上为0，所以左下按钮起始位置上为屏幕高度减去按钮高度，以下同理。mCButton.layout(l, t, l + width, t + height);layout 四个属性-左，上，右，下，都是相对于父布局，若左为0右即为l+width为按钮宽度，指相对父布局向右一个按钮宽度，下同理
// 定位主菜单按钮
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_BOTTOM:
l = getMeasuredWidth() - width;
t = getMeasuredHeight() - height;
break;
}
// 四个属性-左，上，右，下
mCButton.layout(l, t, l + width, t + height);
}
3、定位子菜单：有必要说一下，子菜单其实就是在固定位置并没有变，只是未点击按钮时隐藏了，点击时加上了动画。因为子菜单是相对于主菜单呈圆弧状所以若是左上按钮他的位置是半径乘以sin<角度：二分之π除以夹角数>—mRadius * Math.sin(Math.PI / 2 / (count - 2)。因为在其他位置时定位不同；具体逻辑同上
// 子菜单显示位置
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if (changed) {
layoutCButton();
int count = getChildCount();
for (int i = 0; i < count - 1; i++) {
View child = getChildAt(i + 1);
child.setVisibility(View.GONE);
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 cWidth = child.getMeasuredWidth();
int cHeight = child.getMeasuredHeight();
// 菜单位置左下右下
if (mPosition == Position.LEFT_BOTTOM
|| mPosition == Position.RIGHT_BOTTOM) {
ct = getMeasuredHeight() - cHeight - ct;
}
if (mPosition == Position.RIGHT_TOP
|| mPosition == Position.RIGHT_BOTTOM) {
cl = getMeasuredWidth() - cWidth - cl;
}
child.layout(cl, ct, cl + cWidth, ct + cHeight);
}
}
}
4、设置主菜单点击后动画和状态的改变
@Override
public void onClick(View v) {
// 1 mCButton = findViewById(R.id.id_button);//找到cButton。
// 2 if (mCButton == null) {
// mCButton = getChildAt(0);
// }
rotateCButton(v, 0f, 360f, 300);
toggleMenu(300);
}
// 切换菜单状态
private void changeStatus() {
// TODO Auto-generated method stub
mCurrentStatus = (mCurrentStatus == Status.CLOSE ? Status.OPEN//是否为关闭，关闭了就打开
: Status.CLOSE);
}
//主菜单旋转动画
private void rotateCButton(View v, float start, float end, int duration) {
RotateAnimation anim = new RotateAnimation(start, end,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
anim.setDuration(duration);
anim.setFillAfter(true);// 转完后停下
v.startAnimation(anim);
}
5、子菜单的拖出动画主要是平移、旋转、缩进、透明度变化。需要注意起始位置相对于子菜单原位置的不同
代码里有解释
// 添加平移动画
int count = getChildCount();// count算上主菜单
for (int i = 0; i < count - 1; i++) {
final View childView = getChildAt(i + 1);// 去掉主菜单
childView.setVisibility(View.VISIBLE);
// end 0，0 因为子菜单本就在那个位置未显示，从主菜单抛出后停在原位置，相对于结束位置是0
// start相对原位置是负的
int cl = (int) (mRadius * Math.sin(Math.PI / 2 / (count - 2) * i));
int ct = (int) (mRadius * Math.cos(Math.PI / 2 / (count - 2) * i));
// 右上x开始时比起始位置大 y比起始位置大 同理右下
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 animset = new AnimationSet(true);
Animation tranAnim = null;
// to open
if (mCurrentStatus == Status.CLOSE) {
tranAnim = new TranslateAnimation(xflag * cl, 0, yflag * ct, 0);
childView.setClickable(true);// 可以点击了
childView.setFocusable(true);
} else {// to close
tranAnim = new TranslateAnimation(0, xflag * cl, 0, yflag * ct);
childView.setClickable(false);// 可以点击了
childView.setFocusable(false);
}
tranAnim.setFillAfter(true);
tranAnim.setDuration(duration);
tranAnim.setStartOffset((i * 200) / count);
tranAnim.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationEnd(Animation animation) {
// 动画结束隐藏子菜单
if (mCurrentStatus == Status.CLOSE) {
childView.setVisibility(View.GONE);
}
}
});
// 旋转动画
RotateAnimation rotateAnim = new RotateAnimation(0, 720,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnim.setDuration(duration);
rotateAnim.setFillAfter(true);
animset.addAnimation(rotateAnim);
animset.addAnimation(tranAnim);
childView.startAnimation(animset);
}
// 切换菜单状态
changeStatus();
6、设置子菜单点击事件，点击动画，很简单。
final int pos = i + 1;
childView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (mMenuItemClickListener != null) {
mMenuItemClickListener.onClick(childView, pos);
menuItemAnim(pos - 1);
changeStatus();
}
}
});写在外面
// 添加menuItemAnim的点击动画
private void menuItemAnim(int pos) {
for (int i = 0; i < getChildCount() - 1; i++) {
View childView = getChildAt(i + 1);
if (i == pos) {
childView.startAnimation(scaleBigAnim(300));
} else {
childView.startAnimation(scaleSmallAnim(300));
}
childView.setClickable(false);
childView.setFocusable(false);
}
}
private Animation scaleSmallAnim(int duration) {
AnimationSet animationSet = new AnimationSet(true);
ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 0f, 1.0f, 0.0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
AlphaAnimation alphaAnim = new AlphaAnimation(1f, 0.0f);
animationSet.addAnimation(scaleAnim);
animationSet.addAnimation(alphaAnim);
animationSet.setDuration(duration);
animationSet.setFillAfter(true);
return animationSet;
}
// 为点击的Item设置变大。 透明度降低的动画
private Animation scaleBigAnim(int duration) {
AnimationSet animationSet = new AnimationSet(true);
ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 4.0f, 1.0f, 4.0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
AlphaAnimation alphaAnim = new AlphaAnimation(1f, 0.0f);
animationSet.addAnimation(scaleAnim);
animationSet.addAnimation(alphaAnim);
animationSet.setDuration(duration);
animationSet.setFillAfter(true);
return animationSet;
}结束。里面一些定位逻辑需要思考，代码虽多但很简单。有兴趣的朋友可以看看源代码
。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
