组合控件的基本使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ye1714505125/article/details/50960222

1、此篇文章不适合大家阅读，只是自己做的摘记

2、组合控件：将系统原生态的控件组合效果，加上动画效果，形成特殊UI效果

3、此次代码主要实现优酷菜单

注意点：

   1、逻辑一定要准确，if   else 一般同时出现，并做好备注，以及条件转化；

   2、系统原生的动画旋转和位置动画并没有真正改变View的位置，所以在旋转过程中，我们必须做进一步处理，旋转时，将内部组件设置不可点击

   3、一步一步慢慢写，并修改bug ，更多的了解Animation ；

界面布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main" tools:context=".MainActivity">
<RelativeLayout
    android:layout_width="100dp"
    android:layout_height="50dp"
    android:id="@+id/level1"
    android:background="@drawable/level1"
    android:layout_centerHorizontal="true"
    android:layout_alignParentBottom="true"
    >
    <ImageView
        android:id="@+id/iv_home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon_home"
        android:layout_centerInParent="true"/>
</RelativeLayout>
    <RelativeLayout
        android:layout_width="173dp"
        android:layout_height="85dp"
        android:background="@drawable/level2"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:id="@+id/level2"
        >
        <ImageView
            android:layout_width="38dp"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_search"
            android:layout_marginLeft="5dp"
            android:layout_alignParentBottom="true" />
        <ImageView
            android:layout_width="38dp"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_myyouku"
            android:layout_marginLeft="5dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"/>
        <ImageView
            android:id="@+id/iv_menu"
            android:layout_width="38dp"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_menu"
            android:layout_centerHorizontal="true"/>
    </RelativeLayout>
    <RelativeLayout
        android:id="@+id/level3"
        android:layout_width="258dp"
        android:layout_height="129dp"
        android:background="@drawable/level3"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        >
        <ImageView
            android:layout_width="38dp"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:src="@drawable/channel1"
            android:layout_marginLeft="5dp"
           />
        <ImageView
            android:layout_width="38dp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:src="@drawable/channel2"
            android:layout_marginLeft="2dp"
            />
        <ImageView
            android:layout_width="38dp"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"

            android:layout_marginBottom="40dp"
            android:src="@drawable/channel3"
            android:layout_marginLeft="25dp"
            android:id="@+id/imageView2" />
        <ImageView
            android:layout_width="38dp"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="40dp"
            android:src="@drawable/channel4"
            android:layout_marginRight="20dp"
            />
        <ImageView
            android:layout_width="38dp"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="70dp"
            android:src="@drawable/channel5"
            android:layout_marginRight="60dp"
            android:id="@+id/imageView" />
        <ImageView
            android:layout_width="38dp"
            android:layout_height="wrap_content"
            android:src="@drawable/channel6"
            android:layout_alignTop="@+id/imageView"
            android:layout_toEndOf="@+id/imageView2" />
        <ImageView
            android:layout_width="38dp"
            android:layout_height="wrap_content"
            android:src="@drawable/channel7"
           android:layout_centerHorizontal="true"/>
    </RelativeLayout>
</RelativeLayout>

