Android輸入框控件ClearEditText實現(xiàn)清除功能
更新時間：2016年05月15日 15:45:11 作者：xiaanming
這篇文章主要為大家詳細(xì)介紹了Android輸入框控件ClearEditText實現(xiàn)清除功能，感興趣的小伙伴們可以參考一下
本文給大家?guī)硪粋€很實用的小控件ClearEditText，就是在Android系統(tǒng)的輸入框右邊加入一個小圖標(biāo)，點擊小圖標(biāo)可以清除輸入框里面的內(nèi)容，IOS上面直接設(shè)置某個屬性就可以實現(xiàn)這一功能，但是Android原生EditText不具備此功能，所以要想實現(xiàn)這一功能我們需要重寫EditText，接下來就帶大家來實現(xiàn)這一小小的功能
我們知道，我們可以為我們的輸入框在上下左右設(shè)置圖片，所以我們可以利用屬性android:drawableRight設(shè)置我們的刪除小圖標(biāo)，如圖
我這里設(shè)置了左邊和右邊的圖片，如果我們能為右邊的圖片設(shè)置監(jiān)聽，點擊右邊的圖片清除輸入框的內(nèi)容并隱藏刪除圖標(biāo)，這樣子這個小功能就迎刃而解了，可是Android并沒有給允許我們給右邊小圖標(biāo)加監(jiān)聽的功能，這時候你是不是發(fā)現(xiàn)這條路走不通呢，其實不是，我們可能模擬點擊事件，用輸入框的的onTouchEvent()方法來模擬，
當(dāng)我們觸摸抬起（就是ACTION_UP的時候）的范圍 大于輸入框左側(cè)到清除圖標(biāo)左側(cè)的距離，小與輸入框左側(cè)到清除圖片右側(cè)的距離，我們則認(rèn)為是點擊清除圖片，當(dāng)然我這里沒有考慮豎直方向，只要給清除小圖標(biāo)就上了監(jiān)聽，其他的就都好處理了，我先把代碼貼上來，在講解下
package com.example.clearedittext;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnFocusChangeListener;
import android.view.animation.Animation;
import android.view.animation.CycleInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.EditText;
public class ClearEditText extends EditText implements
OnFocusChangeListener, TextWatcher {
/**
* 刪除按鈕的引用
*/
private Drawable mClearDrawable;
/**
* 控件是否有焦點
*/
private boolean hasFoucs;
public ClearEditText(Context context) {
this(context, null);
}
public ClearEditText(Context context, AttributeSet attrs) {
//這里構(gòu)造方法也很重要，不加這個很多屬性不能再XML里面定義
this(context, attrs, android.R.attr.editTextStyle);
}
public ClearEditText(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init() {
//獲取EditText的DrawableRight,假如沒有設(shè)置我們就使用默認(rèn)的圖片
mClearDrawable = getCompoundDrawables()[2];
if (mClearDrawable == null) {
// throw new NullPointerException("You can add drawableRight attribute in XML");
mClearDrawable = getResources().getDrawable(R.drawable.delete_selector);
}
mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth(), mClearDrawable.getIntrinsicHeight());
//默認(rèn)設(shè)置隱藏圖標(biāo)
setClearIconVisible(false);
//設(shè)置焦點改變的監(jiān)聽
setOnFocusChangeListener(this);
//設(shè)置輸入框里面內(nèi)容發(fā)生改變的監(jiān)聽
addTextChangedListener(this);
}
/**
* 因為我們不能直接給EditText設(shè)置點擊事件，所以我們用記住我們按下的位置來模擬點擊事件
* 當(dāng)我們按下的位置 在 EditText的寬度 - 圖標(biāo)到控件右邊的間距 - 圖標(biāo)的寬度 和
* EditText的寬度 - 圖標(biāo)到控件右邊的間距之間我們就算點擊了圖標(biāo)，豎直方向就沒有考慮
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
if (getCompoundDrawables()[2] != null) {
boolean touchable = event.getX() > (getWidth() - getTotalPaddingRight())
&& (event.getX() < ((getWidth() - getPaddingRight())));
if (touchable) {
this.setText("");
}
}
}
return super.onTouchEvent(event);
}
/**
* 當(dāng)ClearEditText焦點發(fā)生變化的時候，判斷里面字符串長度設(shè)置清除圖標(biāo)的顯示與隱藏
*/
@Override
public void onFocusChange(View v, boolean hasFocus) {
this.hasFoucs = hasFocus;
if (hasFocus) {
setClearIconVisible(getText().length() > 0);
} else {
setClearIconVisible(false);
}
}
/**
* 設(shè)置清除圖標(biāo)的顯示與隱藏，調(diào)用setCompoundDrawables為EditText繪制上去
* @param visible
*/
protected void setClearIconVisible(boolean visible) {
Drawable right = visible ? mClearDrawable : null;
setCompoundDrawables(getCompoundDrawables()[0],
getCompoundDrawables()[1], right, getCompoundDrawables()[3]);
}
/**
* 當(dāng)輸入框里面內(nèi)容發(fā)生變化的時候回調(diào)的方法
*/
@Override
public void onTextChanged(CharSequence s, int start, int count,
int after) {
if(hasFoucs){
setClearIconVisible(s.length() > 0);
}
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count,
int after) {
}
@Override
public void afterTextChanged(Editable s) {
}
/**
* 設(shè)置晃動動畫
*/
public void setShakeAnimation(){
this.setAnimation(shakeAnimation(5));
}
/**
* 晃動動畫
* @param counts 1秒鐘晃動多少下
* @return
*/
public static Animation shakeAnimation(int counts){
Animation translateAnimation = new TranslateAnimation(0, 10, 0, 0);
translateAnimation.setInterpolator(new CycleInterpolator(counts));
translateAnimation.setDuration(1000);
return translateAnimation;
}
}
setClearIconVisible()方法，設(shè)置隱藏和顯示清除圖標(biāo)的方法，我們這里不是調(diào)用setVisibility()方法，setVisibility()這個方法是針對View的，我們可以調(diào)用setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom)來設(shè)置上下左右的圖標(biāo)
setOnFocusChangeListener(this) 為輸入框設(shè)置焦點改變監(jiān)聽，如果輸入框有焦點，我們判斷輸入框的值是否為空，為空就隱藏清除圖標(biāo)，否則就顯示
addTextChangedListener(this) 為輸入框設(shè)置內(nèi)容改變監(jiān)聽，其實很簡單呢，當(dāng)輸入框里面的內(nèi)容發(fā)生改變的時候，我們需要處理顯示和隱藏清除小圖標(biāo)，里面的內(nèi)容長度不為0我們就顯示，否是就隱藏，但這個需要輸入框有焦點我們才改變顯示或者隱藏，為什么要需要焦點，比如我們一個登陸界面，我們保存了用戶名和密碼，在登陸界面onCreate()的時候，我們把我們保存的密碼顯示在用戶名輸入框和密碼輸入框里面，輸入框里面內(nèi)容發(fā)生改變，導(dǎo)致用戶名輸入框和密碼輸入框里面的清除小圖標(biāo)都顯示了，這顯然不是我們想要的效果，所以加了一個是否有焦點的判斷
setShakeAnimation()，這個方法是輸入框左右抖動的方法，之前我在某個應(yīng)用看到過類似的功能，當(dāng)用戶名錯誤，輸入框就在哪里抖動，感覺挺好玩的，其實主要是用到一個移動動畫，然后設(shè)置動畫的變化率為正弦曲線
接下來我們來使用它，Activity的布局，兩個我們自定義的輸入框，一個按鈕
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#95CAE4">
<com.example.clearedittext.ClearEditText
android:id="@+id/username"
android:layout_marginTop="60dp"
android:layout_width="fill_parent"
android:background="@drawable/login_edittext_bg"
android:drawableLeft="@drawable/icon_user"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:singleLine="true"
android:drawableRight="@drawable/delete_selector"
android:hint="輸入用戶名"
android:layout_height="wrap_content" >
</com.example.clearedittext.ClearEditText>
<com.example.clearedittext.ClearEditText
android:id="@+id/password"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="10dip"
android:drawableLeft="@drawable/account_icon"
android:hint="輸入密碼"
android:singleLine="true"
android:password="true"
android:drawableRight="@drawable/delete_selector"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/username"
android:background="@drawable/login_edittext_bg" >
</com.example.clearedittext.ClearEditText>
<Button
android:id="@+id/login"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:background="@drawable/login_button_bg"
android:textSize="18sp"
android:textColor="@android:color/white"
android:layout_below="@+id/password"
android:layout_marginTop="25dp"
android:text="登錄" />
</RelativeLayout>
然后就是界面代碼的編寫，主要是測試輸入框左右晃動而已，比較簡單
package com.example.clearedittext;
import android.app.Activity;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;
public class MainActivity extends Activity {
private Toast mToast;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ClearEditText username = (ClearEditText) findViewById(R.id.username);
final ClearEditText password = (ClearEditText) findViewById(R.id.password);
((Button) findViewById(R.id.login)).setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if(TextUtils.isEmpty(username.getText())){
//設(shè)置晃動
username.setShakeAnimation();
//設(shè)置提示
showToast("用戶名不能為空");
return;
}
if(TextUtils.isEmpty(password.getText())){
password.setShakeAnimation();
showToast("密碼不能為空");
return;
}
}
});
}
/**
* 顯示Toast消息
* @param msg
*/
private void showToast(String msg){
if(mToast == null){
mToast = Toast.makeText(this, msg, Toast.LENGTH_SHORT);
}else{
mToast.setText(msg);
}
mToast.show();
}
}
運行項目，如圖，悲劇，沒有動畫效果，算了就這樣子吧，你是不是也想把它加到你的項目當(dāng)中去呢，趕緊吧！
以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)Android軟件編程有所幫助。
相關(guān)文章
Android9.0 SystemUI 網(wǎng)絡(luò)信號欄定制修改的流程解析
這篇文章主要介紹了Android9.0 SystemUI 網(wǎng)絡(luò)信號欄定制修改的流程，本文通過圖文實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
本篇文章主要介紹了Android中實現(xiàn)密碼的隱藏和顯示的示例，非常具有實用價值，需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)語音合成與識別功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
flutter 自定義websocket路由的實現(xiàn)
這篇文章主要介紹了flutter 自定義websocket路由的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
在啟動欄制作android studio啟動圖標(biāo)
這篇文章主要介紹了在啟動欄制作android studio啟動圖標(biāo)的相關(guān)知識,需要的朋友可以參考下2018-03-03
Android 中打開pdf文件也是一種很常見的場景，本文主要介紹了Android打開本地pdf文件的方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要分享提升android運行效率的建議,如何讓安卓程序在有限的內(nèi)存和電池資源下流暢快速有效率的運行，下面給大家分享下面給出了10種實踐中的建議,需要的朋友可以參考一下2021-11-11
最近做了個自定義鍵盤，但面對不同分辨率的機(jī)型其中數(shù)字鍵盤不能根據(jù)界面大小自已鋪滿，但又不能每種機(jī)型都做一套吧，所以要做成自適應(yīng)，那這里主講思路，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
Android中Fab(FloatingActionButton)實現(xiàn)上下滑動的漸變效果
這篇文章主要給大家介紹了Android中FloatingActionButton（簡稱FAB）是如何實現(xiàn)上下滑動的漸變效果，文中給出了詳細(xì)的示例代碼，相信對大家具有一定的參考價值，有需要的朋友們可以一起看看吧。2017-02-02
本篇文章通過實例給大家分享了Android自定義View實現(xiàn)打鉤動畫功能的過程和代碼分享，有興趣需要的學(xué)習(xí)下吧。2017-12-12