自定义控件-优酷环形菜单

优酷菜单是一个典型的组合控件，这里我们要进一步学习组合控件的使用。优酷菜单效果图如下：

 

图中由中间往外，分别是一级菜单、二级菜单、三级菜单。其基本用法是，点击一级菜单后加载二级菜单，再点击二级菜单加载三级菜单，再点击一级菜单分别隐藏三级、二级菜单。

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"
    tools:context=".MainActivity" >

    <RelativeLayout
        android:id="@+id/rl_level3"
        android:layout_width="280dp"
        android:layout_height="140dp"
        android:background="@drawable/level3"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        >
        <ImageView 
            android:id="@+id/iv_channel1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/channel1"
            android:layout_alignParentBottom="true"
            android:layout_margin="8dp"
            />
        <ImageView 
            android:id="@+id/iv_channel2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/channel2"
            android:layout_alignLeft="@id/iv_channel1"
            android:layout_above="@id/iv_channel1"
            android:layout_marginLeft="23dp"
            android:layout_marginBottom="8dp"
            />
        <ImageView 
            android:id="@+id/iv_channel3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/channel3"
            android:layout_alignLeft="@id/iv_channel2"
            android:layout_above="@id/iv_channel2"
            android:layout_marginLeft="33dp"
            android:layout_marginBottom="8dp"
            />
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/channel4"
            android:layout_centerHorizontal="true"
            android:layout_margin="8dp"
            />
        <ImageView 
            android:id="@+id/iv_channel7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/channel7"
            android:layout_alignParentBottom="true"
            android:layout_margin="8dp"
            android:layout_alignParentRight="true"
            />
        <ImageView 
            android:id="@+id/iv_channel6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/channel6"
            android:layout_alignRight="@id/iv_channel7"
            android:layout_above="@id/iv_channel7"
            android:layout_marginRight="23dp"
            android:layout_marginBottom="8dp"
            />
        <ImageView 
            android:id="@+id/iv_channel5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/channel5"
            android:layout_alignRight="@id/iv_channel6"
            android:layout_above="@id/iv_channel6"
            android:layout_marginRight="33dp"
            android:layout_marginBottom="8dp"
            />
    </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"
        >
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_search"
            android:layout_alignParentBottom="true"
            android:layout_margin="8dp"
            />
        <ImageView
            android:id="@+id/iv_icon_menu" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_menu"
            android:layout_centerHorizontal="true"
            android:layout_margin="8dp"
            />
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_myyouku"
            android:layout_margin="8dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            />
    </RelativeLayout>
    
    <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"
        >
        <ImageView 
            android:id="@+id/iv_icon_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_home"
            android:layout_centerInParent="true"
            />
    </RelativeLayout>

</RelativeLayout>

MainActivity.java

package com.yzx.youkuhuanxingcaidan;


import android.os.Bundle;
import android.app.Activity;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class MainActivity extends Activity implements OnClickListener{

    private RelativeLayout rl_level1;
    private RelativeLayout rl_level2;
    private RelativeLayout rl_level3;
    boolean isShowLevel1 = true;
    boolean isShowLevel2 = true;
    boolean isShowLevel3 = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }


    private void initView() {
        rl_level1 = (RelativeLayout) findViewById(R.id.rl_level1);
        rl_level2 = (RelativeLayout) findViewById(R.id.rl_level2);
        rl_level3 = (RelativeLayout) findViewById(R.id.rl_level3);
        
        ImageView iv_icon_menu = (ImageView) findViewById(R.id.iv_icon_menu);
        ImageView iv_icon_home = (ImageView) findViewById(R.id.iv_icon_home);
        
        iv_icon_menu.setOnClickListener(this);
        iv_icon_home.setOnClickListener(this);

    }


    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.iv_icon_menu:
            if(isShowLevel3){
                //菜单消失
                Tools.hideView(rl_level3);
            }
            else{
                //菜单出现
                Tools.showView(rl_level3);
            }
            isShowLevel3 = !isShowLevel3;
            break;
        case R.id.iv_icon_home:
            if(isShowLevel2){
                if(isShowLevel3){
                    Tools.hideView(rl_level3);
                    isShowLevel3 = false;
                    
                    Tools.hideView(rl_level2, 120);
                    
                    //控件gone了，但是它的空间没有被占用，所以可以被点击到
//                    rl_level2.setVisibility(View.GONE);
                    //把父节点设置为不可用，对子节点没有影响
//                    rl_level2.setEnabled(false);
                    
//                    for (int i = 0; i < rl_level2.getChildCount(); i++) {
//                        View view = rl_level2.getChildAt(i);
//                        view.setEnabled(false);
//                    }
                }
                else{
                    Tools.hideView(rl_level2);
                    
                }
            }
            else{
                Tools.showView(rl_level2);
            }
            isShowLevel2 = !isShowLevel2;
            break;

        }
        
    }
    
    //实体按键按下时调用
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        // 通过keyCode判断用户点击了哪个按钮
        if(keyCode == KeyEvent.KEYCODE_MENU){
            if(isShowLevel1){
                Tools.hideView(rl_level1);
                if(isShowLevel2){
                    Tools.hideView(rl_level2, 120);
                    isShowLevel2 = false;
                    if(isShowLevel3){
                        Tools.hideView(rl_level3, 240);
                        isShowLevel3 = false;
                    }
                }
                    
            }
            else{
                Tools.showView(rl_level1);
                Tools.showView(rl_level2, 120);
                isShowLevel2 = true;
            }
            isShowLevel1 = !isShowLevel1;
        }
        return super.onKeyDown(keyCode, event);
    }
    
}

Tools.java

package com.yzx.youkuhuanxingcaidan;

import android.view.View;
import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;

public class Tools {
    //代码的复用
    public static void hideView(RelativeLayout rl){
        hideView(rl, 0);
    }
    //代码的复用
    public static void showView(RelativeLayout rl){
        showView(rl, 0);
    }
    
    public static void hideView(RelativeLayout rl, long delay){
        RotateAnimation ra = new RotateAnimation(0, 180, rl.getWidth() / 2, rl.getHeight());
        ra.setDuration(500);
        ra.setFillAfter(true);
        //设置动画延时播放
        ra.setStartOffset(delay);
        rl.startAnimation(ra);
        
        //把rl的所有子节点设置为不可用
        for (int i = 0; i < rl.getChildCount(); i++) {
            View view = rl.getChildAt(i);
            view.setEnabled(false);
        }
    }
    
    public static void showView(RelativeLayout rl, long delay){
        RotateAnimation ra = new RotateAnimation(180, 0, rl.getWidth() / 2, rl.getHeight());
        ra.setDuration(500);
        ra.setStartOffset(delay);
        ra.setFillAfter(true);
        rl.startAnimation(ra);
        
        //把rl的所有子节点设置为可用
        for (int i = 0; i < rl.getChildCount(); i++) {
            View view = rl.getChildAt(i);
            view.setEnabled(true);
        }
    }
}

3键——控制大圆；

2键

退出：

——若大圆存在，中圆和大圆先后退出

——若大圆没有，则只有中圆退出

出现：

——只出现中圆

1键

退出：

——若大圆中圆小圆同时存在，小圆、中圆和大圆先后退出

——若大圆没有，中圆小圆存在，小圆和中圆先后退出

——只有小圆存在，则只有小圆退出

出现：

——先后出现小圆和中圆

 

转载于:https://www.cnblogs.com/crazyzx/articles/5526507.html