android 自定义View研究(三) — 自定义组合控件

今天和大家分享下组合控件的使用。很多时候android自定义控件并不能满足需求，如何做呢？很多方法，可以自己绘制一个，可以通过继承基础控件来重写某些环节，当然也可以将控件组合成一个新控件，这也是最方便的一个方法。今天就来介绍下如何使用组合控件，将通过两个实例来介绍。

运行效果图如下：

输入文本后

一、实现一个带图片和文字的按钮

布局文件customview.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="5dip"
        android:layout_centerHorizontal="true"
        android:paddingTop="5dip"
        android:src="@drawable/ic_launcher"/>

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/iv"
        android:textColor="#000000" 
        android:layout_centerHorizontal="true"
        android:text="自定义View"/>

</RelativeLayout>

这个xml实现一个左图右字的布局，接下来写一个类继承LinearLayout，导入刚刚的布局，并且设置需要的方法，从而使的能在代码中控制这个自定义控件内容的显示。代码如下：

package com.example.customview03.view;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.example.customview03.R;

/**
 * 自定义组合控件，实现一个带图片和文字的按钮
 * @author FX_SKY
 *
 */
public class CustomCompoundView extends LinearLayout {

	private ImageView iv;
	private TextView tv;

	public CustomCompoundView(Context context) {
		this(context, null);
	}

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

		//想自定义 字体的颜色、大小可以在这实现，具体请参考前一篇文章
		//TODO
		init(context);
	}

	private void init(Context context) {
		// 导入布局
		LayoutInflater mInflater = LayoutInflater.from(context);
		mInflater.inflate(R.layout.customview, this, true);	//注意此次最后一个参数为 true
		iv = (ImageView) findViewById(R.id.iv);
		tv = (TextView) findViewById(R.id.tv);
		
	}

	/**
	 * 设置图片资源
	 */
	public void setImageResource(int resId) {
		iv.setImageResource(resId);
	}

	/**
	 * 设置显示的文字
	 */
	public void setTextViewText(String text) {
		tv.setText(text);
	}

}

注意：控件标签要使用完整的类名即可。如果要给按钮一个点击效果，你需要给他一个selector背景，这里就不说了。
最后一步，即在activity中设置该控件的内容。当然，在xml中也可以设置，但是只能设置一个，当我们需要两次使用这样的控件，并且显示内容不同时就不行了。在activity中设置也非常简单，我们在CustomCompoundView这个类中已经写好了相应的方法，简单调用即可。代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <!-- 自定义 搜索输入框 -->
    <com.example.customview03.view.CustomSearchView
        android:layout_width="fill_parent"
        android:layout_height="45dp" />

    <!-- 自定义 Tabbar -->
    <LinearLayout
        android:layout_marginTop="50dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <com.example.customview03.view.CustomCompoundView
            android:id="@+id/bt_confirm"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/bg"
            android:clickable="true"
            android:focusable="true" />

        <com.example.customview03.view.CustomCompoundView
            android:id="@+id/bt_cancel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/bg"
            android:clickable="true"
            android:focusable="true" />
    </LinearLayout>

</LinearLayout>

package com.example.customview03;

import com.example.customview03.view.CustomCompoundView;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

	private CustomCompoundView ib1;
	private CustomCompoundView ib2;

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

	private void findView() {
		
		ib1 = (CustomCompoundView) findViewById(R.id.bt_confirm);
        ib2 = (CustomCompoundView) findViewById(R.id.bt_cancel);

        ib1.setTextViewText("首页");
        ib1.setImageResource(R.drawable.btn_home_hover);
        ib2.setTextViewText("收藏");
        ib2.setImageResource(R.drawable.btn_soucang_hover);
	}

}

通过这个组合控件，我们就自定义TabHost 底部栏了，新浪微博客户端 底部栏 就是这样做的。

二、带删除按钮的EidtText，即在用户输入后，会出现删除按钮，点击即可取消用户输入

实现步骤跟上面大同小异，先定义一个 布局文件 search_view.xml

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

    <EditText
        android:id="@+id/et_input"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:hint="请输入搜索关键字"
        android:singleLine="true" />

    <ImageButton
        android:id="@+id/ib_check"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:background="#00000000"
        android:layout_marginRight="5dp"
        android:src="@drawable/wb_search_delete_key"
        android:contentDescription="@string/app_name"
        android:visibility="gone" />

</RelativeLayout>

这里用到了TextWatch这个接口，监听输入框中的文字变化。使用也很简单，实现他的三个方法即可，并在内部提供一个回调接口。看代码：

package com.example.customview03.view;

import android.content.Context;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import com.example.customview03.R;

public class CustomSearchView extends LinearLayout{
	private EditText et_input;
	private ImageButton ib_check;
	private EditTextChangedListener mListener;
	
	public void setmListener(EditTextChangedListener mListener) {
		this.mListener = mListener;
	}

	public CustomSearchView(Context context) {
		super(context);
		init(context);
	}

	public CustomSearchView(Context context, AttributeSet attrs) {
		super(context, attrs);
		
		//想自定义 字体的颜色、大小可以在这实现，具体请参考前一篇文章
		//TODO
		init(context);
	}

	private void init(Context context) {

		// 导入布局
		LayoutInflater mInflater = LayoutInflater.from(context);
		View view = mInflater.inflate(R.layout.search_view, this, false);

		this.et_input = (EditText) view.findViewById(R.id.et_input);
		this.ib_check = (ImageButton) view.findViewById(R.id.ib_check);
		
		// 添加按钮点击事件
		this.ib_check.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
            	
            	et_input.setText("");// 设置输入框内容为空
            }
        });
		
		this.et_input.addTextChangedListener(new TextWatcher() {
			
			@Override
			public void onTextChanged(CharSequence s, int start, int before, int count) {
				
				if(s!=null && s.length()>0){
					
					ib_check.setVisibility(View.VISIBLE);
					
					if(mListener!=null){
						mListener.toggleSearch(s.toString());
					}
					
				}else{
					ib_check.setVisibility(View.INVISIBLE);
				}
			}
			
			@Override
			public void beforeTextChanged(CharSequence s, int start, int count,
					int after) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void afterTextChanged(Editable s) {
				// TODO Auto-generated method stub
				
			}
		});
		
		addView(view);
	}
	
	//文本内容发生变化的回调接口
	public interface EditTextChangedListener {
		
		public void toggleSearch(String input);
	}
}

CustomSearchView 使用就很简单了，如下：

<!-- 自定义 搜索输入框 -->
    <com.example.customview03.view.CustomSearchView
        android:layout_width="fill_parent"
        android:layout_height="45dp" />

如果你 想设置 自定义组合控件的 字体的颜色、大小，可以参考我的 前一篇文章：android 自定义View研究(二) — 自定义控件添加属性 http://blog.csdn.net/fx_sky/article/details/10337751

工程下载地址：http://download.csdn.net/detail/fx_sky/6013723