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);//想自定义 字体的颜色、大小可以在这实现，具体请参考前一篇文章//TODOinit(context);}private void init(Context context) {// 导入布局LayoutInflater mInflater = LayoutInflater.from(context);mInflater.inflate(R.layout.customview, this, true);//注意此次最后一个参数为 trueiv = (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;@Overrideprotected 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);//想自定义 字体的颜色、大小可以在这实现，具体请参考前一篇文章//TODOinit(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() {@Overridepublic 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);}}@Overridepublic void beforeTextChanged(CharSequence s, int start, int count,int after) {// TODO Auto-generated method stub}@Overridepublic 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