[Android] Custom with delete input box

In project development, with the Delete button input box is also commonly used by people, the article describes how to create a box with the delete input. Among them, the problems to be addressed are as follows:

A) Create a custom EditText class

b) Display the delete picture in the custom EditText

c) Show or hide the image based on input from the input box

d) Click Delete Picture text disappears, picture hidden

e) Show or hide the picture based on the loss and gain status of the input box focus

OK, the problem is clear, start to implement the function:

A) Create a class file named Myclearedittext, and integrate the EditText to implement its construction method:

Public Myclearedittext (Context context) {This (context, null);//TODO auto-generated constructor Stub}public Myclearedittext (context context, AttributeSet Attrs) {This (context, Attrs, Android. R.attr.edittextstyle);//TODO auto-generated Constructor Stub}public Myclearedittext (context context, AttributeSet attrs, int defstyle) {Super (context, attrs, Defstyle);}

OK, the first problem is solved, go to step two.

b) in the EditText, if we want to display the next and the left and right direction of the picture, with a setcompounddrawables or Setcompounddrawableswithintrinsicbounds method, specific words, you can go to Baidu a bit of its differences, Here, I'm using the Setcompounddrawableswithintrinsicbounds method. The code is as follows:

/** * Initialize cleared picture */private void initcleardrawable () {draw = Getcompounddrawables () [2];//determines whether the cleared picture is empty if (draw = = null) {Draw = Getresources (). getdrawable (R.drawable.editdelete);} Set the picture for the input box this.setcompounddrawableswithintrinsicbounds (null, NULL, draw, NULL);}

The idea is: first find edittext in the right of the picture, if NULL, set the default picture for it, and then display the picture for the input box, then get the effect:

c) If you need to get the input box, implement the Textwatcher interface.

Listening:

This.addtextchangedlistener (this);

Methods that need to be implemented:

public void ontextchanged (charsequence text, int start, int lengthbefore,int lengthafter) {//Determines if the input box has content if (Text.length ( ) > 0) {this.setcompounddrawableswithintrinsicbounds (null, NULL, draw, NULL);} else { This.setcompounddrawableswithintrinsicbounds (NULL, NULL, NULL, NULL);}} public void beforetextchanged (Charsequence s, int. start, int count,int after) {//TODO auto-generated method Stub}public V OID aftertextchanged (Editable s) {//TODO auto-generated method stub}

d) How to monitor is click to delete the picture, this is a question to think about, here, there is a solution, that is, contact monitoring, according to the location of the click to determine whether the image in the range of location:

@Overridepublic boolean ontouchevent (Motionevent event) {//To determine if the touch is over if (event.getaction () = = motionevent.action_up) {// Determine if the position touched is a clear button if (Event.getx () > (GetWidth ()-gettotalpaddingright ()) && Event.getx () < (getwidth ()- Getpaddingright ())) {//EditText the contents inside the SetText ("");}} Return Super.ontouchevent (event);}

After implementing the above steps, the approximate custom delete input box function can be implemented, but there are some problems, if there are two input boxes, when you enter the text into one of the input boxes, click another input box, the previous input box will still display the deletion picture, the solution is as follows:

e) Since it is based on the focus of gain and loss to judge, of course, to achieve focus monitoring method:

@Overrideprotected void Onfocuschanged (Boolean focused, int direction,rect previouslyfocusedrect) {//TODO Auto-generated method Stubsuper.onfocuschanged (focused, direction, previouslyfocusedrect);//The operation if the judgment focus loses and gets Focused &&!this.gettext (). toString (). Equals ("")) {this.setcompounddrawableswithintrinsicbounds (null, NULL , draw, null);} else {this.setcompounddrawableswithintrinsicbounds (null, NULL, NULL, NULL);}}

OK, the full version of the custom with the Delete input box is fully implemented. For the convenience of learning, the following is the complete code:

Package Com.xiaoyan.xiaoyanlibrary.common.widget.edittext;import Com.xiaoyan.xiaoyanlibrary.r;import Android.content.context;import Android.graphics.rect;import Android.graphics.drawable.drawable;import Android.text.editable;import Android.text.textwatcher;import Android.util.attributeset;import Android.view.motionevent;import android.widget.edittext;/** * Customize a EditText with clear function * * @author Xiejinxiong * */public cl Myclearedittext extends EditText implements Textwatcher {/** store erased pictures */private drawable draw;public myclearedittext (C Ontext context) {This (context, null);//TODO auto-generated Constructor Stub}public Myclearedittext (context context, AttributeSet attrs) {This (context, Attrs, Android. R.attr.edittextstyle);//TODO auto-generated Constructor Stub}public Myclearedittext (context context, AttributeSet attrs, int defstyle) {Super (context, attrs, Defstyle); initcleardrawable (); This.addtextchangedlistener (this);} @Overrideprotected void Onfocuschanged (Boolean focused, int direction, Rect previouslyfocusedrect) {//TODO auto-generated method Stubsuper.onfocuschanged (focused, direction, Previouslyfocusedrect);//Determine the focus loses and gets when the operation if (focused &&!this.gettext (). toString (). Equals ("")) { This.setcompounddrawableswithintrinsicbounds (null, NULL, draw, NULL);} else {this.setcompounddrawableswithintrinsicbounds (null, NULL, NULL, NULL);}} /** * Initialize cleared picture */private void initcleardrawable () {draw = Getcompounddrawables () [2];//determines whether the cleared picture is empty if (draw = = null) {Draw = Getresources (). getdrawable (R.drawable.editdelete);} Sets the input box by default to a button that is not cleared this.setcompounddrawableswithintrinsicbounds (null, NULL, NULL, NULL);} public void ontextchanged (charsequence text, int start, int lengthbefore,int lengthafter) {//Determines if the input box has content if (Text.length ( ) > 0) {this.setcompounddrawableswithintrinsicbounds (null, NULL, draw, NULL);} else { This.setcompounddrawableswithintrinsicbounds (NULL, NULL, NULL, NULL);}} public void beforetextchanged (Charsequence s, int. start, int count,int after) {//TODO auto-generated Method Stub}public void Aftertextchanged (Editable s) {//TODO auto-generated Method stub} @Overridepublic Boolean Ontouche Vent (Motionevent Event) {//determines if the touch ends if (event.getaction () = = motionevent.action_up) {//determines if the position touched is a clear button if (Event.getx ( ) > (GetWidth ()-gettotalpaddingright ()) && Event.getx () < (getwidth ()-getpaddingright ())) {//EditText The contents of the polygon are cleared SetText ("");}} Return Super.ontouchevent (event);}}

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

[Android] Custom with delete input box