自定义控件 防优酷菜单

自定义控件

1.组合控件：将系统原生控件组合起来，加上动画效果，形成一种特殊的UI效果

2.纯粹的自定义控件：继承自系统的view，自己实现view的效果

第一：xml文件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"><!--一级菜单-->    <RelativeLayout        android:id="@+id/rl_level1"        android:layout_width="100dp"        android:layout_height="50dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level1">        <ImageView            android:id="@+id/iv_home"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:background="@drawable/icon_home" />    </RelativeLayout><!--二级菜单-->    <RelativeLayout        android:id="@+id/rl_level2"        android:layout_width="180dp"        android:layout_height="90dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level2">        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="10dp"            android:layout_marginLeft="10dp"            android:background="@drawable/icon_search" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginBottom="10dp"            android:layout_marginRight="10dp"            android:background="@drawable/icon_myyouku" />        <ImageView            android:id="@+id/iv_menu"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:layout_marginTop="5dp"            android:background="@drawable/icon_menu" />    </RelativeLayout><!--三级菜单-->    <RelativeLayout        android:id="@+id/rl_level3"        android:layout_width="280dp"        android:layout_height="142dp"        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_alignParentBottom="true"            android:layout_marginBottom="15dp"            android:layout_marginLeft="12dp"            android:background="@drawable/channel1" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginBottom="15dp"            android:layout_marginRight="12dp"            android:background="@drawable/channel5" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="55dp"            android:layout_marginLeft="32dp"            android:background="@drawable/channel2" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginBottom="55dp"            android:layout_marginRight="32dp"            android:background="@drawable/channel6" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="85dp"            android:layout_marginLeft="62dp"            android:background="@drawable/channel3" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginBottom="85dp"            android:layout_marginRight="62dp"            android:background="@drawable/channel7" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:layout_marginTop="5dp"            android:background="@drawable/channel4" />    </RelativeLayout></RelativeLayout>

第二：动画工具类

