Android 自定义控件

原创
2013/12/18 21:06
阅读数 8K

用到的图片文件:

平时都是用简单的控件通过布局来组合一大堆控件,界面复杂起来的话,布局文件就很大,维护起来也很烦。就想把常用的控件组合写成自定义控件,这样维护起来也方便,代码也清爽,下面就以带消除按钮的EditText为例。平时,EditText删除输入的都是按好多下删除键的,看到很多应用的输入框,在输入内容后,会跳出一个清空按钮,点击一下,输入的都会清除,这个用户体验很好。自己尝试了一下,原先是用最简单的控件组合,发现代码量太大,重用性不高,所以想把这个封装成一个自定义控件,直接调用。直接上代码。

    EditTextWithClearButton.java

import xidian.wwf.temperature.R;
import xidian.wwf.temperature.util.StringUtil;
import android.content.Context;
import android.content.res.TypedArray;
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;

/**
 * 带清除按钮的输入框
 * @author WWF
 */
public class EditTextWithClearButton extends LinearLayout{
	
	private EditText editText;
	private ImageButton clearImageButton;

	public EditTextWithClearButton(Context context) {
		super(context);
	}
	
	public EditTextWithClearButton(Context context,AttributeSet attrs){
		super(context, attrs);
		init(context,attrs);
	}
	
	/**
	 * 初始化
	 */
	public void init(Context context,AttributeSet attrs){
		View view = LayoutInflater.from(context).inflate(R.layout.weight_edit_with_clear, this, true);
		editText = (EditText) view.findViewById(R.id.et);
		clearImageButton = (ImageButton) view.findViewById(R.id.clear_ib);
		clearImageButton.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				editText.setText("");
			}
		});
		editText.addTextChangedListener(new TextWatcher() {
			
			@Override
			public void onTextChanged(CharSequence s, int start, int before, int count) {
				if (s.length() > 0) {
					clearImageButton.setVisibility(View.VISIBLE);
				} else {
					clearImageButton.setVisibility(View.GONE);
				}
			}
			
			@Override
			public void beforeTextChanged(CharSequence s, int start, int count,
					int after) {
				
			}
			@Override
			public void afterTextChanged(Editable s) {
				
			}
		});
		//将属性值设置到控件中
		TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.EditWithClearText);
		CharSequence hint = a.getText(R.styleable.EditWithClearText_hint);
		CharSequence text = a.getText(R.styleable.EditWithClearText_text);
		if (text!=null&&!StringUtil.isEmpty(text.toString().trim())) {
			editText.setText(text);
			//设置光标位置
			editText.setSelection(text.length());
			this.clearImageButton.setVisibility(View.VISIBLE);
		}else {
			if (hint!=null&&!StringUtil.isEmpty(hint.toString().trim())) {
				editText.setHint(hint);
			}
		}
		a.recycle();
	}
	
	/**
	 * 获得输入的值
	 * @return
	 */
	public String getText(){
		return this.editText.getText().toString();
	}
	
	/**
	 * 设置值
	 * @param text
	 */
	public void setText(String text){
		this.editText.setText(text);
	}
	
	/**
	 * 设置默认值
	 * @param hint
	 */
	public void setHint(String hint){
		this.editText.setHint(hint);
	}
	
	/**
	 * 获得输入框控件
	 * @return
	 */
	public EditText getEditText(){
		return this.editText;
	}
	
	/**
	 * 获得消除按钮
	 * @return
	 */
	public ImageButton getClearImageButton(){
		return this.clearImageButton;
	}
}

weight_edit_with_clear.xml 自定义控件布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@null"
    android:orientation="horizontal" >

    <EditText
        android:id="@+id/et"
        style="@style/text_normal"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@null"
        android:gravity="center_vertical"
        android:maxLength="20"
        android:paddingLeft="5dp"
        android:paddingRight="4dp"
        android:singleLine="true" />

    <ImageButton
        android:id="@+id/clear_ib"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:contentDescription="@string/image_content"
        android:src="@drawable/common_input_box_clear"
        android:visibility="gone" />

</LinearLayout>

这个布局文件就是自定义控件组合的布局文件,我采用线性布局,然后将EditText 和ImageButton 组合起来。

属性配置文件 attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="EditTextWithClearBitton">
        <attr name="text"  format="string"/>
        <attr name="hint"  format="string" />
    </declare-styleable>
</resources>


Activity 布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:wwf="http://schemas.android.com/apk/res/xidian.wwf.temperature"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/white"
    android:orientation="vertical" >


    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/table_above_nor"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="10dp"
        android:layout_margin="10dp" >

        <TextView
            style="@style/text_normal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="10dp"
            android:singleLine="true"
            android:text="@string/account"
            android:textStyle="bold" />

        <xidian.wwf.temperature.weight.EditTextWithClearButton
            android:id="@+id/ssss"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical" 
            wwf:text="@string/system_error"
            >
        </xidian.wwf.temperature.weight.EditTextWithClearButton>
    </LinearLayout>

</LinearLayout>

引入我们自定义的属性,需在布局文件中加入上面的

xmlns:wwf="http://schemas.android.com/apk/res/项目包名"

在控件初始化中,获得属性值,赋给控件即可,赋值的代码

//将属性值设置到控件中
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.EditTextWithClearBitton);
CharSequence hint = a.getText(R.styleable.EditTextWithClearBitton_hint);
CharSequence text = a.getText(R.styleable.EditTextWithClearBitton_text);
if (text!=null&&!StringUtil.isEmpty(text.toString().trim())) {
	editText.setText(text);
	//设置光标位置
	editText.setSelection(text.length());
	this.clearImageButton.setVisibility(View.VISIBLE);
}else {
	if (hint!=null&&!StringUtil.isEmpty(hint.toString().trim())) {
		editText.setHint(hint);
	}
}
a.recycle();

然后就可以使用这个自定义控件了

下面是我运行的结果


展开阅读全文
加载中
点击加入讨论🔥(2) 发布并加入讨论🔥
2 评论
82 收藏
4
分享
返回顶部
顶部