Android custom input box EditView with Delete icon, Android editview

Android custom input box EditView with Delete icon, Android editview

In Android, the default Editview can only be used for text input. However, to delete the Editview, you can use the delete buttons of the Input Method to delete the Editview one by one. Currently, in many applications, A Delete image is displayed at the end of the input box. You can click it to clear all the data, which is convenient. Next we will implement it.

Let's take a look at it first:

Here, the delete icon is displayed only when the text in the input box is yes. If the input is empty, it will disappear. It is actually a custom Ediiview:

/*** There is a built-in delete button on the right of the input text box. When there is input, the delete button is displayed. If there is no input, the delete button is not displayed. * **/Public class ClearEditText extends EditText implements OnFocusChangeListener, TextWatcher {/*** reference of the delete button */private Drawable mClearDrawable; /*** control focus? */private boolean hasFoucs; public ClearEditText (Context context) {this (context, null);} public ClearEditText (Context context, AttributeSet attrs) {// The constructor is also very important here. Without this attribute, you cannot define this (context, attrs, android. r. attr. editTextStyle);} public Clea REditText (Context context, AttributeSet attrs, int defStyle) {super (context, attrs, defStyle); init () ;}private void init () {// obtain DrawableRight of EditText, if this parameter is not set, use the default image mClearDrawable = getCompoundDrawables () [2]; if (mClearDrawable = null) {// throw new // NullPointerException ("You can add drawableRight attribute in XML"); mClearDrawable = getResources (). getDrawable (R. drawable. button_login_delete);} mC LearDrawable. setBounds (0, 0, mClearDrawable. getIntrinsicWidth (), mClearDrawable. getIntrinsicHeight (); // by default, the hidden icon setClearIconVisible (false) is set. // setOnFocusChangeListener (this) is used to set a listener with a changed focus ); // set the listening addTextChangedListener (this);}/*** in the input box because we cannot directly set the click event for EditText, therefore, we use the place where we press it to simulate click events. When we press the position in the width of EditText-* The distance from the icon to the right of the control-the width of the icon and the width of EditText-the icon even if we click the icon between the spacing on the right side of the control, not considered in the vertical direction */@ Overridepublic bool Ean 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);}/*** when the ClearEditText focus changes, determine the display and hide of the clear icon in the string length settings */@ Overridepublic void onFocusChange (View v, boolean hasFocus) {this. hasFoucs = hasFocus; if (hasFocus) {setClearIconVisible (getText (). length ()> 0) ;}else {setClearIconVisible (false) ;}/ *** sets to clear and hide the icon, call setCompoundDrawables to draw EditText ** @ param visible */protected void setClearIconVisible (boolean visible) {Drawable right = visible? MClearDrawable: null; setCompoundDrawables (getCompoundDrawables () [0], getCompoundDrawables () [1], right, getCompoundDrawables () [3]);} /*** callback method when the content in the input box changes */@ Overridepublic void onTextChanged (CharSequence s, int start, int count, int after) {if (hasFoucs) {setClearIconVisible (s. length ()> 0) ;}@overridepublic void beforeTextChanged (CharSequence s, int start, int count, int after) {}@ Overridepublic void afterTextChanged (Editable s ){}}

We only need to replace Editview with our custom one when using it:

<Com. test. view. clearEditText android: id = "@ + id/edit_user" android: layout_width = "1px" android: layout_height = "fill_parent" android: layout_marginLeft = "10.0dip" android: layout_marginRight = "15.0dip" android: layout_weight = "3" android: background = "@ android: color/white" android: hint = "account/email/mobile phone number" android: inputType = "textPersonName" android: maxLength = "30" android: paddingLeft = "10.0dip" android: singleLine = "true" android: textSize = "16213sp"/>

In this way, we will have the desired effect. I will not provide the complete demo.