package youkumenu.ncs.yeyy.youkumenu;import android.view.animation.Animation;import android.view.animation.Animation.AnimationListener;import android.view.animation.RotateAnimation;import android.widget.RelativeLayout;/** * 动画显示消失 * Created by yeyy on 2016/4/8. */public class AnimUtil {    public static int animCount = 0;//记录当前执行的动画数量//    消失动画    public static void closeMenu(RelativeLayout rl,int startOffset){//        getChildCount获得相对布局中子view 的数量，当处于隐藏状态时，点击事件禁用        for (int i = 0; i < rl.getChildCount(); i++) {            rl.getChildAt(i).setEnabled(false);//把那三个imageview设置不可点击        }        //pivotXValue: 0-1 消失动画        RotateAnimation animation=new RotateAnimation(0,-180,                RotateAnimation.RELATIVE_TO_SELF, 0.5f,                RotateAnimation.RELATIVE_TO_SELF, 1);        animation.setDuration(500);//设置时间        animation.setFillAfter(true);//动画结束后保持当时的状态        animation.setStartOffset(startOffset);//动画延迟        animation.setAnimationListener(new MyAnimationListener());        rl.startAnimation(animation);    }//    显示动画    public static void showMenu(RelativeLayout rl,int startOffset){//        当处于显示状态时，点击事件可用        for (int i = 0; i < rl.getChildCount(); i++) {            rl.getChildAt(i).setEnabled(true);        }        RotateAnimation animation=new RotateAnimation(-180,0,                RotateAnimation.RELATIVE_TO_SELF, 0.5f,                RotateAnimation.RELATIVE_TO_SELF, 1);        animation.setDuration(500);        animation.setFillAfter(true);//动画结束后保持当时的状态        animation.setStartOffset(startOffset);//动画延迟        animation.setAnimationListener(new MyAnimationListener());        rl.startAnimation(animation);    }    static class MyAnimationListener implements AnimationListener {        @Override        public void onAnimationStart(Animation animation) {            animCount++;        }        @Override        public void onAnimationEnd(Animation animation) {            animCount--;        }        @Override        public void onAnimationRepeat(Animation animation) {        }    }}

第三：mainActivity

package youkumenu.ncs.yeyy.youkumenu;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.KeyEvent;import android.view.View;import android.widget.ImageView;import android.widget.RelativeLayout;public class HomeActivity extends AppCompatActivity implements View.OnClickListener {    private boolean isShowLevel2 = true;//是否显示2级菜单    private boolean isShowLevel3 = true;//是否显示3级菜单    private boolean isShowMenu = true;//是否显示整个菜单，包含一二三    private ImageView ivHome;    private RelativeLayout level1;    private RelativeLayout level2;    private RelativeLayout level3;    private ImageView ivMenu;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);        initView();        initListener();    }    private void initView() {        ivHome = (ImageView) findViewById(R.id.iv_home);        ivMenu = (ImageView) findViewById(R.id.iv_menu);        level1 = (RelativeLayout) findViewById(R.id.rl_level1);        level2 = (RelativeLayout) findViewById(R.id.rl_level2);        level3 = (RelativeLayout) findViewById(R.id.rl_level3);    }    private void initListener() {        ivHome.setOnClickListener(this);        ivMenu.setOnClickListener(this);    }    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.iv_home:                if (AnimUtil.animCount!=0){                    return;                }                if (isShowLevel2) {//                    隐藏二级菜单                    int startOffset = 0;                    if (isShowLevel3) {                        AnimUtil.closeMenu(level3, startOffset);                        startOffset += 200;                        isShowLevel3 = false;                    }//                    isShowLevel2=false;                    AnimUtil.closeMenu(level2, startOffset);                } else {//                    显示三级菜单//                    isShowLevel2=true;                    AnimUtil.showMenu(level2,0);                }                isShowLevel2 = !isShowLevel2;                break;            case R.id.iv_menu:                if (AnimUtil.animCount!=0){                    return;                }                if (isShowLevel3) {//                    isShowLevel3=false;                    AnimUtil.closeMenu(level3, 0);                } else {//                    isShowLevel3=true;                    AnimUtil.showMenu(level3,0);                }                isShowLevel3 = !isShowLevel3;                break;            default:                break;        }    }//             if(keyCode==KeyEvent.KEYCODE_BACK)//返回键//             if(keyCode==KeyEvent.KEYCODE_ALT_LEFT)//调音键加//             if(keyCode==KeyEvent.KEYCODE_ALT_RIGHT)//调音键减//             if(keyCode==KeyEvent.KEYCODE_HOME)//主界面键//             if(keyCode==KeyEvent.KEYCODE_MENU)//菜单键    @Override    public boolean onKeyDown(int keyCode, KeyEvent event) {        if (keyCode ==KeyEvent.KEYCODE_MENU) {//判断按键键值做出相应操作            if (isShowMenu) {//                需要关闭所有菜单                int startOffset = 0;                if (isShowLevel3) {                    AnimUtil.closeMenu(level3, startOffset);                    isShowLevel3 = false;                    startOffset += 200;                }                if (isShowLevel2) {                    AnimUtil.closeMenu(level2, startOffset);                    isShowLevel2 = false;                    startOffset += 200;                }                AnimUtil.closeMenu(level1, startOffset);            } else {//                需要显示所有菜单                AnimUtil.showMenu(level1,0);                AnimUtil.showMenu(level2,200);                isShowLevel2=true;                AnimUtil.showMenu(level3,400);                isShowLevel3=true;            }            isShowMenu = !isShowMenu;            return true;        }        return super.onKeyDown(keyCode, event);//其他按键继承系统属性    }}

注意：系统原生的旋转和位置动画并没有真正改变view的位置，所以在点击隐藏三级菜单的时候，即使隐藏了，任然可以点击的，所以在动画工具类里面做了处理

//        getChildCount获得相对布局中子view 的数量，当处于隐藏状态时，点击事件禁用        for (int i = 0; i < rl.getChildCount(); i++) {            rl.getChildAt(i).setEnabled(false);//把那三个imageview设置不可点击        }

源码地址：http://download.csdn.net/detail/csdnyuandaimaxuexi/9489718