《Android 群英传》读书笔记：自定义 View 之创建复合控件
转载请注明出处： http://blog.csdn.net/like_program/article/details/53164867
创建复合控件可以很好地创建出具有重用功能的控件集合。这种方式通常需要继承一个合适的 ViewGroup，再给它添加指定功能的控件，从而组合成新的复合控件。
通过这种方式创建的控件，我们一般会给它指定一些可配置的属性，让它具有更强的拓展性。
下面以一个 TopBar 为例，讲解如何创建复合控件。
先看下最终效果图：
打开 Android Studio，新建 TopBarTest 项目。
1. 自定义属性
在 res / values 目录下新建 attrs.xml ，代码如下：
<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>name属性来确定引用的名称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 ，代码如下：
<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 代码如下：
<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 中，直接通过 标签来引用这个复合控件，代码如下：
<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>如果不想用
<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);运行一下程序：
可以看到，右边按钮已经被隐藏了。
源码下载