1. 程式人生 > >android 實現edittext輸入內容後可以點選右側小圖片進行清除內容

android 實現edittext輸入內容後可以點選右側小圖片進行清除內容

在實際的開發過程中,我們會遇到輸入密碼輸入搜尋漢字這樣的需求,然後當我們輸入了字元之後,又不想一下一下的後退刪掉,這時候就需要我們的旁邊的小按鈕來實現了

我們要實現的效果是這個樣子的.


點選小X號就可以把我們的edittext的內容清空,本來想應該是一個editext然後他的drawableRight是一個圖片,但是這個圖片我們不可以點選,這顯然不能滿足我們的需求.然後就進行了思考,該怎麼實現實現這個呢..

最後想出來我們可以自定義一個xml佈局(RelativeLayout),佈局裡面放一個edittext和一個小按鈕,然後我們再新建一個類,繼承自一個RelativeLayout

然後我們使用LayoutInfalter載入這個佈局,然後對這個佈局裡面的控制元件進行操作就可以了

好,下面直接上程式碼:

佈局的程式碼:

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

    <EditText
        android:id="@+id/et_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerVertical="true"
        >
        <requestFocus />
    </EditText>

    <ImageButton
        android:id="@+id/iv_clear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="@android:color/transparent"
        android:src="@drawable/search_clear_normal"
        android:visibility="invisible" />
    
</RelativeLayout>
java類程式碼:
package com.example.custom;

import com.example.testedittextcustom.R;

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.RelativeLayout;

public class customedittext extends RelativeLayout {

	private EditText mEditText;
	private ImageButton mButton;
	
	
	//自定義元件應該先實現他的構造方法
	public customedittext(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		initView(context);
	}
	
	public customedittext(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		initView(context);
	}
	
	
	public customedittext(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		// TODO Auto-generated constructor stub
		initView(context);
	}
	
	private void initView(Context context) {
		LayoutInflater inflater = LayoutInflater.from(context);
		View view = inflater.inflate(R.layout.edittextcustom, this);
		mEditText = (EditText) view.findViewById(R.id.et_view);
		mButton = (ImageButton) findViewById(R.id.iv_clear);
		
		mEditText.addTextChangedListener(new TextWatcher() {
			@Override
			public void onTextChanged(CharSequence s, int start, int before, int count) {
				if(s.length()>0) {
					mButton.setVisibility(View.VISIBLE);
				} else {
					mButton.setVisibility(View.INVISIBLE);
				}
			}
			@Override
			public void beforeTextChanged(CharSequence s, int start, int count,
					int after) {
			}
			@Override
			public void afterTextChanged(Editable s) {
			}
		});
		
		mButton.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				mEditText.getText().clear();//清空輸入框
			}
		});
		
	}
	

}
然後我們把這個java類,當作一個普通的控制元件使用就可以了.只是類名貌似會有點長