Powerful login Interface Android implementation code _android

Objective

A good application needs a good user experience of the login interface, now, many applications of the login interface has a user name, a key to delete the password, user name, password for the empty prompt, as well as the need to enter the verification code function. Look at the csdn of Daniel's article, in the mind also write a login interface to learn, many things are reference to other articles, combined. Talk less, and then see how it is achieved.

PS: Because lazy to pull the map. So the program's icon is very difficult to see.
Diagram when the program is run:

The first is that the layout file is not difficult.

<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: paddingleft= "@dimen/activity_horizontal_margin" android:paddingright= "@dimen/activity_horizontal_margin" Android :p addingtop= "@dimen/activity_vertical_margin" android:paddingbottom= "@dimen/activity_vertical_margin" tools: Context= ". Mainactivity "> <imageview android:id=" @+id/tv_login "android:src=" @drawable/ic_launcher "Android:layout_wi Dth= "Match_parent" android:layout_height= "Wrap_content" android:layout_alignparenttop= "true" android:gravity= " Center "/> <com.example.administrator.texttest.deletableedittext android:id=" @+id/tv_user "Android:layout_wi Dth= "Match_parent" android:layout_height= "wrap_content" android:textsize= "30DP" android:layout_below= "@id/tv_ Login "android:drawableleft=" @drawable/ic_launcher "android:drawableright="@drawable/ic_launcher" android:hint= "Please enter account" android:ems= "/> < Com.example.administrator.texttest.DeletableEditText android:id= "@+id/tv_psd" android:layout_width= "match_parent "Android:layout_height=" wrap_content "android:textsize=" 30DP "android:layout_below=" @id/tv_user "android:drawable left= "@drawable/ic_launcher" android:drawableright= "@drawable/ic_launcher" android:hint= "Please enter password" Android:inputtype = "Textpassword" android:ems= "/> <linearlayout android:id=" @+id/lyyanzhengma "android:orientation=" horizon Tal "Android:layout_width=" "Match_parent" android:layout_height= "wrap_content" android:layout_below= "@id/tv_psd" &G 
 T 
  <linearlayout android:id= "@+id/lyverify" android:orientation= "horizontal" android:layout_width= "Wrap_content" 
  android:layout_height= "Wrap_content" > <textview android:id= "@+id/tvhidea" android:layout_width= "70DP" android:layout_height= "70DP" android:visibility= "Gone" Android:gravity= "center" android:textsize= "30DP"/> <textview android:id= "@+id/tvhideb" android:layout_width= "70d 
  P "android:layout_height=" 70DP "android:visibility=" Gone "android:gravity=" center "android:textsize=" 30DP " /> <textview android:id= "@+id/tvhidec" android:layout_width= "70DP" android:layout_height= "70DP" Andro Id:visibility= "Gone" android:gravity= "center" android:textsize= "30DP"/> <textview android:id= "@+id/t" vhided "android:layout_width=" 70DP "android:layout_height=" 70DP "android:visibility=" Gone "android:gravity=" ce Nter "android:textsize=" 30DP "/> </LinearLayout> <linearlayout android:id=" @+id/iv_num "Androi d:orientation= "Horizontal" android:layout_width= "Wrap_content" android:layout_height= "wrap_content" > <Image View android:layout_height= "70DP" android:layout_width= "50DP" android:id= "@+id/ivnuma"/> <imageview A Ndroid:layout_height= "70DP "android:layout_width=" 50DP "android:id=" @+id/ivnumb "/> <imageview android:layout_height=" 70DP "an Droid:layout_width= "50DP" android:id= "@+id/ivnumc"/> <imageview android:layout_height= "70DP" Android:lay Out_width= "50DP" android:id= "@+id/ivnumd"/> </LinearLayout> <linearlayout android:orientation= "Hor Izontal "android:layout_height=" wrap_content "android:layout_width=" match_parent "> <edittext android:lay out_height= "Wrap_content" android:layout_width= "120DP" android:textsize= "30DP" android:id= "@+id/etcheck" Andro Id:maxlength= "4" android:singleline= "true" android:hint= "Verification Code"/> <textview android:layout_height= "Wrap_co  
  Ntent "android:layout_width=" wrap_content "android:text=" Results "android:id=" @+id/tvcheck "android:textsize=" 30DP " android:visibility= "Gone"/> </LinearLayout> </LinearLayout> <button android:id= "@+id/bt _login "android:text="Login "android:textsize=" 30DP "android:layout_below=" "@id/lyyanzhengma" android:layout_width= "Match_parent" android:l 
 ayout_height= "Wrap_content"/> </RelativeLayout>

