Android 自定義控件

用到的圖片文件：

平時都是用簡單的控件經過佈局來組合一大堆控件，界面複雜起來的話，佈局文件就很大，維護起來也很煩。就想把經常使用的控件組合寫成自定義控件，這樣維護起來也方便，代碼也清爽，下面就以帶消除按鈕的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();

而後就能夠使用這個自定義控件了

下面是我運行的結果