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