The

is then loaded with some layout files, and some controls are initialized

Login button Private button btlogin; 
 Account Private Deletableedittext Useredittext; 
 
 
 Password private Deletableedittext psdedittext; 
 
 The digital text of the verification code private TextView tvhidea,tvhideb,tvhidec,tvhided; 
 Verification code of the picture text private ImageView IVNUMA,IVNUMB,IVNUMC,IVNUMD; 
 Validation code input text private EditText Etcheck; 
 
 Verification code detection shows the text private TextView Tvcheck; 
 The digital private String numstrtmp = "" That stores each authentication code; 
 
 The digital private String NUMSTR = "" That stores the entire authentication code; 
 Array of stored authentication codes private int[] Numarray = new Int[4]; 
 
 Array of stored colors private int[] Colorarray = new Int[6]; 
 @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); 
 Setcontentview (R.layout.activity_main); 
 
 Setupviews (); 
 private void Setupviews () {btlogin = (Button) Findviewbyid (R.id.bt_login); 
 Btlogin.setonclicklistener (New Onclicklistenerimpl ()); 
 Useredittext = (deletableedittext) Findviewbyid (R.id.tv_user); 
 
 
 Psdedittext = (deletableedittext) Findviewbyid (R.ID.TV_PSD); Tvhidea = (TextView) Findviewbyid (R.id.tvhidea); 
 Tvhideb = (TextView) Findviewbyid (r.id.tvhideb); 
 Tvhidec = (TextView) Findviewbyid (R.ID.TVHIDEC); 
 
 tvhided = (TextView) Findviewbyid (r.id.tvhided); 
 Ivnuma = (ImageView) Findviewbyid (R.id.ivnuma); 
 Ivnumb = (ImageView) Findviewbyid (R.ID.IVNUMB); 
 IVNUMC = (ImageView) Findviewbyid (R.ID.IVNUMC); 
 
 IVNUMD = (ImageView) Findviewbyid (R.ID.IVNUMD); 
 Ivnuma.setonclicklistener (New Onclicklistenerimpl ()); 
 Ivnumb.setonclicklistener (New Onclicklistenerimpl ()); 
 Ivnumc.setonclicklistener (New Onclicklistenerimpl ()); 
 
 Ivnumd.setonclicklistener (New Onclicklistenerimpl ()); 
 Tvcheck = (TextView) Findviewbyid (R.id.tvcheck); 
 
 Etcheck = (edittext) Findviewbyid (R.id.etcheck);  Setnum ();

Customizing the EDITTEXT implementation process:

train of thought: set up two Eidttext, in this edittext each set the icon. The left icon prompts for the account and password icon, and the right icon is deleted for one click. Because the icon in the EditText does not have the OnClick event, in order to achieve the click of a key delete effect so to use the Ontouchevent callback method, listening to click events to determine the implementation of a key deletion. When the account and password do not have characters, the right one-click delete icon settings hidden, when there are characters, the set icon to display. When clicked to the right icon range, deletes the character of the line. thereby implementing one-click deletion. In addition, when the account and password are empty and want to log on. The two lines of jitter hint.
No more nonsense, directly on the code annotation is very clear.

Package com.example.administrator.texttest; 
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.animation.Animation; 
Import Android.view.animation.CycleInterpolator; 
Import android.view.animation.TranslateAnimation; 
 
Import Android.widget.EditText; 
 /** * Created by the Administrator on 2015-10-10. 
 * * public class Deletableedittext extends EditText {private drawable mrightdrawable; 
 
 
 
 Private Boolean Ishasfocus; 
 Public Deletableedittext {This (context, NULL); Public Deletableedittext (context, AttributeSet attrs) {This (context, Attrs, Android.) 
 R.attr.edittextstyle); Deletableedittext (context, AttributeSet attrs, int defstyleattr) {Super (context, Attrs, defstyleat 
 TR); 
 Setupviews (); Private VoiD setupviews () {//Take the top and bottom left margin of view drawable[] Drawables = This.getcompounddrawables (); 
 
 Get right position drawable//that we set in the layout file android:drawableright mrightdrawable = drawables[2]; 
 Set the monitoring This.setonfocuschangelistener for focus changes (new Focuschangelistenerimpl ()); 
 Set the EditText text-changing listening this.addtextchangedlistener (new Textwatcherimpl ()); 
 
 
 
 Let the right clean icon not be visible setcleardrawablevisible (false) when initialized; @Override public boolean ontouchevent (Motionevent event) {switch (event.getaction ()) {//To determine the click position when the click is released. 
  Only the X-axis direction is judged here. Case MOTIONEVENT.ACTION_UP://Decide whether to click on the icon area on the right side Boolean Isclean = (Event.getx () > (GetWidth ()-Gettotalpaddingrigh 
  T ()) && (Event.getx () < (getwidth ()-getpaddingright ())); 
  if (Isclean) {//Clear character SetText (""); 
 
  } break; 
 Default:break; 
 Return Super.ontouchevent (event); Private class Focuschangelistenerimpl implements Onfocuschangelistener {@Override public void Onfocuschange (Vie W V, BOOLEan hasfocus) {ishasfocus = Hasfocus; 
  if (Ishasfocus) {Boolean isVisible = GetText (). toString (). Length () >= 1; 
  Setcleardrawablevisible (isVisible); 
  else {setcleardrawablevisible (false); Verify that the right clean icon is displayed when the input is finished private class Textwatcherimpl implements Textwatcher {@Override public vo 
  ID aftertextchanged (Editable s) {//When a word characters is true boolean isVisible = GetText (). toString (). Length () >= 1; 
 Displays the icon on the right setcleardrawablevisible (isVisible); @Override public void beforetextchanged (charsequence s, int start, int count, int on) {} @Overri De public void ontextchanged (charsequence s, int start, int before, int count) {}}///Hide or show the right clean map 
 Superscript protected void Setcleardrawablevisible (Boolean isVisible) {drawable rightdrawable; 
 if (isVisible) {rightdrawable = mrightdrawable; 
 else {rightdrawable = null; ///Use code to set the icon at the right of the control Setcompounddrawables (Getcompounddrawables ()) [0], Getcompounddrawables () [1], rightdrawable, Getcompounddrawables () [3]); 
 
 //Show animation public void Setshakeanimation () {this.startanimation (Shakeanimation (5)); }//Cycletimes animation repeat number of times public Animation shakeanimation (int cycletimes) {//Set offset animation where new translateanimation (0,10,0, 
 10) Four values are represented as x coordinates from 0-->10,y coordinates from 0-->10 Animation translateanimation = new Translateanimation (0, 10, 0, 10); 
 Set the number of animations Translateanimation.setinterpolator (new Cycleinterpolator (Cycletimes)); 
 Set animation interval translateanimation.setduration (1000); 
 return translateanimation; 

 } 
 
}

The knowledge to be noted:

1.drawable[] Drawables = This.getcompounddrawables (); Get the drawable of this view. The Getcompounddrawables () method gets 4 drawable objects that correspond to the left, top, right, and bottom margins of this view respectively.

2.boolean Isclean = (Event.getx () > (GetWidth ()-gettotalpaddingright ()) && (Event.getx () < (getwidth ()-G  Etpaddingright ())); Determine if the clicked area is the right icon range. where Event.getx () is the size of the X coordinate of the clicked position. Detailed as shown in the following figure:

3.Animation translateanimation = new Translateanimation (0, 10, 0, 10); Set offset animation where the new Translateanimation (0,10,0,10) four values are represented as x coordinates from 0-->10,Y coordinates from 0-->10

4.this.setonfocuschangelistener (New Focuschangelistenerimpl ()); The purpose of setting focus changes is to be more humane. When the focus is on this line and there is a character Fu Shicai display a button to delete the icon. The icon is hidden when the row is not on.

5.this.addtextchangedlistener (New Textwatcherimpl ()); Set text change listening. There are 3 methods in the new textwatcher{}. respectively:

1. public void beforetextchanged (charsequence s, int start, int count,int after) {}
2. public void ontextchanged (charsequence s, int start, int before,int count) {}
3). public void aftertextchanged (Editable s) {}
We just need to add the method that you want to implement in Aftertextchanged () {Editable s}{}. When the monitor hears text changes, set the right icon to display.

Textwatcher {
 @Override public
 void aftertextchanged (Editable s) {
 //When a word characters is true
 boolean isVisible = GetText (). toString (). Length () >= 1;
 Displays the icon to the right
 setcleardrawablevisible (isVisible);
 }

Verification Code implementation process:

train of thought: set 4 ImageView. First randomly generated 4 of 10 of the number stored in the array. and record the entire verification code. The Bitmap.createbitmap method is used to translate these 4 numbers into pictures and set the random color. Each digital picture transforms at a random setting rotation angle to make these 4 digital icons tilt to a certain angle. The verification code is generated.

The process of verifying the verification code is only simulated: the input verification code is compared with the recorded verification code. The same hint is correct and different prompts are wrong. and resets the verification code.

Clicking on the verification Code image area also resets the verification code.
The code's comments are detailed. On the Code ~ ~ ~:

Package com.example.administrator.texttest; 
Import Android.graphics.Bitmap; 
Import Android.graphics.Canvas; 
Import Android.graphics.Color; 
Import Android.graphics.Matrix; 
Import android.support.v7.app.AppCompatActivity; 
Import Android.os.Bundle; 
Import Android.text.TextUtils; 
Import Android.view.Menu; 
Import Android.view.MenuItem; 
Import Android.view.View; 
Import Android.widget.Button; 
Import Android.widget.EditText; 
Import Android.widget.ImageView; 
Import Android.widget.TextView; 
 
Import Android.widget.Toast; 
 
Import Java.util.Random; 
 public class Mainactivity extends Appcompatactivity {//Login button private button btlogin; 
 Account Private Deletableedittext Useredittext; 
 
 
 Password private Deletableedittext psdedittext; 
 
 The digital text of the verification code private TextView tvhidea,tvhideb,tvhidec,tvhided; 
 Verification code of the picture text private ImageView IVNUMA,IVNUMB,IVNUMC,IVNUMD; 
 Validation code input text private EditText Etcheck; 
 
 Verification code detection shows the text private TextView Tvcheck; The numeric private String that stores each authentication codeNumstrtmp = ""; 
 
 The digital private String NUMSTR = "" That stores the entire authentication code; 
 Array of stored authentication codes private int[] Numarray = new Int[4]; 
 
 Array of stored colors private int[] Colorarray = new Int[6]; 
 @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); 
 Setcontentview (R.layout.activity_main); 
 
 Setupviews (); 
 private void Setupviews () {btlogin = (Button) Findviewbyid (R.id.bt_login); 
 Btlogin.setonclicklistener (New Onclicklistenerimpl ()); 
 Useredittext = (deletableedittext) Findviewbyid (R.id.tv_user); 
 
 
 Psdedittext = (deletableedittext) Findviewbyid (R.ID.TV_PSD); 
 Tvhidea = (TextView) Findviewbyid (R.id.tvhidea); 
 Tvhideb = (TextView) Findviewbyid (r.id.tvhideb); 
 Tvhidec = (TextView) Findviewbyid (R.ID.TVHIDEC); 
 
 tvhided = (TextView) Findviewbyid (r.id.tvhided); 
 Ivnuma = (ImageView) Findviewbyid (R.id.ivnuma); 
 Ivnumb = (ImageView) Findviewbyid (R.ID.IVNUMB); 
 IVNUMC = (ImageView) Findviewbyid (R.ID.IVNUMC); IVNUMD = (ImageView) findviewbyiD (R.ID.IVNUMD); 
 Ivnuma.setonclicklistener (New Onclicklistenerimpl ()); 
 Ivnumb.setonclicklistener (New Onclicklistenerimpl ()); 
 Ivnumc.setonclicklistener (New Onclicklistenerimpl ()); 
 
 
 
 Ivnumd.setonclicklistener (New Onclicklistenerimpl ()); 
 Tvcheck = (TextView) Findviewbyid (R.id.tvcheck); 
 
 
 
 
 Etcheck = (edittext) Findviewbyid (R.id.etcheck); 
 
 
 
 
 Setnum (); 
 private void Setnum () {initnum (); 
 Tvhidea.settext ("" + numarray[0]); 
 Tvhidea.settextcolor (Randomcolor ()); 
 Tvhideb.settext ("" + numarray[1]); 
 Tvhideb.settextcolor (Randomcolor ()); 
 Tvhidec.settext ("" + numarray[2]); 
 Tvhidec.settextcolor (Randomcolor ()); 
 Tvhided.settext ("" + numarray[3]); 
 
 
 Tvhided.settextcolor (Randomcolor ()); 
 Matrix Matrixa = new Matrix (); 
 Reset matrix Matrixa.reset (); 
 Matrixa.setrotate (Randomangle ()); 
 Bitmap Bmnuma = Bitmap.createbitmap (Getbitmapfromview (tvhidea,20,50), 0,0,20,50,matrixa,true); 
 
 Ivnuma.setimagebitmap (Bmnuma); 
 Matrix MATRIXB = new Matrix (); 
Reset Matrix Matrixb.reset (); 
 Matrixb.setrotate (Randomangle ()); 
 Bitmap bmnumb = Bitmap.createbitmap (Getbitmapfromview (tvhideb,20,50), 0,0,20,50,matrixb,true); 
 
 Ivnumb.setimagebitmap (BMNUMB); 
 Matrix MATRIXC = new Matrix (); 
 Reset matrix Matrixc.reset (); 
 Matrixc.setrotate (Randomangle ()); 
 Bitmap BMNUMC = Bitmap.createbitmap (Getbitmapfromview (tvhidec,20,50), 0,0,20,50,matrixc,true); 
 
 Ivnumc.setimagebitmap (BMNUMC); 
 Matrix matrixd = new Matrix (); 
 Reset matrix Matrixd.reset (); 
 Matrixd.setrotate (Randomangle ()); 
 Bitmap BMNUMD = Bitmap.createbitmap (Getbitmapfromview (tvhided,20,50), 0,0,20,50,matrixd,true); 
 
 Ivnumd.setimagebitmap (BMNUMD); Private Bitmap Getbitmapfromview (View v,int width,int height) {int widspec = View.MeasureSpec.makeMeasureSpec (wi 
 dth,view.measurespec.exactly); 
 int heispec = View.MeasureSpec.makeMeasureSpec (height,view.measurespec.exactly); 
 Redraw picture size v.measure (Widspec, Heispec); 
 V.layout (0, 0, width, height); Bitmap Bitmap = Bitmap.createbitmap (wIdth,height, Bitmap.Config.ARGB_8888); 
 Draw the picture Canvas Canvas = new Canvas (bitmap); 
 
 V.draw (canvas); 
 
 return bitmap; 
 //set random tilt angle private int randomangle () {return 20* (new Random (). Nextint (5)-new Random (). Nextint (3)); ///randomly generate color private int randomcolor () {colorarray[0]=0xff000000;//black colorarray[1] = 0xffff00ff;//MAGE NTA colorarray[2] = 0xffff0000; RED colorarray[3] = 0xff00ff00; GREEN colorarray[4] = 0xff0000ff; BLUE colorarray[5] = 0xff00ffff; 
 Cyan int randomcoloid = new Random (). Nextint (5); 
 
 
 
 
 return colorarray[randomcoloid]; 
 }//Initialize authentication code private void Initnum () {numstr= ""; 
 Numstrtmp= ""; 
  for (int i = 0; i < numarray.length i++) {//random generation 10 within the number int numinttmp = new Random (). Nextint (10); 
  Save each authentication code NUMSTRTMP = string.valueof (numinttmp); 
  Save the entire verification code NUMSTR = numstr+numstrtmp; 
 Numarray[i] = numinttmp; } Private class Onclicklistenerimpl implements View.onclicklisteneR {@Override public void OnClick (View v) {//When clicked for Login button if (v==btlogin) {//To determine whether the account character is empty, if (textutils.isemp 
   Ty (Useredittext.gettext (). toString ())) {//Is the space-time jitter hint useredittext.setshakeanimation (); 
  Toast.maketext (Mainactivity.this, "account or password cannot be empty", Toast.length_short). Show (); ///Determine if the password character is an empty if (Textutils.isempty (Psdedittext.gettext (). toString ())) {//is an empty time jitter hint Psdedittext.setshakeanima 
   tion (); 
  Toast.maketext (Mainactivity.this, "account or password cannot be empty", Toast.length_short). Show (); //Verify that the input verification code is correct if (Etcheck.gettext (). ToString ()!=null&&etcheck.gettext (). ToString (). Trim (). Length () > 
   0) {tvcheck.setvisibility (view.visible); 
   if (Numstr.equals (Etcheck.gettext (). toString ())) {Tvcheck.settextcolor (color.green); Tvcheck.settext ("Verify code is correct!) 
   "); 
   }else{Tvcheck.settextcolor (color.red); Tvcheck.settext ("Authentication code Error!) 
   "); 
   Etcheck.settext (""); 
   Setnum (); If the onclick is not a login button, there is only a listener event left in the Captcha picture. Equivalent to clicking on the verification code picture. 
  Change the verification code. 
}else {setnum ();  Tvcheck.setvisibility (View.gone); 
 } 
 
 
 } 
 } 
}

Knowledge to be aware of:
1.bitmap.createbitmap (Getbitmapfromview (tvhidea,20,50), 0,0,20,50,matrixa,true);
Bitmap.createbitmap (Bitmap source, int x, int y, int width, int height,matrix m, Boolean filter)
Bitmap Source: The original bitmap to take a screenshot from
int x: start x coordinates
int y: Starting y-coordinate
int width: The width of the graph to be truncated
int height: The height of the graph to truncate
When Boolean filter is not just a translation transformation, the filter parameter is true to filter, which helps to improve the quality of the new image; When flase, the computer does not do filter processing.

2.intwidSpec = View.MeasureSpec.makeMeasureSpec (width,view.measurespec.exactly);
int heispec = View.MeasureSpec.makeMeasureSpec (height,view.measurespec.exactly);
Sets the width and height of the view. View.MeasureSpec.EXACTLY refers to the size of the actual view that is set. That is, the width (height) of the front is how big.

3.bitmap.createbitmap (Width,height, Bitmap.Config.ARGB_8888); Create an icon.

4.Canvas Canvas =newcanvas (bitmap);
V.draw (canvas); Draw a picture

5.v.measure (Widspec, Heispec);
//v.layout (0,0, width, height); Redraw the size of the picture.

The following is a picture of the runtime:

When there is input to the right of a key delete icon display, when the focus is lost when a key delete icon hidden, click on the Verification Code update code:

The following is not a detailed illustration.

SOURCE Download: Http://xiazai.jb51.net/201610/yuanma/Androidlogin (jb51.net). rar

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.