模仿优酷菜单

转载注明出处:    http://blog.csdn.net/forwardyzk/article/details/42554691

在开发中，会使用菜单，现在模拟一下优酷的菜单效果。

其实效果都是由android基本的动画效果组成的，在合适的时间显示对应的动画，即可展示出不一样的效果。

思路:

1.自定义类RotateMenuView继承RelativeLayout。

2.在需要加载的布局文件中，添加对应的菜单View。

3.定义菜单进入和出去的动画效果，使用旋转动画，进来顺时针，出去的时候，为逆时针。

4.在为不同等级的菜单添加动画的时，设置合适时间间隔。

   同时进入时候，进入顺序，一级菜单，二级菜单，三级菜单，有动画间隔延迟加载。

   同时出去的时候，出去顺序，三级菜单，二级菜单，一级菜单，有动画间隔延迟加载。

5.一级菜单控制耳机菜单，二级菜单控制三级菜单，菜单的显示状态，每次都更新，初始化额时候，默认都是不现实。

6.对二级菜单和三级菜单的按钮增加点击事件。

菜单进入，出去，点击的效果

private static boolean isRunning = false;/** * 菜单进入动画，顺时针， *  * @param viewGroup * @param startOffset *            延迟时间 */public static void startInRotateAnimation(ViewGroup viewGroup,long startOffset) {for (int i = 0; i < viewGroup.getChildCount(); i++) {viewGroup.getChildAt(i).setEnabled(true); // 设置VieGroup所有的孩子状态Endbled为True}RotateAnimation anim = new RotateAnimation(-180f, 0f,Animation.RELATIVE_TO_SELF, 0.5f, // x轴上的值Animation.RELATIVE_TO_SELF, 1.0f); // y轴上的值anim.setDuration(500); // 一次动画的事件anim.setStartOffset(startOffset);anim.setFillAfter(true); // 动画停止在最后状态anim.setAnimationListener(new AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {isRunning = true;}@Overridepublic void onAnimationEnd(Animation animation) {isRunning = false;}@Overridepublic void onAnimationRepeat(Animation animation) {// TODO Auto-generated method stub}});viewGroup.startAnimation(anim);}/** * 菜单出去动画 *  * @param viewGroup * @param startOffset *            延迟时间 */public static void startOutRotateAnimation(ViewGroup viewGroup,long startOffset) {for (int i = 0; i < viewGroup.getChildCount(); i++) {viewGroup.getChildAt(i).setEnabled(false);}RotateAnimation anim = new RotateAnimation(0f, -180f,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,1.0f);anim.setDuration(500);anim.setStartOffset(startOffset);anim.setFillAfter(true);anim.setAnimationListener(new AnimationListener() {/** * 当动画开始时 */@Overridepublic void onAnimationStart(Animation animation) {isRunning = true;}/** * 当动画结束时 */@Overridepublic void onAnimationEnd(Animation animation) {isRunning = false;}/** * 当动画开始之前 */@Overridepublic void onAnimationRepeat(Animation animation) {// TODO Auto-generated method stub}});viewGroup.startAnimation(anim);}/** * 获取动画是否正在执行 *  * @return */public static boolean isRunningAnimation() {return isRunning;}/** * @return 点击菜单按钮的效果，放大 */public static ScaleAnimation normalToBig(View view) {ScaleAnimation animation = new ScaleAnimation(1.0f, 1.5f, 1.0f, 1.5f,ScaleAnimation.RELATIVE_TO_SELF, 0.5f,ScaleAnimation.RELATIVE_TO_SELF, 0.5f);animation.setDuration(2000);animation.setFillAfter(false);view.startAnimation(animation);return animation;}

设置菜单显示和隐藏

/** * 优酷菜单是否显示 *  * @return */public boolean showMeun() {if (MenuAnimationUtils.isRunningAnimation())return true;if (isDisplayMenu) {long startOffset = 0;// 隐藏菜单if (isDisplayLevel2) { // 二级菜单显示状态, 隐藏if (isDisplayLevel3) { // 三级菜单显示状态, 隐藏它MenuAnimationUtils.startOutRotateAnimation(rlLevel3,startOffset);startOffset = 200;isDisplayLevel3 = !isDisplayLevel3;}MenuAnimationUtils.startOutRotateAnimation(rlLevel2,startOffset);startOffset += 200;isDisplayLevel2 = !isDisplayLevel2;}// 隐藏一级菜单MenuAnimationUtils.startOutRotateAnimation(rlLevel1, startOffset);} else {// 显示菜单// 判断菜单是否是为View.GONE的状态if (rlLevel1.getVisibility() == View.GONE&& rlLevel2.getVisibility() == View.GONE&& rlLevel3.getVisibility() == View.GONE) {// 设置菜单显示rlLevel1.setVisibility(View.VISIBLE);rlLevel2.setVisibility(View.VISIBLE);rlLevel3.setVisibility(View.VISIBLE);}MenuAnimationUtils.startInRotateAnimation(rlLevel1, 0);MenuAnimationUtils.startInRotateAnimation(rlLevel2, 200);MenuAnimationUtils.startInRotateAnimation(rlLevel3, 400);isDisplayLevel2 = !isDisplayLevel2;isDisplayLevel3 = !isDisplayLevel3;}return isDisplayMenu = !isDisplayMenu;}

控制按钮的点击事件

if (MenuAnimationUtils.isRunningAnimation())return;switch (v.getId()) {case R.id.ib_home:// 主菜单按钮if (isDisplayLevel2) {long startOffset = 0;if (isDisplayLevel3) {MenuAnimationUtils.startOutRotateAnimation(rlLevel3,startOffset);isDisplayLevel3 = !isDisplayLevel3;startOffset = 200;}// 隐藏二级菜单MenuAnimationUtils.startOutRotateAnimation(rlLevel2,startOffset);} else {// 显示二级菜单MenuAnimationUtils.startInRotateAnimation(rlLevel2, 0);}isDisplayLevel2 = !isDisplayLevel2;break;case R.id.ib_menu:// 二级菜单控制三级菜单的按钮if (isDisplayLevel3) {// 隐藏三级菜单MenuAnimationUtils.startOutRotateAnimation(rlLevel3, 0);} else {// 显示三级菜单MenuAnimationUtils.startInRotateAnimation(rlLevel3, 0);}isDisplayLevel3 = !isDisplayLevel3;break;default:break;}

非控制菜单按钮的点击事件。

private OnClickListener clickListener = new OnClickListener() {@Overridepublic void onClick(View v) {if (clickMenuListener == null) {return;}switch (v.getId()) {case R.id.ib_level2_1:clickMenuListener.click(v, LEVEL2_21);break;case R.id.ib_level2_3:clickMenuListener.click(v, LEVEL2_23);break;case R.id.ib_level3_1:clickMenuListener.click(v, LEVEL3_31);break;case R.id.ib_level3_2:clickMenuListener.click(v, LEVEL3_32);break;case R.id.ib_level3_3:clickMenuListener.click(v, LEVEL3_33);break;case R.id.ib_level3_4:clickMenuListener.click(v, LEVEL3_34);break;case R.id.ib_level3_5:clickMenuListener.click(v, LEVEL3_35);break;case R.id.ib_level3_6:clickMenuListener.click(v, LEVEL3_36);break;case R.id.ib_level3_7:clickMenuListener.click(v, LEVEL3_37);break;default:break;}MenuAnimationUtils.normalToBig(v);}};

布局文件:

<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" >    <RelativeLayout        android:id="@+id/rl_level1"        android:layout_width="100dip"        android:layout_height="50dip"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/icon_youku_level1" >        <ImageButton            android:id="@+id/ib_home"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:background="@drawable/icon_youku_home" />    </RelativeLayout>    <RelativeLayout        android:id="@+id/rl_level2"        android:layout_width="200dip"        android:layout_height="100dip"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/icon_youku_level2" >        <ImageButton            android:id="@+id/ib_level2_1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="5dip"            android:layout_marginLeft="10dip"            android:background="@drawable/icon_youku_search" />        <ImageButton            android:id="@+id/ib_menu"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:layout_marginTop="10dip"            android:background="@drawable/icon_youku_menu" />        <ImageButton            android:id="@+id/ib_level2_3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginBottom="5dip"            android:layout_marginRight="10dip"            android:background="@drawable/icon_youku_myyouku" />    </RelativeLayout>    <RelativeLayout        android:id="@+id/rl_level3"        android:layout_width="315dip"        android:layout_height="160dip"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/icon_youku_level3" >        <ImageButton            android:id="@+id/ib_level3_1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="10dip"            android:layout_marginLeft="15dip"            android:background="@drawable/icon_youku_channel1" />        <ImageButton            android:id="@+id/ib_level3_2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_above="@id/ib_level3_1"            android:layout_marginBottom="20dip"            android:layout_marginLeft="40dip"            android:background="@drawable/icon_youku_channel2" />        <ImageButton            android:id="@+id/ib_level3_3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_above="@id/ib_level3_2"            android:layout_marginBottom="10dip"            android:layout_marginLeft="10dip"            android:layout_toRightOf="@id/ib_level3_2"            android:background="@drawable/icon_youku_channel3" />        <ImageButton            android:id="@+id/ib_level3_4"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:layout_marginTop="10dip"            android:background="@drawable/icon_youku_channel4" />        <ImageButton            android:id="@+id/ib_level3_7"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginBottom="10dip"            android:layout_marginRight="15dip"            android:background="@drawable/icon_youku_channel5" />        <ImageButton            android:id="@+id/ib_level3_6"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_above="@id/ib_level3_7"            android:layout_alignParentRight="true"            android:layout_marginBottom="20dip"            android:layout_marginRight="40dip"            android:background="@drawable/icon_youku_channel6" />        <ImageButton            android:id="@+id/ib_level3_5"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_above="@id/ib_level3_6"            android:layout_marginBottom="10dip"            android:layout_marginRight="10dip"            android:layout_toLeftOf="@id/ib_level3_6"            android:background="@drawable/icon_youku_channel7" />    </RelativeLayout></RelativeLayout>

使用步骤:

activity_main1.xml

<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" >    <com.example.view.RotateMenuView        android:id="@+id/menu"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="bottom" >    </com.example.view.RotateMenuView>    <Button        android:id="@+id/bt_show"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentTop="true"        android:layout_centerHorizontal="true"        android:layout_marginTop="87dp"        android:background="@drawable/bt_pay_selector"        android:text="显示菜单"        android:textColor="@android:color/white" /></RelativeLayout>

MainActivity.java

public class MainActivity extends Activity {private RotateMenuView menu;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main1);menu = (RotateMenuView) findViewById(R.id.menu);final Button bt_show = (Button) findViewById(R.id.bt_show);bt_show.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {if (!menu.showMeun()) {bt_show.setText("显示菜单");} else {bt_show.setText("隐藏菜单");}}});menu.setClickMenuListener(new ClickMenuListener() {@Overridepublic void click(View view, int position) {switch (position) {case RotateMenuView.LEVEL2_21:showShortToast("搜索");break;case RotateMenuView.LEVEL2_23:showShortToast("关注");break;case RotateMenuView.LEVEL3_31:showShortToast("音乐");break;case RotateMenuView.LEVEL3_32:showShortToast("播放器");break;case RotateMenuView.LEVEL3_33:showShortToast("熊猫");break;case RotateMenuView.LEVEL3_34:showShortToast("排名");break;case RotateMenuView.LEVEL3_35:showShortToast("麦克风");break;case RotateMenuView.LEVEL3_36:showShortToast("视频");break;case RotateMenuView.LEVEL3_37:showShortToast("收音机");break;default:break;}}});}public void showShortToast(String message) {Toast.makeText(getApplicationContext(), message, 0).show();}}

源码下载:  http://download.csdn.net/detail/forwardyzk/8344663

效果图: