Android for EditText with erase effect (with jitter effect)

Android has never provided an input box similar to the erase effect in iOS (iOS can be implemented as long as you add a property), so you need to implement this in Android by using a custom control.

Idea: You can use a linearlayout inside the horizontal layout of a edittext and a deleted picture, listen to the input box focus and text changes, set the image of the explicit and click to clear the event. However, to do so, the first increase in the UI layout hierarchy is not conducive to the optimization of the UI structure and may appear too long to block the picture of the situation. Therefore, the custom control inherits from the EditText, uses the getcompounddrawables to obtain the picture which adds to the left and right, through listens the focus change and the input content change to control the surrounding picture the explicit concealment as well as clears the event, (also has attached a shaking animation, For example, if the input is empty when registering, you can make a shaking hint).

The principle is very simple directly on the code:

public class Clearedittext extends EditText implements Onfocuschangelistener,textwatcher {/** * Delete a reference to a button */    Private drawable mcleardrawable;    Private Boolean Hasfoucs;    Public Clearedittext (Context context) {This (context, NULL); } public Clearedittext (context context, AttributeSet attrs) {//Here The constructor method is also important, without this many properties can no longer define this in XML (Conte XT, Attrs, Android.    R.attr.edittextstyle);        } public Clearedittext (context context, AttributeSet attrs, int defstyle) {Super (context, attrs, Defstyle);    Init (); } private void Init () {///Get EditText drawableright, if not set we will use the default picture, 2 is to get to the right of the picture order is left upper right bottom (0,1,2,3,) Mcleard        rawable = Getcompounddrawables () [2]; if (mcleardrawable = = null) {//throw new//NullPointerException ("You can add drawableright attrib            Ute in XML ");        mcleardrawable = Getresources (). getdrawable (R.drawable.delete_selector); } mcleardrawable.setbounds (0, 0, McleaRdrawable.getintrinsicwidth (), Mcleardrawable.getintrinsicheight ());        The default setting hides the icon setcleariconvisible (false);        Set Focus Change monitoring Setonfocuschangelistener (this);    Sets the monitor addtextchangedlistener (this) where the contents of the input box change; }/** * Because we can't set the click event directly to EditText, so we'll use the location we pressed to simulate the click event when we press the position in the edittext width-* icon to the right of the control spacing-the width of the icon and the EditText Width-icon to the right of the control between the spacing we even click on the icon, the vertical direction is not considered */@Override public boolean ontouchevent (Motionevent event) {if (EV Ent.getaction () = = motionevent.action_up) {if (Getcompounddrawables () [2]! = NULL) {Boolean TOU Chable = Event.getx () > (GetWidth ()-gettotalpaddingright ()) && (Event.getx () < ((GetWidth ()-Getpaddingri                Ght ())));                if (touchable) {This.settext ("");    }}} return Super.ontouchevent (event); }/** * When the clearedittext focus changes, determine the length of the string to set the clear icon display and hide */@Override public void onfocusChange (View V, boolean hasfocus) {this.hasfoucs = Hasfocus;        if (hasfocus) {setcleariconvisible (GetText (). Length () > 0);        } else {setcleariconvisible (false); }}/** * Set clear icon display and hide, call setcompounddrawables for edittext draw up * * @param visible */protected void        Setcleariconvisible (Boolean visible) {drawable right = visible mcleardrawable:null;    Setcompounddrawables (Getcompounddrawables () [0],getcompounddrawables () [1], right, Getcompounddrawables () [3]);  }/** * The callback method when the contents of the input box are changed */@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) {}/** * Set shake animation */public void setshakeanimation (){This.setanimation (Shakeanimation (5)); }/** * Shaking animation * * @param counts * 1 seconds shaking how many next * @return */public static Animation s        hakeanimation (int counts) {Animation translateanimation = new Translateanimation (0, 10, 0, 0);        Set up a loop accelerator, which uses the number of passes to have the effect of swinging.        Translateanimation.setinterpolator (New Cycleinterpolator (counts));        Translateanimation.setduration (500);    return translateanimation; }}

Here is the use of the custom control XML:

<com.exmaple.clearedittext                android:id= "@+id/etusername"                android:layout_width= "Fill_parent                " android:layout_height= "30dip"                android:background= "@null"                android:drawableleft= "@drawable/user_login"                android:drawablepadding= "7dip"                android:hint= "@string/str_hit_inputname"                android:singleline= "true"                android:textsize= "17SP" >                <requestfocus/>            </com.exmaple.ClearEditText>

The following are: