《Android 群英传》读书笔记：自定义 View 之创建复合控件

转载请注明出处： http://blog.youkuaiyun.com/like_program/article/details/53164867

创建复合控件可以很好地创建出具有重用功能的控件集合。这种方式通常需要继承一个合适的 ViewGroup，再给它添加指定功能的控件，从而组合成新的复合控件。

通过这种方式创建的控件，我们一般会给它指定一些可配置的属性，让它具有更强的拓展性。

下面以一个 TopBar 为例，讲解如何创建复合控件。

先看下最终效果图：

打开 Android Studio，新建 TopBarTest 项目。

1. 自定义属性

在 res / values 目录下新建 attrs.xml ，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="TopBar">
        <!-- 标题内容 -->
        <attr name="title_text" format="string"/>
        <!-- 标题字体大小 -->
        <attr name="title_text_size" format="dimension"/>
        <!-- 标题颜色 -->
        <attr name="title_text_color" format="color"/>
        <!-- 左边按钮的文字 -->
        <attr name="left_text" format="string"/>
        <!-- 左边按钮文字颜色 -->
        <attr name="left_text_color" format="color"/>
        <!-- 左边按钮的背景 -->
        <attr name="left_bg" format="reference|color"/>
        <!-- 右边按钮文字 -->
        <attr name="right_text" format="string"/>
        <!-- 右边按钮文字颜色 -->
        <attr name="right_text_color" format="color"/>
        <!-- 右边按钮背景 -->
        <attr name="right_bg" format="reference|color"/>
    </declare-styleable>

</resources>

• <declare-styleable> 标签声明使用自定义属性
• name 属性来确定引用的名称
• <attr> 标签来声明具有的自定义属性
• format 属性来指定自定义属性的类型

注意：

有些属性可以是颜色属性，也可以是引用属性。比如按钮的背景，可以把它指定为颜色，也可以把它指定为一张图片，所以用 “ | ” 来分割不同的属性 – reference|color 。

确定好属性后，我们在代码中获取这些属性。

2. 创建自定义控件

自定义属性写好了之后，就可以创建一个自定义控件，让它继承自 ViewGroup。

新建 TopBar.java，继承自 RelativeLayout，代码如下：

package com.example.topbartest;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.Gravity;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class TopBar extends RelativeLayout {

    /**
     * 左边按钮的文字颜色
     */
    private int mLeftTextColor;

    /**
     * 左边按钮的背景
     */
    private Drawable mLeftBackground;

    /**
     * 左边按钮的文字
     */
    private String mLeftText;

    /**
     * 右边按钮的文字颜色
     */
    private int mRightTextColor;

    /**
     * 右边按钮的背景
     */
    private Drawable mRightBackground;

    /**
     * 右边按钮的文字
     */
    private String mRightText;

    /**
     * 标题文字的颜色
     */
    private int mTitleTextColor;

    /**
     * 标题文字的大小
     */
    private float mTitleTextSize;

    /**
     * 标题文字
     */
    private String mTitleText;

    /**
     * 左边按钮
     */
    private Button mLeftButton;

    /**
     * 右边按钮
     */
    private Button mRightButton;

    /**
     * 标题
     */
    private TextView mTitleView;

    private LayoutParams mLeftParams;
    private LayoutParams mRightParams;
    private LayoutParams mTitleParams;

    public TopBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public TopBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        setBackgroundColor(0xFFF59563);
        // 把在 attrs.xml 中定义的 declare-styleable 中
        // 所有属性名称存储到 TypedArray 中
        TypedArray typedArray = context.obtainStyledAttributes(attrs,
                R.styleable.TopBar);

        // 从 TypedArray 中取出各属性对应的值
        // 取出的值是我们在 layout_topbar.xml 中给各属性赋的值
        mLeftTextColor = typedArray.getColor(
                R.styleable.TopBar_left_text_color, 0);
        mLeftBackground = typedArray
                .getDrawable(R.styleable.TopBar_left_bg);
        mLeftText = typedArray.getString(R.styleable.TopBar_left_text);

        mRightTextColor = typedArray.getColor(
                R.styleable.TopBar_right_text_color, 0);
        mRightBackground = typedArray
                .getDrawable(R.styleable.TopBar_right_bg);
        mRightText = typedArray.getString(R.styleable.TopBar_right_text);

        mTitleTextColor = typedArray.getColor(
                R.styleable.TopBar_title_text_color, 0);
        mTitleTextSize = typedArray.getDimension(
                R.styleable.TopBar_title_text_size, 10);
        mTitleText = typedArray.getString(R.styleable.TopBar_title_text);

        // 获取完 TypedArray 的值后，
        // 一般要调用 recycle 方法来避免重新创建的时候出错
        typedArray.recycle();

        mLeftButton = new Button(context);
        mRightButton = new Button(context);
        mTitleView = new TextView(context);

        // 为创建的组件元素赋值
        mLeftButton.setBackgroundDrawable(mLeftBackground);
        mLeftButton.setText(mLeftText);
        mLeftButton.setTextColor(mLeftTextColor);

        mRightButton.setBackgroundDrawable(mRightBackground);
        mRightButton.setText(mRightText);
        mRightButton.setTextColor(mRightTextColor);

        mTitleView.setTextColor(mTitleTextColor);
        mTitleView.setTextSize(mTitleTextSize);
        mTitleView.setText(mTitleText);

        // 标题文字在 TextView 中心
        mTitleView.setGravity(Gravity.CENTER);

        // 左边按钮的布局参数
        mLeftParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
                LayoutParams.MATCH_PARENT);
        // 左边按钮在父布局的左边
        mLeftParams.addRule(ALIGN_PARENT_LEFT, TRUE);
        // 添加到父布局
        addView(mLeftButton, mLeftParams);

        // 右边按钮的布局参数
        mRightParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
                LayoutParams.MATCH_PARENT);
        // 右边按钮在父布局的右边
        mRightParams.addRule(ALIGN_PARENT_RIGHT, TRUE);
        // 添加到父布局
        addView(mRightButton, mRightParams);

        // 标题的布局参数
        mTitleParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
                LayoutParams.MATCH_PARENT);
        // 标题在父布局的中心
        mTitleParams.addRule(CENTER_IN_PARENT, TRUE);
        // 添加到父布局
        addView(mTitleView, mTitleParams);

        mLeftButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mListener != null) {
                    mListener.leftClick();
                }
            }
        });

        mRightButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mListener != null) {
                    mListener.rightClick();
                }
            }
        });
    }

    public TopBar(Context context) {
        super(context);
    }
}

