大讲-----原优酷菜单

大家好，今天和大家分享的是原优酷菜单，这是优酷客户端之前的版本，后来改良了，就把这菜单去掉了，我今天把它作为知识点讲解，其中的知识点还是值得我们去学习的，菜单的主要功能是点击一级菜单的home键，若二三级菜单是显示的状态的话，二三级菜单就会消失，若只显示二级菜单，点击也会使二级菜单消失，。在二级菜单中间键，若三级菜单显示，点击则会消失，它们有消失的功能，同样也有显示的功能，是在菜单栏不显示的情况下点击才有效果。



1.res/layout/activity_main.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" >

//一级菜单，背景是图片level3，相对布局

<RelativeLayout

android:id="@+id/rl3"

android:layout_width="110dp"

android:layout_height="50dp"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:background="@drawable/level1" >

//home键图片，居中显示

<ImageView

android:id="@+id/home_iv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:src="@drawable/icon_home" />

</RelativeLayout>

//二级菜单，菜单栏上含有三张图片

<RelativeLayout

android:id="@+id/rl1"

android:layout_width="200dp"

android:layout_height="90dp"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:background="@drawable/level2" >

<ImageView

android:id="@+id/menu_iv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_marginTop="5dp"

android:src="@drawable/icon_menu" />

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:layout_marginLeft="10dp"

android:paddingBottom="10dp"

android:src="@drawable/icon_search" />

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_alignParentRight="true"

android:layout_marginRight="10dp"

android:paddingBottom="10dp"

android:src="@drawable/icon_myyouku" />

</RelativeLayout>

//三级菜单，含有7张图片，均匀分布在菜单上，这里图片其实就是每一个点击事件

<RelativeLayout

android:id="@+id/rl2"

android:layout_width="310dp"

android:layout_height="143dp"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:background="@drawable/level3" >

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_marginTop="5dp"

android:src="@drawable/channel4" />

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:layout_marginLeft="10dp"

android:paddingBottom="10dp"

android:src="@drawable/channel1" />

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_alignParentRight="true"

android:layout_marginRight="10dp"

android:paddingBottom="10dp"

android:src="@drawable/channel5" />

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:layout_marginBottom="40dp"

android:layout_marginLeft="35dp"

android:paddingBottom="10dp"

android:src="@drawable/channel2" />

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_alignParentRight="true"

android:layout_marginBottom="40dp"

android:layout_marginRight="30dp"

android:paddingBottom="10dp"

android:src="@drawable/channel6" />

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:layout_marginBottom="80dp"

android:layout_marginLeft="77dp"

android:paddingBottom="10dp"

android:src="@drawable/channel3" />

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_alignParentRight="true"

android:layout_marginBottom="80dp"

android:layout_marginRight="77dp"

android:paddingBottom="10dp"

android:src="@drawable/channel7" />

</RelativeLayout>

</RelativeLayout>

2.工具类AminUtil.java

public class AminUtil {

//重载方法，调用下面的方法

public static void closeMenu(RelativeLayout layout) {

//关闭菜单方法，参数二：默认值

closeMenu(layout,0);

}

public static void openMenu(RelativeLayout layout) {

//打开菜单方法，参数二：默认值

openMenu(layout,0);

}

//关掉菜单

public static void closeMenu(RelativeLayout layout, long startOffset) {

//遍历，布局所有的子节点

for (int i = 0; i < layout.getChildCount(); i++) {

//设置子类不能点击

layout.getChildAt(i).setEnabled(false);

}

//旋转动画，相对自己，以（0.5,1）位原点旋转

RotateAnimation animation = new RotateAnimation(0, -180,

Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 1);

animation.setFillAfter(true);//设置不返回

//设置退出时间

animation.setStartOffset(startOffset);

animation.setDuration(500);

layout.startAnimation(animation);

}

//开启动画方法

public static void openMenu(RelativeLayout layout, long startOffset) {

for (int i = 0; i < layout.getChildCount(); i++) {

//找到每一个子类，设置可点击

layout.getChildAt(i).setEnabled(true);

}

RotateAnimation animation = new RotateAnimation(-180, 0,

Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 1);

animation.setFillAfter(true);// 设置不返回

animation.setDuration(500);

animation.setStartOffset(startOffset);

layout.startAnimation(animation);

}

}

3.MainActivity.java主代码

//MainActivity实现点击事件接口

public class MainActivity extends Activity implements OnClickListener {

@ViewInject(R.id.home_iv)

private ImageView homeIv;

@ViewInject(R.id.rl1)

private RelativeLayout rl1;

@ViewInject(R.id.menu_iv)

private ImageView menuIv;

@ViewInject(R.id.rl2)

private RelativeLayout rl2;

@ViewInject(R.id.rl3)

private RelativeLayout rl3;

//判断是否是隐藏还是显示，默认值为显示

private boolean isShowRl1 = true;

private boolean isShowRl2 = true;

//判断全部是否隐藏还是显示，默认值为显示

private boolean isShow = true;

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

// 注解

ViewUtils.inject(this);

context = this;

//初始化监听

initListener();

//初始化监听事件

private void initListener() {

homeIv.setOnClickListener(this);

menuIv.setOnClickListener(this);

}

//点击事件监听

public void onClick(View v) {

switch (v.getId()) {

//一级菜单home键的点击事件

case R.id.home_iv:

//判断一二级是否同时显示

if (isShowRl1) {

//若二级菜单显示，调用工具类方法，使其隐藏

if (isShowRl2) {

AminUtil.closeMenu(rl2);

//判断值改为false

isShowRl2 = false;

}

//改变旋转速度

AminUtil.closeMenu(rl1,-50);

isShowRl1 = false;

} else {

//若不是显示状态，将菜单栏显示

AminUtil.openMenu(rl1);

isShowRl1 = true;

}

break;

//二级菜单栏的判断

case R.id.menu_iv:

//若是显示状态，调用隐藏工具类方法

if (isShowRl2) {

// 隐藏图片,调用工具类方法

AminUtil.closeMenu(rl2);

isShowRl2 = false;

//若不是显示状态，调用显示工具类方法

} else {

// 显示图片

AminUtil.openMenu(rl2);

isShowRl2 = true;

}

break;

default:

break;

}

}

//物理键menu菜单键，不过现在的手机大部分没有这按键了

//使用OnKeyDown获取

@Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

if (keyCode == KeyEvent.KEYCODE_HOME) {

//判断是否全部显示，若是全部显示，则三个菜单都调用隐藏工具类方法

if (isShow) {

// 隐藏图片,调用工具类方法

AminUtil.closeMenu(rl2, 300);

AminUtil.closeMenu(rl1, 200);

AminUtil.closeMenu(rl3, 0);

isShow = false;

//若不是全部显示，则三个菜单调用显示工具类方法

} else {

// 打开图片,调用工具类方法

AminUtil.openMenu(rl2, 300);

AminUtil.closeMenu(rl1, 200);

AminUtil.closeMenu(rl3, 0);

isShow = true;

}

}

return super.onKeyDown(keyCode, event);

}

}

今晚的原优酷菜单就到了，难点可能就是布局比较难搞，纯手工劳动，没什么技巧性。祝大家有个美好夜晚。晚安。