Android优酷菜单组件自定义

Android优酷菜单组件自定义

主要做的就是模仿优酷手机客户端的底部菜单控件的实现。先来几张图片，点击中间的home，显示二级菜单，点击二级菜单的menu，显示菜单。

这是实现起来最简单的一个布局，但是从中学会了自定义动画和一些布局的基本知识，从中还是收获很大的。

首先是定义布局文件，三个菜单条其实就是三个relativelayout，level1，level2，level，然后每个菜单条中的小标题就加到对应的相对布局中。

<RelativeLayout xmlns:android=xmlns:tools=android:layout_width=match_parentandroid:layout_height=match_parenttools:context=youku.MainActivity$PlaceholderFragment ><TextViewandroid:layout_width=wrap_contentandroid:layout_height=wrap_contentandroid:text=@string/hello_world /><RelativeLayout android:id=@id/level1android:layout_width=100dpandroid:layout_height=50dpandroid:layout_alignParentBottom=trueandroid:layout_centerHorizontal=trueandroid:background=@drawable/level1><ImageView android:id=@id/icon_homeandroid:layout_width=wrap_contentandroid:layout_height=wrap_contentandroid:layout_alignParentBottom=trueandroid:layout_centerHorizontal=trueandroid:background=@drawable/icon_home/></RelativeLayout><RelativeLayout android:id=@id/level2android:layout_width=180dpandroid:layout_height=90dpandroid:layout_alignParentBottom=trueandroid:layout_centerHorizontal=trueandroid:background=@drawable/level2><ImageView android:id=@id/icon_searchandroid:layout_width=wrap_contentandroid:layout_height=wrap_contentandroid:layout_alignParentBottom=trueandroid:layout_margin=10dpandroid:background=@drawable/icon_search/><ImageView android:id=@id/icon_menuandroid:layout_width=wrap_contentandroid:layout_height=wrap_contentandroid:layout_centerHorizontal=trueandroid:background=@drawable/icon_menu/><ImageView android:id=@id/icon_myyoukuandroid:layout_width=wrap_contentandroid:layout_height=wrap_contentandroid:layout_alignParentBottom=trueandroid:layout_margin=10dpandroid:layout_alignParentRight=trueandroid:background=@drawable/icon_myyouku/></RelativeLayout><RelativeLayout android:id=@id/levelandroid:layout_width=280dpandroid:layout_height=145dpandroid:layout_alignParentBottom=trueandroid:layout_centerHorizontal=trueandroid:background=@drawable/level><ImageView android:id=@id/channel1android:layout_width=wrap_contentandroid:layout_height=wrap_contentandroid:layout_alignParentBottom=trueandroid:layout_marginLeft=10dpandroid:layout_marginBottom=10dpandroid:background=@drawable/channel1/><ImageViewandroid:id=@id/channel2android:layout_width=wrap_contentandroid:layout_height=wrap_contentandroid:layout_centerVertical=trueandroid:layout_above=@id/channel1android:layout_alignLeft=@id/channel1android:layout_marginBottom=6dpandroid:layout_marginLeft=20dpandroid:background=@drawable/channel2 /><ImageViewandroid:id=@id/channelandroid:layout_width=wrap_contentandroid:layout_height=wrap_contentandroid:layout_above=@id/channel2android:layout_alignLeft=@id/channel2android:layout_marginBottom=6dpandroid:layout_marginLeft=0dpandroid:background=@drawable/channel /><ImageViewandroid:id=@id/channel4android:layout_width=wrap_contentandroid:layout_height=wrap_contentandroid:layout_centerHorizontal=trueandroid:layout_marginTop=5dpandroid:background=@drawable/channel4 /><ImageView android:id=@id/channel7android:layout_width=wrap_contentandroid:layout_height=wrap_contentandroid:background=@drawable/channel7android:layout_alignParentBottom=trueandroid:layout_alignParentRight=trueandroid:layout_marginBottom=10dpandroid:layout_marginRight=10dp/><ImageViewandroid:id=@id/channel6android:layout_width=wrap_contentandroid:layout_height=wrap_contentandroid:layout_above=@id/channel7android:layout_alignRight=@id/channel7android:layout_marginBottom=6dpandroid:layout_marginRight=20dpandroid:background=@drawable/channel6 /><ImageViewandroid:id=@id/channel5android:layout_width=wrap_contentandroid:layout_height=wrap_contentandroid:layout_above=@id/channel6android:layout_alignRight=@id/channel6android:layout_marginBottom=6dpandroid:layout_marginRight=0dpandroid:background=@drawable/channel5 /></RelativeLayout></RelativeLayout>