主代码：

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    ImageView imageViewHome,imageViewMenu;
    boolean isShow2=true;//是否显示二级菜单
    boolean isShow3=true;//是否显示三级菜单
    boolean isShowMenu=true;//显示主菜单变化，包括一级二级三级菜单,如果有一样在，全显示，如果都不在，则都显示
    RelativeLayout level2,level1,level3;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //执行控制键初始化，和界面初始化操作
        initView();
        //如果，界面较多组件，执行监听操作，更为方便
        initListner();
    }
    public void initView(){
        setContentView(R.layout.activity_main);
        imageViewHome= (ImageView) findViewById(R.id.iv_home);
        imageViewMenu= (ImageView) findViewById(R.id.iv_menu);
        level2= (RelativeLayout) findViewById(R.id.level2);
        level1= (RelativeLayout) findViewById(R.id.level1);
        level3= (RelativeLayout) findViewById(R.id.level3);
    }
    public void initListner() {
        imageViewHome.setOnClickListener(this);
        imageViewMenu.setOnClickListener(this);
    }
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {

        if(keyCode==KeyEvent.KEYCODE_MENU){
            //编程的时候一定要注意逻辑，一个判断值，代表一种状态，一旦状态改变，则判断值必须改变
            //编码养成习惯，一开一闭，同时将状态值设为改变，以便怕忘记，还有逻辑结构
            if(AnimationUtil.animationCount!=0){
                //如果动画在执行的半途中，则不执行
                return true;
            }else{

                if (isShowMenu){
                    //只要有在前台界面的组件全部隐藏
                    if (isShow3){
                        AnimationUtil.closeMenu(level3,530);
                        isShow3=false;
                    }
                    if (isShow2){
                        AnimationUtil.closeMenu(level2,500);
                        isShow2=false;
                    }
                    AnimationUtil.closeMenu(level1,480);
                }else{
                    //反之，全部显示
                    AnimationUtil.openMenu(level3,530);
                    isShow2=true;
                    isShow3=true;
                    AnimationUtil.openMenu(level2,500);
                    AnimationUtil.openMenu(level1,480);
                }
                isShowMenu=!isShowMenu;
                //返回后，也就是说Menu键，点击被改变
                return true;
            }
            }
        return super.onKeyDown(keyCode,event);
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.iv_home:
                if(AnimationUtil.animationCount!=0){
                    //说明还有动画未执行完，不执行
                    return;
                }
                if(isShow2){
                    if(isShow3){
                        AnimationUtil.closeMenu(level3,530);
                        isShow3=false;
                    }
                    //消失二级菜单 ，Log.e("tag","11");
                    AnimationUtil.closeMenu(level2,500);
                }else{
                    //显示二级菜单// Log.e("tag","12");
                    AnimationUtil.openMenu(level2,500);
                }
                isShow2=!isShow2;
                break;
            case R.id.iv_menu:
                if(AnimationUtil.animationCount!=0){
                    //说明还有动画未执行完
                    return;
                }
                if(isShow3){
                    //关闭三级菜单栏
                    AnimationUtil.closeMenu(level3,500);
                }else{
                    //显示三级菜单栏
                    AnimationUtil.openMenu(level3,500);
                }
                isShow3=!isShow3;
                break;
            default:
                break;
        }
    }
}

动画隐藏和出现代码：

public class AnimationUtil {
    public  static int animationCount=0;  //记录一个动画是否完成
    public static void closeMenu(RelativeLayout relativeLayout,int duration){
        //移动菜单时，执行子控件无法点击（常识）
        for (int i=0;i<relativeLayout.getChildCount();i++){
            relativeLayout.getChildAt(i).setEnabled(false);
        }
        //创建旋转动画对象，相对自身的中心点旋转
        RotateAnimation rotateAnimation=new RotateAnimation(0,-180, RELATIVE_TO_SELF,0.5f, RELATIVE_TO_SELF,1);
        //设置延迟时间，更好的展示旋转效果
        rotateAnimation.setDuration(duration);
        relativeLayout.startAnimation(rotateAnimation);
        //动画结束后，保持结束的状态
         rotateAnimation.setFillAfter(true);
        //创建动画监听器，此代码旨在记录动画是否完成
         rotateAnimation.setAnimationListener(new MyAnimationListener());
    }

    public static void openMenu(RelativeLayout relativeLayout,int duration){
        //保证在控件重新显示出来的时候，又可以被点击（常识）
        for (int i=0;i<relativeLayout.getChildCount();i++){
            relativeLayout.getChildAt(i).setEnabled(true);
        }
        RotateAnimation rotateAnimation=new RotateAnimation(-180,0, RELATIVE_TO_SELF,0.5f, RELATIVE_TO_SELF,1);
        rotateAnimation.setDuration(duration);
        relativeLayout.startAnimation(rotateAnimation);
        rotateAnimation.setAnimationListener(new MyAnimationListener());
        //动画结束后，保持当时的状态
        rotateAnimation.setFillAfter(true);
    }
    static class MyAnimationListener implements Animation.AnimationListener{
        @Override
        public void onAnimationStart(Animation animation) {
            animationCount++;
        }
        @Override
        public void onAnimationEnd(Animation animation) {
            animationCount--;
        }
        @Override
        public void onAnimationRepeat(Animation animation) {
        }
    }
}