Android 自定义View修炼-Android 实现自定义的卫星式菜单（弧形菜单）View
一、总述
Android 实现卫星式菜单也叫弧形菜单的主要要做的工作如下：
1.动画的处理
2.自定义ViewGroup来实现卫星式菜单View
（1）自定义属性
a. 在attrs.xml中定义属性
b. 在布局中使用自定义属性
c. 在自定义View中读取布局文件中的自定义属性
（2）onMeasure 测量 child 即测量主按钮以及菜单项
（3）onLayout 布局 child 即布局主按钮以及菜单项
（4）设置主按钮的选择动画
a.为菜单项menuItem添加平移动画和旋转动画
b.实现菜单项menuItem的点击动画
卫星式菜单效果截图：
二、实现
上面介绍了原理和效果图，下面来看看卫星菜单类的实现：
1.布局文件的实现
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:xcskin="http://schemas.android.com/apk/res/com.xc.xcskin" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" > <com.xc.xcskin.view.XCArcMenuView android:id="@+id/arcmenu" android:layout_width="150dp" android:layout_height="150dp" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" xcskin:position="left_bottom" xcskin:radius="120dp" > <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/composer_button" > <ImageView android:id="@+id/id_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/composer_icn_plus" /> </RelativeLayout> <ImageView android:id="@+id/id_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/composer_camera" android:tag="camera" /> <ImageView android:id="@+id/id_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/composer_music" android:tag="music" /> <ImageView android:id="@+id/id_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/composer_place" android:tag="place" /> <ImageView android:id="@+id/id_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/composer_sleep" android:tag="sleep" /> <ImageView android:id="@+id/id_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/composer_thought" android:tag="thought" /> <ImageView android:id="@+id/id_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/composer_with" android:tag="with" /> </com.xc.xcskin.view.XCArcMenuView> <com.xc.xcskin.view.XCArcMenuView android:id="@+id/arcmenu2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" xcskin:position="right_bottom" xcskin:radius="150dp" > <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/composer_button" > <ImageView android:id="@+id/id_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/composer_icn_plus" /> </RelativeLayout> <ImageView android:id="@+id/id_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/composer_camera" android:tag="camera" /> <ImageView android:id="@+id/id_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/composer_music" android:tag="music" /> <ImageView android:id="@+id/id_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/composer_place" android:tag="place" /> <ImageView android:id="@+id/id_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/composer_sleep" android:tag="sleep" /> <ImageView android:id="@+id/id_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/composer_thought" android:tag="thought" /> <ImageView android:id="@+id/id_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/composer_with" android:tag="with" /> </com.xc.xcskin.view.XCArcMenuView> </RelativeLayout>
2.卫星菜单类的实现
package com.xc.xcskin.view; import com.xc.xcskin.R; import android.content.Context; import android.content.res.TypedArray; import android.util.AttributeSet; import android.util.Log; import android.util.TypedValue; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.view.animation.AlphaAnimation; import android.view.animation.Animation; import android.view.animation.Animation.AnimationListener; import android.view.animation.AnimationSet; import android.view.animation.RotateAnimation; import android.view.animation.ScaleAnimation; import android.view.animation.TranslateAnimation; /** * 卫星式菜单View * @author caizhiming * */ public class XCArcMenuView extends ViewGroup implements OnClickListener{ 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 Position mPosition = Position.RIGHT_BOTTOM; private int mRadius; private Status mStatus = Status.CLOSE; //主菜的单按钮 private View mCButton; private OnMenuItemClickListener mOnMenuItemClickListener; /** * 菜单的状态枚举类 * @author caizhiming * */ public enum Status{ OPEN,CLOSE } /** * 菜单的位置枚举类 * @author caizhiming * */ public enum Position{ LEFT_TOP,LEFT_BOTTOM, RIGHT_TOP,RIGHT_BOTTOM } /** * 点击子菜单项的回调接口 * @author caizhiming * */ public interface OnMenuItemClickListener { void onClick(View view, int pos); } public void setOnMenuItemClickListener( OnMenuItemClickListener onMenuItemClickListener) { this.mOnMenuItemClickListener = onMenuItemClickListener; } public XCArcMenuView(Context context) { this(context, null); // TODO Auto-generated constructor stub } public XCArcMenuView(Context context, AttributeSet attrs) { this(context, attrs, 0); // TODO Auto-generated constructor stub } public XCArcMenuView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); // TODO Auto-generated constructor stub //获取自定义属性 TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.XCArcMenuView,defStyle,0); int pos = a.getInt(R.styleable.XCArcMenuView_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_BOTTOM; break; } mRadius = (int) a.getDimension(R.styleable.XCArcMenuView_radius, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 150, getResources().getDisplayMetrics())); Log.v("czm", "mPosition = " + mPosition + ",mRadius = "+mRadius); a.recycle(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // TODO Auto-generated method stub int count = getChildCount(); for(int i = 0; i < count; i ++){ measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec); } super.onMeasure(widthMeasureSpec, heightMeasureSpec); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { // TODO Auto-generated method stub if(changed){ layoutCButton(); layoutMenuItems(); } } /** * 布局主菜单项 */ private void layoutCButton() { // TODO Auto-generated method stub 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; default: break; } mCButton.layout(l, t, l + width, t + height); } /** * 布局菜单项 */ private void layoutMenuItems() { // TODO Auto-generated method stub int count = getChildCount(); for (int i = 0; i < count - 1; i++) { View child = getChildAt(i + 1); int l = (int) (mRadius * Math.sin(Math.PI / 2 / (count - 2) * i)); int t = (int) (mRadius * Math.cos(Math.PI / 2 / (count - 2) * i)); int width = child.getMeasuredWidth(); int height = child.getMeasuredHeight(); // 如果菜单位置在底部 左下，右下 if (mPosition == Position.LEFT_BOTTOM || mPosition == Position.RIGHT_BOTTOM) { t = getMeasuredHeight() - height - t; } // 右上，右下 if (mPosition == Position.RIGHT_TOP || mPosition == Position.RIGHT_BOTTOM) { l = getMeasuredWidth() - width - l; } child.layout(l, t, l + width, t + height); child.setVisibility(View.GONE); } } @Override public void onClick(View v) { // TODO Auto-generated method stub mCButton = findViewById(R.id.id_button); rotateCButton(v,0,360,300); toggleMenu(300); } /** * 切换菜单 */ public void toggleMenu(int duration) { // TODO Auto-generated method stub // 为menuItem添加平移动画和旋转动画 int count = getChildCount(); for (int i = 0; i < count - 1; i++) { final View childView = getChildAt(i + 1); childView.setVisibility(View.VISIBLE); // end 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)); int xflag = 1; int yflag = 1; if (mPosition == Position.LEFT_TOP || mPosition == Position.LEFT_BOTTOM) { xflag = -1; } if (mPosition == Position.LEFT_TOP || mPosition == Position.RIGHT_TOP) { yflag = -1; } AnimationSet animset = new AnimationSet(true); Animation tranAnim = null; // to open if (mStatus == 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 * 100) / count); tranAnim.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationRepeat(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { if (mStatus == 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); final int pos = i + 1; childView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if (mOnMenuItemClickListener != null) mOnMenuItemClickListener.onClick(childView, pos); menuItemAnim(pos - 1); changeStatus(); } }); } // 切换菜单状态 changeStatus(); } /** * 选择主菜单按钮 * */ private void rotateCButton(View v, float start, float end, int duration) { // TODO Auto-generated method stub 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); } /** * 添加menuItem的点击动画 * */ 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); } } /** * 为当前点击的Item设置变小和透明度增大的动画 * @param duration * @return */ private Animation scaleSmallAnim(int duration) { AnimationSet animationSet = new AnimationSet(true); ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 0.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; } /** * 切换菜单状态 */ private void changeStatus() { mStatus = (mStatus == Status.CLOSE ? Status.OPEN : Status.CLOSE); } /** * 是否处于展开状态 * @return */ public boolean isOpen() { return mStatus == Status.OPEN; } }
3.使用卫星式菜单类
package com.xc.xcskin; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.Toast; import com.xc.xcskin.view.XCArcMenuView; import com.xc.xcskin.view.XCArcMenuView.OnMenuItemClickListener; import com.xc.xcskin.view.XCGuaguakaView; import com.xc.xcskin.view.XCGuaguakaView.OnCompleteListener; /** * 使用并测试自定义卫星式菜单View * @author caizhiming * */ public class XCArcMenuViewDemo extends Activity{ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.xc_arcmenu_view_demo); XCArcMenuView view = (XCArcMenuView) findViewById(R.id.arcmenu); view.setOnMenuItemClickListener(new OnMenuItemClickListener() { @Override public void onClick(View view, int pos) { // TODO Auto-generated method stub String tag = (String) view.getTag(); Toast.makeText(XCArcMenuViewDemo.this, tag, Toast.LENGTH_SHORT).show(); } }); } }
三、源码下载
