自定义优酷菜单页面

     看到一个视频实现了老优酷APP的菜单页面，感觉效果比较炫酷，于是决定写篇文章记录下来，方便以后查阅。先看一下效果图：

先说一下实现的大致步骤吧：

1、在xml中将各个组件位置摆放好。

2、给指定的控件添加点击事件。

3、根据业务逻辑、执行动画（补间动画、旋转动画）。

4、返回按钮的截获。

大致就这几个步骤了，下面附上源码activity_main.xml：

主页面MainActivity

package com.hz.youkumenu;import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.widget.ImageButton;
import android.widget.RelativeLayout;import com.hz.youkumenu.utils.AnimationUtils;public class MainActivity extends Activity implements View.OnClickListener{private ImageButton ibHome;private ImageButton ibMenu;private RelativeLayout rlLevel1;private RelativeLayout rlLevel2;private RelativeLayout rlLevel3;boolean isLevel1Display = true;boolean isLevel2Display = true;boolean isLevel3Display = true;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);/*初始化控件*/initUI();}private void initUI() {ibMenu = (ImageButton) findViewById(R.id.ib_menu);ibHome = (ImageButton) findViewById(R.id.ib_home);ibMenu.setOnClickListener(this);ibHome.setOnClickListener(this);rlLevel1 = (RelativeLayout) findViewById(R.id.rl_level1);rlLevel2 = (RelativeLayout) findViewById(R.id.rl_level2);rlLevel3 = (RelativeLayout) findViewById(R.id.rl_level3);}@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {// keyCode 事件码if (keyCode == KeyEvent.KEYCODE_BACK){if(AnimationUtils.runningAnimationCount > 0){// 当前有动画正在执行, 取消当前事件return true;}//如果按下的是菜单按钮if(isLevel1Display){long delay=0;// 隐藏三级菜单if (isLevel3Display){AnimationUtils.rotateOutAnim(rlLevel3,0);isLevel3Display=false;delay+=300;}// 隐藏二级菜单if (isLevel2Display){AnimationUtils.rotateOutAnim(rlLevel2,delay);isLevel2Display=false;delay+=300;}// 隐藏一级菜单AnimationUtils.rotateOutAnim(rlLevel1,delay);}else {// 顺次转进来AnimationUtils.rotateInAnim(rlLevel1, 0);AnimationUtils.rotateInAnim(rlLevel2, 300);AnimationUtils.rotateInAnim(rlLevel3, 600);isLevel3Display = true;isLevel2Display = true;}isLevel1Display=!isLevel1Display;return true;// 消费了当前事件}return super.onKeyDown(keyCode,event);}@Overridepublic void onClick(View v) {if (AnimationUtils.runningAnimationCount>0){// 当前有动画正在执行, 取消当前事件return;}switch (v.getId()){case R.id.ib_home:if (isLevel2Display){long delay=0;// 如果当前三级菜单已经显示, 先转出去if (isLevel3Display){// 如果当前三级菜单已经显示, 转出去AnimationUtils.rotateOutAnim(rlLevel3,0);isLevel3Display = false;delay+=300;}// 如果当前三级菜单已经显示, 转出去AnimationUtils.rotateOutAnim(rlLevel2,delay);}else {// 如果当前三级菜单没有显示, 转出来AnimationUtils.rotateInAnim(rlLevel2,0);}// 置反isLevel2Display = !isLevel2Display;break;case R.id.ib_menu:if (isLevel3Display){// 如果当前三级菜单已经显示, 转出去AnimationUtils.rotateOutAnim(rlLevel3,0);}else {// 如果当前三级菜单没有显示, 转出来AnimationUtils.rotateInAnim(rlLevel3,0);}// 置反isLevel3Display = !isLevel3Display;break;default:break;}}
}

动画的工具类 AnimationUtils

package com.hz.youkumenu.utils;import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;/*** 旋转动画工具类* Created by Administrator on 2019/3/7.*/public class AnimationUtils {// 正在运行的动画个数public static int runningAnimationCount = 0;/*** 旋转出去的动画* @param relativeLayout    需要动画的view* @param delay 动画的延迟时间*/public static  void rotateOutAnim(RelativeLayout relativeLayout, long delay){int childCount = relativeLayout.getChildCount();// 如果隐藏. 则找到所有的子View, 禁用for (int i = 0; i < childCount; i++) {relativeLayout.getChildAt(i).setEnabled(false);}RotateAnimation rotateAnimation=new RotateAnimation(0f, -180f, // 开始, 结束的角度, 逆时针Animation.RELATIVE_TO_SELF, 0.5f,  // 相对的x坐标点(指定旋转中心x值)Animation.RELATIVE_TO_SELF, 1.0f); // 相对的y坐标点(指定旋转中心y值)rotateAnimation.setDuration(300);rotateAnimation.setFillAfter(true); // 设置动画停留在结束位置rotateAnimation.setStartOffset(delay); // 设置动画开始延时rotateAnimation.setAnimationListener(new MyAnimationListener()); // 添加监听relativeLayout.startAnimation(rotateAnimation);}/*** 旋转进来的动画* @param relativeLayout    需要动画的view* @param delay 动画的延迟时间*/public static void rotateInAnim(RelativeLayout relativeLayout, long delay){int childCount = relativeLayout.getChildCount();// 如果隐藏. 则找到所有的子View, 启用for (int i = 0; i < childCount; i++) {relativeLayout.getChildAt(i).setEnabled(true);}RotateAnimation rotateAnimation=new RotateAnimation(-180f, 0f, // 开始, 结束的角度, 顺时针Animation.RELATIVE_TO_SELF, 0.5f,  // 相对的x坐标点(指定旋转中心x值)Animation.RELATIVE_TO_SELF, 1.0f); // 相对的y坐标点(指定旋转中心y值)rotateAnimation.setDuration(300);rotateAnimation.setFillAfter(true); // 设置动画停留在结束位置rotateAnimation.setStartOffset(delay); // 设置动画开始延时rotateAnimation.setAnimationListener(new MyAnimationListener()); // 添加监听relativeLayout.startAnimation(rotateAnimation);}/*** 动画监听类*/static class MyAnimationListener implements Animation.AnimationListener {@Overridepublic void onAnimationStart(Animation animation) {runningAnimationCount++;}@Overridepublic void onAnimationEnd(Animation animation) {runningAnimationCount--;}@Overridepublic void onAnimationRepeat(Animation animation) {}}
}

大致就这样了，具体的图片自行替换。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！