Android学习（36） -- 自定义控件（1）实现组合按钮的菜单和隐藏

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

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

使用组合实现菜单

布局代码：

<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/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/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/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>

实现二级菜单和三级菜单的显示和隐藏

public class MainActivity extends Activity implements OnClickListener {

	private String tag = MainActivity.class.getSimpleName();

	private ImageView iv_home, iv_menu;
	private RelativeLayout leve1, leve2, leve3;

	// 是否显示二级菜单
	private boolean isShowLeve2 = true;
	// 是否显示三级菜单
	private boolean isShowLeve3 = true;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		// 初始化View
		initView();

		// 初始监听
		initListenter();
	}

	// 用于初始化View
	private void initView() {
		setContentView(R.layout.activity_main);
		iv_home = (ImageView) findViewById(R.id.iv_home);
		iv_menu = (ImageView) findViewById(R.id.iv_menu);

		leve1 = (RelativeLayout) findViewById(R.id.level1);
		leve2 = (RelativeLayout) findViewById(R.id.level2);
		leve3 = (RelativeLayout) findViewById(R.id.level3);
	}

	// 初始监听
	private void initListenter() {
		iv_home.setOnClickListener(this);
		iv_menu.setOnClickListener(this);
	}

	@Override
	public void onClick(View v) {

		switch (v.getId()) {
		case R.id.iv_home:
			if (isShowLeve2) {
				// 需要隐藏
				// isShowLeve2 = false;
				// Log.e(tag, "执行隐藏");
				AnimUtil.closeMenu(leve2);
			} else {
				// 需要显示
				// isShowLeve2 = true;
				// Log.e(tag, "执行显示");
				AnimUtil.showMenu(leve2);
			}

			isShowLeve2 = !isShowLeve2;
			break;
		case R.id.iv_menu:
			if (isShowLeve3) {
				//关闭三级菜单
				AnimUtil.closeMenu(leve3);
			}else {
				//显示三级菜单
				AnimUtil.showMenu(leve3);
			}
			isShowLeve3 = !isShowLeve3;
			break;
		default:
			break;
		}
	}
}

 

AnimUtil工具类

隐藏是从0到-18 

显示是从-180 到0

public class AnimUtil {

	/**
	 * 关闭按钮
	 * @param rl
	 */
	public static void closeMenu(RelativeLayout rl  ) {
		// 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);// 动画结束后保持当时的状态
		rl.startAnimation(animation);
	}
	
	
	/**
	 * 显示按钮
	 * @param rl
	 */
	public static void showMenu(RelativeLayout rl ) {

		RotateAnimation animation = new RotateAnimation(-180, 0,
				RotateAnimation.RELATIVE_TO_SELF, 0.5f,
				RotateAnimation.RELATIVE_TO_SELF, 1);
		animation.setDuration(500);
		animation.setFillAfter(true);// 动画结束后保持当时的状态
		rl.startAnimation(animation);
	}
}