Android开发技巧——自定义控件之组合控件

我准备在接下来一段时间，写一系列有关Android自定义控件的博客，包括如何进行各种自定义，并分享一下我所知道的其中的技巧，注意点等。
还是那句老话，尽管我知道会被爬虫机器给过滤掉。
本文原创，转载请注明在CSDN博客上的出处：
http://blog.csdn.net/maosidiaoxian/article/details/49884261

今天写第一篇，就先写一下最简单的，也就是我们大概最早接触的一类自定义——组合控件。
这里仅讨论使用布局文件来进行组合控件。
为什么不用Java代码来写布局？原因是没有布局文件直观明了，能预览，好维护。

下面来看一个例子。
假如我们在一个界面当中的某部分布局，在另外一个界面中也会用到。

例如如上图所示，圈起来的内容，可能除了在支付界面上用到，在记录界面上也会用到，那么，你会如何处理这种情况呢？。我们先把布局实现一下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingLeft="16dp"
                android:paddingRight="16dp"
                android:background="#494949">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/login_register"
        android:text="@string/login_guide_text"
        android:textColor="@color/white"
        android:textSize="@dimen/text_28pt"/>

    <TextView
        android:id="@+id/login_register"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="@string/u_login_or_register"
        android:textColor="@color/font_span"
        android:textSize="@dimen/text_28pt"/>
</RelativeLayout>

接着：

直接复制代码

最新手的做法是，选中，复制，到另一个布局文件粘贴。然后会发现，要改一下界面的时候，要两边跟着改。直到我们学习了<include>标签之后。

使用<include>标签

于是，我们把这部分界面给抽出来，到一个新的布局文件中。然后在两个布局当中都include一下。现在如果要改这部分的界面，我们只需要改抽出来的那个文件即可，如果不涉及到所include的布局本身的属性的话。
现在看来是不是好多了？尽管只看布局代码是这样的，但是——
通常我们都不是写一个界面就这样了事了，我们还要在Java代码上，对一些控件设置一些文字，背景色，或是设置点击事件等等。而这部分的界面相同，它们的UI逻辑通常情况下也是相同的。显然，同样的代码要写两遍，作为一个有着懒惰习惯的程序员来说，当然是极极不情愿的。

自定义组合控件

于是我们定义一个类，继承自ViewGroup的子类，因为我们这里是组合一些控件，这些控件是要放在一个控件的容器里，所以不能是继承自View。我们把这个类命名为 LoginTipView，代码如下：

import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.TextView;

/**
 * 提示去登录注册的View
 * @author Geek_Soledad
 * @since 15-5-26
 */
public class LoginTipView extends RelativeLayout implements View.OnClickListener{
    private TextView mLogin;

    public LoginTipView(Context context, AttributeSet attrs) {
        super(context, attrs);
        addView(View.inflate(context, R.layout.view_login_tip, null));
        mLogin = (TextView) findViewById(R.id.login_register);
        mLogin.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        getContext().startActivity(new Intent(getContext(), LoginActivity.class));
    }
}

看这一行代码：

        addView(View.inflate(context, R.layout.view_login_tip, null));

我们把一个布局，通过View.inflate()方法加载出来，并且通过调用addView方法，把它加到我们的LoginTipView中。
然后在我们其他使用到这部分界面的布局代码中这样引用：

    <com.parkingwang.widget.LoginTipView
        android:id="@+id/login_view"
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:layout_alignParentBottom="true"
        tools:visibility="visible"
        android:visibility="gone"/>

并且由于我们的登录的点击事件写在了LoginTipView里，所以我们甚至不需要在其他的Java代码里来设这个点击事件。
但是上面的代码还是有很大的优化余地的。最主要的是，我们的LoginTipView本身就继承自RelativeLayout，而它里面又放了一个我们从布局文件中加载的RelativeLayout，显然这部分内容可以合并。下面开始优化：

优化

首先，我们把布局代码的根元素改为`标签：

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/login_register"
        android:text="@string/login_guide_text"
        android:layout_alignParentLeft="true"
        android:textColor="@color/white"
        android:textSize="@dimen/text_28pt"/>

    <TextView
        android:id="@+id/login_register"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="@string/u_login_or_register"
        android:textColor="@color/font_span"
        android:textSize="@dimen/text_28pt"/>
</merge>

然后LoginTipView代码改为如下：

public class LoginTipView extends RelativeLayout implements View.OnClickListener{
    private TextView mLogin;

    public LoginTipView(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.view_login_tip, this, true);
        this.setGravity(Gravity.CENTER_VERTICAL);
        int padding = getResources().getDimensionPixelSize(R.dimen.padding_common);
        this.setPadding(padding, 0, padding, 0);
        mLogin = (TextView) findViewById(R.id.login_register);
        mLogin.setOnClickListener(this);
        this.setBackgroundResource(R.color.bg_login_tip_view);
    }

    @Override
    public void onClick(View v) {
        LoginMainActivity.showWithClosable((Activity) getContext());
    }
}

注意，我们现在加载布局的代码改为了LayoutInflater.from(context).inflate(R.layout.view_login_tip, this, true);，当然，使用View.inflate(context, R.layout.view_login_tip, this);也是一样的，后者在方法里面也是在调用前者的方法。然后，因为我们已经改为<merge>标签了，所以要把公共的属性写到我们的LoginTipView代码里（当然，你也可以不写，那你就需要在引用这个控件的布局代码里设置其对应属性）。

我们的优化过程是，使用<merge>标签，并在inflate时传入一个ViewGroup对象，使布局文件<merge>里的控件直接加载到这个ViewGroup里，减少层级。

对于这种自定义控件，其实可以说是对组合使用的控件的封装。需要注意的是，这时候你在<merge>元素本身定义的布局属性都是无效的。而这些你需要设定的属性，比如上面例子中的背景色，你可以写在你所封装的控件里，也是写在引用它的布局里。

下篇预告：
应该会讲一下onDraw(Canvas)来实现自定义吧。