版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/tiger_gy/article/details/88311189
自定义优酷菜单页面
看到一个视频实现了老优酷APP的菜单页面，感觉效果比较炫酷，于是决定写篇文章记录下来，方便以后查阅。先看一下效果图：
先说一下实现的大致步骤吧：
1、在xml中将各个组件位置摆放好。
2、给指定的控件添加点击事件。
3、根据业务逻辑、执行动画（补间动画、旋转动画）。
4、返回按钮的截获。
大致就这几个步骤了，下面附上源码activity_main.xml：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.hz.youkumenu.MainActivity">
<RelativeLayout
android:id="@+id/rl_level1"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="@drawable/level1"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true">
<ImageButton
android:id="@+id/ib_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@null"
android:src="@drawable/icon_home"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/rl_level2"
android:layout_width="180dp"
android:layout_height="90dp"
android:background="@drawable/level2"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true">
<ImageButton
android:id="@+id/ib_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="@null"
android:layout_marginTop="5dp"
android:src="@drawable/icon_menu"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:layout_marginBottom="5dp"
android:background="@null"
android:src="@drawable/icon_search" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:layout_marginBottom="5dp"
android:background="@null"
android:src="@drawable/icon_myyouku" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/rl_level3"
android:layout_width="280dp"
android:layout_height="140dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/level3" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:layout_marginBottom="5dp"
android:background="@null"
android:src="@drawable/channel1" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="60dp"
android:background="@null"
android:src="@drawable/channel2" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="65dp"
android:layout_marginTop="25dp"
android:background="@null"
android:src="@drawable/channel3" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="@null"
android:layout_marginTop="5dp"
android:src="@drawable/channel4" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="@null"
android:layout_marginRight="30dp"
android:layout_marginTop="60dp"
android:src="@drawable/channel5" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="65dp"
android:layout_marginTop="25dp"
android:layout_alignParentRight="true"
android:background="@null"
android:src="@drawable/channel6" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:layout_marginBottom="5dp"
android:background="@null"
android:src="@drawable/channel7" />
</RelativeLayout>
</RelativeLayout>
主页面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;
@Override
protected 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);
}
@Override
public 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);
}
@Override
public 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 {
@Override
public void onAnimationStart(Animation animation) {
runningAnimationCount++;
}
@Override
public void onAnimationEnd(Animation animation) {
runningAnimationCount--;
}
@Override
public void onAnimationRepeat(Animation animation) {
}
}
}
大致就这样了，具体的图片自行替换。