之所以在 public TopBar(Context context, AttributeSet attrs) 这个构造方法中实例化布局，是因为等会要从布局文件中加载 TopBar。

要实例化布局文件中的控件，就会执行 public TopBar(Context context, AttributeSet attrs) 这个构造方法。

刚刚我们调用 typedArray.getXXX() 方法来获取自定义属性的值。那么我们就要在布局文件中给我们自定义的属性赋值。

新建 layout_topbar.xml ，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<com.example.topbartest.TopBar xmlns:android="http://schemas.android.com/apk/res/android"
                               xmlns:app="http://schemas.android.com/apk/res-auto"
                               android:layout_width="match_parent"
                               android:layout_height="40dp"
                               app:left_bg="@drawable/blue_button"
                               app:left_text="返回"
                               app:left_text_color="#FFFFFF"
                               app:right_bg="@drawable/blue_button"
                               app:right_text="更多"
                               app:right_text_color="#FFFFFF"
                               app:title_text="自定义标题"
                               app:title_text_color="#123412"
                               app:title_text_size="10sp">

</com.example.topbartest.TopBar>

blue_button 是一个选择器，blue_button.xml 代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 手指按下 -->
    <item android:state_pressed="true">
        <!-- 矩形 -->
        <shape android:shape="rectangle">

            <!-- 填充的颜色 -->
            <solid android:color="#33444444"/>
        </shape>
    </item>
    <!-- 手指未按下 -->
    <item>
        <!-- 矩形 -->
        <shape android:shape="rectangle">

            <!-- 填充的颜色 -->
            <solid android:color="#3EC5FF"/>
        </shape>
    </item>

</selector>

命名空间

xmlns:android="http://schemas.android.com/apk/res/android"

这行代码就是在指定引用的命名空间 xmlns，即 xml namespace。这里指定了命名空间为 android，因此在接下来使用系统属性的时候，才可以使用 android: 来引用 Android 的系统属性。

同样的，如果要使用自定义的属性，那么就需要创建自己的命名空间。

在 Android Studio 中，默认使用如下代码引入命名空间：

xmlns:app="http://schemas.android.com/apk/res-auto"

命名空间可以随便命名，然后使用自定义的属性时，就可以通过这个命名空间来引用。

3. 引用模板

在 activity_main.xml 中，直接通过 标签来引用这个复合控件，代码如下：

<?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"
    tools:context="com.example.topbartest.MainActivity">

    <include
        android:id="@+id/topBar"
        layout="@layout/layout_topbar"/>
