Android使用系统控件组合成新的自定义控件

本文是android学习笔记，由博主总结整理。

一. 通过对系统提供的控件进行组合，不用写新的类不用继承系统的控件也能实现自定义控件的效果。下面是一个简单的例子（效果图的2、3级菜单应该是旋转进入和退出，这里动图没有显示出来）：

二. 要实现这个效果，首先理一下思路步骤：

 1 . 在布局文件画出这三级菜单，在菜单里加上相应的imageview。

 2 .在代码里找到相应布局，通过imageview的点击事件实现二三级菜单的显示隐藏。

 3 .给二三级菜单显示隐藏的时候加上进入和退出动画。

三 .下面是具体步骤实现

1.主要是三个相对布局以及其包含的imageview的位置摆放，下面是布局组成树和代码。

<?xml version="1.0" encoding="utf-8"?>
<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" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="finch.scu.cn.newview.MainActivity">

    <RelativeLayout  android:id="@+id/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/icon_home" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/icon_home" android:layout_centerInParent="true" />
    </RelativeLayout>
    <RelativeLayout  android:id="@+id/level2" android:layout_width="180dp" android:layout_height="90dp" android:background="@drawable/level2" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true">

        <ImageView  android:id="@+id/icon_search" android:layout_width="40dp" android:layout_height="40dp" android:background="@drawable/icon_search" android:layout_alignParentBottom="true" android:layout_marginLeft="3dp" />
        <ImageView  android:id="@+id/icon_menu" android:layout_width="40dp" android:layout_height="40dp" android:background="@drawable/icon_menu" android:layout_centerHorizontal="true" />
        <ImageView  android:id="@+id/icon_myyouku" android:layout_width="40dp" android:layout_height="40dp" android:background="@drawable/icon_myyouku" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginRight="3dp" />
    </RelativeLayout>
    <RelativeLayout  android:id="@+id/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/channel1" android:layout_width="35dp" android:layout_height="35dp" android:background="@drawable/channel1" android:layout_alignParentBottom="true" android:layout_marginLeft="10dp" android:layout_marginBottom="10dp" />
        <ImageView  android:id="@+id/channel2" android:layout_width="35dp" android:layout_height="35dp" android:background="@drawable/channel2" android:layout_above="@id/channel1" android:layout_alignLeft="@id/channel1" android:layout_marginLeft="20dp" />
        <ImageView  android:id="@+id/channel3" android:layout_width="35dp" android:layout_height="35dp" android:background="@drawable/channel3" android:layout_above="@id/channel2" android:layout_alignLeft="@id/channel2" android:layout_marginLeft="35dp" />
        <ImageView  android:id="@+id/channel4" android:layout_width="35dp" android:layout_height="35dp" android:background="@drawable/channel4" android:layout_centerHorizontal="true" android:layout_marginTop="5dp" />
        <ImageView  android:id="@+id/channel7" android:layout_width="35dp" android:layout_height="35dp" android:background="@drawable/channel7" android:layout_alignParentBottom="true" android:layout_marginBottom="10dp" android:layout_alignParentRight="true" android:layout_marginRight="10dp" />
        <ImageView  android:id="@+id/channel6" android:layout_width="35dp" android:layout_height="35dp" android:background="@drawable/channel6" android:layout_above="@id/channel7" android:layout_alignRight="@id/channel7" android:layout_marginRight="20dp" />
        <ImageView  android:id="@+id/channel5" android:layout_width="35dp" android:layout_height="35dp" android:background="@drawable/channel5" android:layout_above="@id/channel6" android:layout_alignRight="@id/channel6" android:layout_marginRight="35dp" />
    </RelativeLayout>
</RelativeLayout>

1. 在onCreate()中找到三级菜单的布局 和 两个imageview实现其点击事件。

package finch.scu.cn.newview;

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

public class MainActivity extends Activity implements View.OnClickListener{
    private ImageView icon_home;
    private ImageView icon_menu;
    private RelativeLayout level1;//三级菜单
    private RelativeLayout level2;
    private RelativeLayout level3;
    private boolean isLevel2Show;//菜单二显示状态
    private boolean isLevel3Show;//菜单三显示状态
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        /*初始布局*/
        InitUi();
    }

    private void InitUi() {
        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);
        level3 = (RelativeLayout)findViewById(R.id.level3);

        // 设置监听事件
        icon_home.setOnClickListener(this);
        icon_menu.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
     switch (v.getId()){

         case R.id.icon_home://处理home的点击事件，实现二级菜单的显示隐藏切换
                if(isLevel2Show){
                    myUtils.startAnimOut(level2);
                    if(isLevel3Show){
                        myUtils.startAnimOutOffset(level3,200);
                        isLevel3Show = false;
                    }
                }else{
                    myUtils.startAnimInt(level2);
                }
             isLevel2Show = !isLevel2Show;//状态切换
            break;

         case R.id.icon_menu://处理menu的点击事件，实现三级菜单的显示隐藏切换
                 if(isLevel3Show){
                     myUtils.startAnimOut(level3);
                 }else{
                     myUtils.startAnimInt(level3);
                 }
             isLevel3Show = !isLevel3Show;//状态切换
             break;
         default:
             break;
     }
    }
}

3.新建一个myUtils的类，实现进入退出动画。

package finch.scu.cn.newview;

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

/** * Created by finch on 2015-12-7. */
public class myUtils {

    public static void startAnimOut(RelativeLayout view) {

        startAnimOutOffset(view,0);
    }

    public static void startAnimInt(RelativeLayout view) {
        /* 默认圆心为view的左上边，自定义圆心时以默认圆心位置为坐标轴零点，顺时针旋转度数增加 */
        RotateAnimation animation = new RotateAnimation(180,360,view.getWidth()/2,view.getHeight());
        animation.setDuration(500);
        animation.setFillAfter(true);//动画执行后保持状态,不要恢复原样
        view.startAnimation(animation);
    }

    //延时后加载动画
    public static void startAnimOutOffset(RelativeLayout view, long offset) {
        RotateAnimation animation = new RotateAnimation(0,180,view.getWidth()/2,view.getHeight());
        animation.setDuration(500);
        animation.setFillAfter(true);//动画执行后保持状态,不要恢复原样
        animation.setStartOffset(offset);
        view.startAnimation(animation);
    }
}

说明一下RotateAnimation 旋转问题，新的旋转中心是以左上角为零点的坐标，且为顺时针旋转。