自定义控件之组合控件

原博客：http://blog.csdn.net/guolin_blog/article/details/17357967

组合控件的意思就是，我们并不需要自己去绘制视图上显示的内容，而只是用系统原生的控件就好了，但我们可以将几个系统原生的控件组合到一起，这样创建出的控件就被称为组合控件。

举个例子来说，标题栏就是个很常见的组合控件，很多界面的头部都会放置一个标题栏，标题栏上会有个返回按钮和标题，点击按钮后就可以返回到上一个界面。那么下面我们就来尝试去实现这样一个标题栏控件。

新建一个title.xml布局文件，代码如下所示：

<?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="50dp"
    android:background="#ffcb05" >

    <Button
        android:id="@+id/button_left"
        android:layout_width="60dp"
        android:layout_height="40dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5dp"
        android:background="#ffcc00"
        android:text="Back"
        android:textColor="#fff" />

    <TextView
        android:id="@+id/title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="This is Title"
        android:textColor="#fff"
        android:textSize="20sp" />

</RelativeLayout>

在这个布局文件中，我们首先定义了一个RelativeLayout作为背景布局，然后在这个布局里定义了一个Button和一个TextView，Button就是标题栏中的返回按钮，TextView就是标题栏中的显示的文字。

接下来创建一个TitleView继承自FrameLayout，代码如下所示：

package com.example.androidexpriment;

import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.TextView;

public class TitleView extends FrameLayout {

    private Button leftButton;

    private TextView titleText;

    public TitleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.title, this);
        titleText = (TextView) findViewById(R.id.title_text);
        leftButton = (Button) findViewById(R.id.button_left);
        leftButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                ((Activity) getContext()).finish();
            }
        });
    }

    public void setTitleText(String text) {
        titleText.setText(text);
    }

    public void setLeftButtonText(String text) {
        leftButton.setText(text);
    }

    public void setLeftButtonListener(OnClickListener l) {
        leftButton.setOnClickListener(l);
    }

}

得到了LayoutInflater的实例之后就可以调用它的inflate()方法来加载布局了，

20行 LayoutInflater.from(context).inflate(R.layout.title, this);加载布局必不可少，可以不返回布局实例

TitleView中的代码非常简单，在TitleView的构建方法中，我们调用了LayoutInflater的inflate()方法来加载刚刚定义的title.xml布局，这部分内容我们已经在 Android LayoutInflater原理分析，带你一步步深入了解View(一) 这篇文章中学习过了。

接下来调用findViewById()方法获取到了返回按钮的实例，然后在它的onClick事件中调用finish()方法来关闭当前的Activity，也就相当于实现返回功能了。

另外，为了让TitleView有更强地扩展性，我们还提供了setTitleText()、setLeftButtonText()、setLeftButtonListener()等方法，分别用于设置标题栏上的文字、返回按钮上的文字、以及返回按钮的点击事件。

到了这里，一个自定义的标题栏就完成了，那么下面又到了如何引用这个自定义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" >

    <com.example.androidexpriment.TitleView
        android:id="@+id/title_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </com.example.androidexpriment.TitleView>

</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" > 
  <include layout="@layout/title"
            android:id="@+id/title_view"
          />  
</RelativeLayout>

这样就成功将一个标题栏控件引入到布局文件中了，运行一下程序，效果如下图所示：

现在点击一下Back按钮，就可以关闭当前的Activity了。如果你想要修改标题栏上显示的内容，或者返回按钮的默认事件，只需要在Activity中通过findViewById()方法得到TitleView的实例，然后调用setTitleText()、setLeftButtonText()、setLeftButtonListener()等方法进行设置就OK了。

 自定义布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    
      <LinearLayout 
         android:layout_width="match_parent"
         android:layout_height="60dp"
         android:background="@color/dark"
         android:orientation="horizontal">
       <ImageButton
              android:id="@+id/ib_back"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:scaleType="fitCenter"
            android:background="#00000000"
            android:padding="15dp"
            android:layout_gravity="center"
            android:src="@drawable/back"/>"
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#FFFFFF"
            android:layout_marginLeft="80dp"
            android:textSize="30sp"
            android:layout_gravity="center"
            android:text="应用列表"/>
        
        
   </LinearLayout>
    <LinearLayout android:id="@+id/listLinearLayout"
        android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:orientation="vertical">
        <ListView android:id="@+id/list" android:layout_width="fill_parent"
            android:layout_height="wrap_content" 
            android:background="@color/listbackground"
            android:drawSelectorOnTop="true"
            android:scrollbars="vertical" />
    </LinearLayout>
</LinearLayout>

 同样的布局在做自定义的时候建议采用下面的，简洁：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    
      <LinearLayout 
         android:layout_width="match_parent"
         android:layout_height="50dp"
         android:background="@color/dark"
         android:orientation="horizontal">
       <ImageButton
            android:id="@+id/ib_back"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:scaleType="fitCenter"
            android:background="#00000000"
            android:padding="15dp"
            android:layout_gravity="center"
            android:src="@drawable/back"/>"
        <TextView
             android:id="@+id/title_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#FFFFFF"
            android:layout_marginLeft="75dp"
            android:textSize="30sp"
            android:layout_gravity="center"
            android:text="应用列表"/>
             
       </LinearLayout>
    
    <ListView android:id="@+id/list" android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        android:background="@color/listbackground"
        android:drawSelectorOnTop="true"
        android:scrollbars="vertical" /> 
</LinearLayout>

下面的相对布局不知道为啥有问题

<?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="50dp"
    android:background="@color/dark" >

       <ImageButton
              android:id="@+id/ib_back"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:scaleType="fitCenter"
            android:background="#00000000"
            android:padding="15dp"
            android:layout_gravity="center"
            android:src="@drawable/back"/>"
        <TextView
            android:id="@+id/title_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#FFFFFF"
            android:layout_centerInParent="true"
            android:textSize="30sp"
            android:text="应用列表"/>
        <ListView android:id="@+id/list" android:layout_width="fill_parent"
            android:layout_height="wrap_content" 
            android:background="@color/listbackground"
            android:layout_below="@+id/title_text"
            android:drawSelectorOnTop="true"
            android:scrollbars="vertical" />

</RelativeLayout>