</RelativeLayout>

如果不想用 <include> 标签引用复合控件，也可以直接在布局文件 activity_main.xml 中引入 TopBar：

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.example.topbartest.MainActivity">

    <com.example.topbartest.TopBar
        android:id="@+id/topBar"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        app:left_bg="@drawable/blue_button"
        app:left_text="返回"
        app:left_text_color="#FFFFFF"
        app:right_bg="@drawable/blue_button"
        app:right_text="更多"
        app:right_text_color="#FFFFFF"
        app:title_text="自定义标题"
        app:title_text_color="#123412"
        app:title_text_size="10sp"/>
</RelativeLayout>

注意：

如果在布局文件 activity_main.xml 中引入 TopBar，需要引入命名空间：

xmlns:app="http://schemas.android.com/apk/res-auto"

4. 给按钮添加点击逻辑

由于是 UI 模板，那么每个调用者所需要这些按钮能够实现的功能都是不一样的，所以，不能直接在 UI 模板中添加具体的实现逻辑，只能通过接口回调的思想，将具体的实现逻辑交给调用者。

1. 定义接口

在 TopBar.java 中定义一个左右按钮点击的接口，在接口中创建两个方法，分别用于左边按钮的点击和右边按钮的点击，代码如下：

public interface OnTopBarClickListener {
    // 左按钮点击事件
    void leftClick();
    // 右按钮点击事件
    void rightClick();
}

2. 暴露接口给调用者

定义好了接口之后，要暴露接口给调用者来注册接口回调。

private OnTopBarClickListener mListener;

public void setOnTopBarClickListener(OnTopBarClickListener listener) {
    mListener = listener;
}

3. 调用接口

public TopBar(Context context, AttributeSet attrs) {
    super(context, attrs);

    ......

    mLeftButton.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            if (mListener != null) {
                mListener.leftClick();
            }
        }
    });

    mRightButton.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            if (mListener != null) {
                mListener.rightClick();
            }
        }
    });
}

注意：

调用接口的方法时，一定要先判断接口是否为空，否则，如果调用者没有实现这个接口，那么 mListener 就还是为 null，这时调用接口的方法，就会引起 NullPointerException （空指针异常）

4. 调用者实现接口回调

修改 MainActivity.java ，代码如下：

private TopBar mTopBar;

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

    mTopBar = (TopBar) findViewById(R.id.topBar);
    mTopBar.setOnTopBarClickListener(new TopBar.OnTopBarClickListener() {
        @Override
        public void leftClick() {
            Toast.makeText(MainActivity.this, "点击了 返回", Toast.LENGTH_SHORT).show();
        }

        @Override
        public void rightClick() {
            Toast.makeText(MainActivity.this, "点击了 更多", Toast.LENGTH_SHORT).show();
        }
    });
}

运行一下程序：

TopBar 已经成功显示出来了。

5. 设置按钮的显示或隐藏

引用模板的时候，可能不需要某个按钮，也可能根本不需要按钮，所以最好能动态的修改 UI 模板的按钮显示或隐藏，提供模板的可定制性。

要设置按钮的显示或隐藏，我们可以给左边按钮和右边按钮设置 id，通过 id 来区别是哪个按钮，从而控制按钮的显示或隐藏。

修改 TopBar.java ，代码如下：

/**
 * 左边按钮的 id
 */
public static final int BUTTON_LEFT = 0;

/**
 * 右边按钮的 id
 */
public static final int BUTTON_RIGHT = 1;

/**
 * 设置按钮的显示或隐藏
 *
 * @param id     按钮 id
 * @param isShow true 为 显示
 *               false 为隐藏
 */
public void setButtonVisible(int id, boolean isShow) {
    if (isShow) {
        if (id == BUTTON_LEFT) {
            mLeftButton.setVisibility(VISIBLE);
        } else if (id == BUTTON_RIGHT) {
            mRightButton.setVisibility(VISIBLE);
        }
    } else {
        if (id == BUTTON_LEFT) {
            mLeftButton.setVisibility(INVISIBLE);
        } else if (id == BUTTON_RIGHT) {
            mRightButton.setVisibility(INVISIBLE);
        }
    }
}

然后我们在 MainActivity.java 中动态控制按钮的显示或隐藏，代码如下：

// 显示左边按钮
mTopBar.setButtonVisable(TopBar.BUTTON_LEFT, true);
// 隐藏右边按钮
mTopBar.setButtonVisable(TopBar.BUTTON_RIGHT, false);

运行一下程序：

可以看到，右边按钮已经被隐藏了。

源码下载