因为是旋转进入，所有 要定义一个RotateAnimation，并进行配置：

import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;public class MyUtils {/*** 让指定的view 执行 旋转离开的动画* @param view*/public static void startAnimOut(RelativeLayout view) {startAnimOut(view, 0);}/*** 让指定view 延时 执行旋转离开的动画，* @param level* @param offset	延时的时间*/public static void startAnimOut(RelativeLayout view, long offset) {/** 默认圆为 为view的左上角，* 水平向右 为 0度* 顺时针旋转度数增加*/RotateAnimation animation  =new RotateAnimation(0, 180, view.getWidth()/2, view.getHeight());animation.setDuration(500);	//	设置运行的时间animation.setFillAfter(true);	//动画执行完以后，保持最后的状态animation.setStartOffset(offset);	// 设置延时执行的时间view.startAnimation(animation);}/*** 让指定的view 执行 旋转进入的动画* @param view*/public static void startAnimIn(RelativeLayout view) {startAnimIn(view, 0);}/*** 让指定的view 延时执行 旋转进入的动画* @param level2* @param i	延时的时间*/public static void startAnimIn(RelativeLayout view, int i) {/** 默认圆为 为view的左上角，* 水平向右 为 0度* 顺时针旋转度数增加*/RotateAnimation animation  =new RotateAnimation(180, 60, view.getWidth()/2, view.getHeight());animation.setDuration(500);	//	设置运行的时间animation.setFillAfter(true);	//动画执行完以后，保持最后的状态animation.setStartOffset(i);	//设置延时执行的时间view.startAnimation(animation);}}

public class MainActivity extends Activity implements OnClickListener {private ImageView icon_menu;private ImageView icon_home;private RelativeLayout level1;private RelativeLayout level2;private RelativeLayout level;/*** 判断 第级菜单是否显示* true 为显示*/private boolean isLevelShow = true;/*** 判断 第2级菜单是否显示* true 为显示*/private boolean isLevel2Show = true;/*** 判断 第1级菜单是否显示* true 为显示*/private boolean isLevel1show = true;@Overrideprotected void onCreate(Bundle savedInstanceState) {(savedInstanceState);setContentView(R.layout.activity_main);icon_home = (ImageView) findViewById(R.id.icon_home);icon_menu = (ImageView) findViewById(R.id.icon_menu);level1 = (RelativeLayout) findViewById(R.id.level1);level2 = (RelativeLayout) findViewById(R.id.level2);level = (RelativeLayout) findViewById(R.id.level);icon_home.setOnClickListener(this);icon_menu.setOnClickListener(this);}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.icon_menu:	//处理 menu 图标的点击事件// 如果第级菜单是显示状态，那么将其隐藏if(isLevelShow){//隐藏 第级菜单MyUtils.startAnimOut(level);}else{// 如果第级菜单是隐藏状态，那么将其显示MyUtils.startAnimIn(level);}isLevelShow = !isLevelShow;break;case R.id.icon_home:	//处理 home 图标 的点击事件// 如果第2级菜单是显示状态，那么就隐藏，2，级菜单if(isLevel2Show ){MyUtils.startAnimOut(level2);isLevel2Show = false;if(isLevelShow){ // 如果此时，第级菜单也显示，那也将其隐藏MyUtils.startAnimOut(level,200);isLevelShow = false;}}else{// 如果第2级菜单是隐藏状态，那么就显示2级菜单MyUtils.startAnimIn(level2);isLevel2Show = true;}break;}}/*** 改变第1级菜单的状态*/private void changeLevel1State() {//如果第1级菜单是显示状态，那么就隐藏 1，2，级菜单 if(isLevel1show){MyUtils.startAnimOut(level1);isLevel1show = false;if(isLevel2Show){ // 判断2级菜单是否显示MyUtils.startAnimOut(level2,100);isLevel2Show = false;if(isLevelShow){ // 判断级菜单是否显示MyUtils.startAnimOut(level,200);isLevelShow = false;}}}else{//如果第1级菜单是隐藏状态，那么就显示 1，2级菜单 MyUtils.startAnimIn(level1);isLevel1show = true;MyUtils.startAnimIn(level2,200);isLevel2Show = true;}}@Override/*** 响应按键的动作*/public boolean onKeyDown(int keyCode, KeyEvent event) {if(keyCode == KeyEvent.KEYCODE_MEU){ // 监听 menu 按键changeLevel1State();}return (keyCode, event);}}

最后最后，感觉自定义组件还是很强大很炫的，明天继续学习总结这方面的知识。。睡觉。。