Android Program Development Prevention Password input error password clear text display function _android

In the use of the app, the first login requires the user to enter the password, some friends for the sake of security, the password setting is long, resulting in many times the password input errors, seriously affecting the user experience effect. This point mobile developers to do a good job, because the privacy of the phone is relatively strong, in the input password, you can display input, enhance accuracy, enhance the user experience degree. This, of course, comes at a cost, requiring additional coding capabilities. Below through this article to explain how to write the password clear text display function, for reference only.

The source of this article GitHub download address

Points

(1) Rewrite edittext, add a hint password to display and hide the picture.

(2) to determine the location of the click, switch edittext password display status.

(3) Keep the state information of the picture when the screen is rotated or the configuration changes.

Realize only one class and two picture resources, we can freely customize.

1. Layout style

Two types of password display style, one is the general display, one is textinputlayout display.

 <linearlayout android:id= "@+id/main_ll_container_1" match _parent "android:layout_height=" 40DP "android:gravity=" center "> <textview android:layout_width=" wrap_content "Android:layout_height=" wrap_content "android:text=" Password: "android:textsize=" 20sp "/> <me.chunyu.spike.wcl_ Password_input_demo. Passwordedittext android:id= "@+id/main_pet_password" android:layout_width= "Match_parent" Wrap_content "android:gravity=" Center android:hint= "Please enter password"/> </LinearLayout> < Android.support.design.widget.TextInputLayout android:layout_width= "match_parent" android:layout_height= "Wrap_ Content "android:layout_below=" @+id/main_ll_container_1 "> <me.chunyu.spike.wcl_password_input_demo. Passwordedittext android:layout_width= "match_parent" android:layout_height= "wrap_content" center "Android:hint=" Please enter the password/> </android.support.design.widget.textinputlayout> 

Effect

2. Hint icon

Initialize the resources and layout, get the resources of the password picture, monitor the edittext, display the icon when there is text, hide the icon when there is no text.

Initialize layout public void Initfields (AttributeSet attrs, int defstyleattr) {if (attrs!= null) {//Get property information TypedArray styles
= GetContext (). Gettheme (). Obtainstyledattributes (Attrs, R.styleable.passwordedittext, defstyleattr, 0);
try {//According to the parameter, set icon Mshowpwdicon = Styles.getresourceid (R.styleable.passwordedittext_pet_iconshow, Mshowpwdicon);
Mhidepwdicon = Styles.getresourceid (R.styleable.passwordedittext_pet_iconhide, Mhidepwdicon);
finally {styles.recycle ();}} Password status Setinputtype (Editorinfo.type_class_text |
Editorinfo.type_text_variation_password); Addtextchangedlistener (New Textwatcher () {@Override public void beforetextchanged (charsequence s, int start, int count, I NT after) {} @Override public void ontextchanged (charsequence s, int start, int before, int count) {if (S.length () > 0) {///Showpasswordvisibilityindicator Display indicator (TRUE);} else {Misshowpwdicon = false; Restorepasswordiconvisibility (m
Isshowpwdicon); Showpasswordvisibilityindicator (FALSE); Hide indicator}} @OveRride public void aftertextchanged (Editable s) {}}); }

Setinputtype Set password state, Type_text_variation_password ciphertext state.

The Pet_iconshow property allows you to select a custom password hint picture.

3. Listening events

Click on the picture, toggle Show or hide the password, get the click Position, and the picture position compare, judge the event.

@Override public boolean ontouchevent (Motionevent event) {
if (mdrawableside = null) {
return Super.ontouchevent (event);
}
Final Rect bounds = Mdrawableside.getbounds ();
Final int x = (int) event.getrawx (); Click on the position
int iconx = (int) gettoprightcorner (). x;
Icon's position
int lefticon = Iconx-bounds.width ();
LOG.E (TAG, "x:" + x + ", Lefticon:" + Lefticon);
Greater than icon position to trigger click
if (x >= lefticon) {
togglepasswordiconvisibility ();//Transform state
event.setaction ( Motionevent.action_cancel);
return false;
}
Return Super.ontouchevent (event);
}

Switch between clear text or ciphertext's password

To set the status of a password indicator
private void Restorepasswordiconvisibility (Boolean isshowpwd) {
if (isshowpwd) {
//visual Password input
Setinputtype (Editorinfo.type_class_text | Editorinfo.type_text_variation_visible_password);
} else {
//non-visual password state
Setinputtype (Editorinfo.type_class_text | Editorinfo.type_text_variation_password);
}
Move cursor
setselection (GetText (). Length ());

4. Save state

Rewrite savedstate to save and restore the display picture information when you rotate the screen.

Store password status, display icon location
protected static class Pwdsavedstate extends Basesavedstate {
private final Boolean mshowing Icon;
Private Pwdsavedstate (Parcelable superstate, Boolean Showingicon) {
super (superstate);
Mshowingicon = Showingicon;
}
Private Pwdsavedstate (Parcel in) {
super (in);
Mshowingicon = in.readbyte ()!= 0;
}
public Boolean Isshowingicon () {return
mshowingicon;
}
@Override public
void Writetoparcel (Parcel destination, int flags) {
super.writetoparcel (destination, flags );
Destination.writebyte ((Byte) (Mshowingicon. 1:0));
public static final parcelable.creator<pwdsavedstate> Creator = new creator<pwdsavedstate> () {public
Pwdsavedstate Createfromparcel (Parcel in) {return to
new Pwdsavedstate (in)
;
} Public pwdsavedstate[] NewArray (int size) {return
new pwdsavedstate[size];
}

Animation effects

Now you can copy the class to the application, replace the picture resources, replace the display password box, give the user a better mobile end experience. Always pursue the ultimate, the pursuit of extraordinary.

About the development of the Android program to prevent password input error password clear text display function of the relevant knowledge to introduce you here, I hope to help you!