Android Imitation micro-letter/Alipay Password input box _android

When you use the Payment app, you have a simple, tight input box. The beginning of the implementation of the idea of a bit of a problem, and then went to the GitHub on the search, found an open source library looks pretty good, to address first:

Https://github.com/Jungerr/GridPasswordView

Effect Chart:

This open source library after I studied, and have a thought of their own: to a false simple box---the bottom of a edittextview, the top placed 6 ImageView origin, control their explicit to achieve this Jiangmichon

Development steps:

1 layout

<?xml version= "1.0" encoding= "Utf-8"?> <framelayout xmlns:android= "http://schemas.android.com/apk/res/" Android "style=" @style/common_hm_vw "android:layout_height=" 50DP "> <linearlayout android:baselinealigned=" False "Android:layout_width=" Match_parent "android:layout_height=" 50DP "android:background=" @drawable/sdk2_simple _pwd_bg_ "android:orientation=" horizontal "> <relativelayout style=" @style/common_ho_vm "android:layou t_weight= "1" android:orientation= "horizontal" > <imageview android:id= "@+id/sdk2_pwd_one_img" Styl E= "@style/common_hm_vm" android:layout_centerinparent= "true" android:src= "@drawable/sdk_circle_icon" Android: visibility= "Invisible"/> <view android:layout_width= "1DP" android:layout_height= "Fill_parent" Androi D:layout_alignparentright= "true" android:background= "@color/sdk_color_pwd_line"/> </RelativeLayout> < Relativelayout style= "@style/common_ho_VM "android:layout_weight=" 1 "android:orientation=" horizontal "> <imageview android:id=" @+id/sdk2_ Pwd_two_img "style=" @style/common_hw_vw "android:layout_centerinparent=" true "android:src=" @drawable/sdk_circle_ Icon "android:visibility=" invisible "/> <view android:layout_width=" 1DP "android:layout_height=" f Ill_parent "android:layout_alignparentright=" true "android:background=" @color/sdk_color_pwd_line "/> </ relativelayout> <relativelayout style= "@style/common_ho_vm" android:layout_weight= "1" Android:orienta tion= "Horizontal" > <imageview android:id= "@+id/sdk2_pwd_three_img" style= "@style/common_hw_vw" Andro Id:layout_centerinparent= "true" android:src= "@drawable/sdk_circle_icon" android:visibility= "Invisible"/> & Lt 
 View android:layout_width= "1DP" android:layout_height= "Fill_parent" android:layout_alignparentright= "true" android:background= "@color/sdk_Color_pwd_line "/> </RelativeLayout> <relativelayout style=" @style/common_ho_vm "Android:layout_ weight= "1" android:orientation= "horizontal" > <imageview android:id= "@+id/sdk2_pwd_four_img" style = "@style/common_hw_vw" android:layout_centerinparent= "true" android:src= "@drawable/sdk_circle_icon" Android:visib ility= "Invisible"/> <view android:layout_width= "1DP" android:layout_height= "Fill_parent" Android:la Yout_alignparentright= "true" android:background= "@color/sdk_color_pwd_line"/> </RelativeLayout> <rela Tivelayout style= "@style/common_ho_vm" android:layout_weight= "1" android:orientation= "Horizontal" > ImageView android:id= "@+id/sdk2_pwd_five_img" style= "@style/common_hw_vw" android:layout_centerinparent= "Tru E "android:src=" @drawable/sdk_circle_icon "android:visibility=" invisible "/> <view android:layout_wid Th= "1DP" Android:layout_height= "Fill_parent" android:layout_alignparentright= "true" android:background= "@color/sdk_color_pwd_line"/&G 
  T </RelativeLayout> <relativelayout style= "@style/common_ho_vm" android:layout_weight= "1" android:or ientation= "Horizontal" > <imageview android:id= "@+id/sdk2_pwd_six_img" style= "@style/common_hw_vw" an 
   Droid:layout_centerinparent= "true" android:src= "@drawable/sdk_circle_icon" android:visibility= "invisible"/>    <view android:layout_width= "1DP" android:layout_height= "Fill_parent" android:layout_alignparentright= "true" 
  android:background= "@color/sdk_color_pwd_line"/> </RelativeLayout> </LinearLayout> <edittext Android:id= "@+id/sdk2_pwd_edit_simple" style= "@style/common_hm_vm" android:background= "@null" Android:cursorvi Sible= "false" Android:inputtype= "Numberpassword" android:maxlength= "6" android:textcolor= "@color/sdk2_color_black "/> </framelAyout>  

2: Customize a control to handle events such as input, deletion, explicit concealment

Package Com.suning.mobile.paysdk.view; 
Import Android.content.Context; 
Import android.text.Editable; 
Import Android.text.TextWatcher; 
Import Android.util.AttributeSet; 
Import android.view.KeyEvent; 
Import Android.view.LayoutInflater; 
Import Android.view.View; 
Import Android.widget.EditText; 
Import Android.widget.ImageView; 
Import Android.widget.LinearLayout; 
Import COM.SUNING.MOBILE.PAYSDK.R; 
Import Com.suning.mobile.paysdk.utils.FunctionUtils; 
Import Com.suning.mobile.paysdk.utils.log.LogUtils; /** * *〈 A sentence function brief 〉<br> *〈 function detailed description of simple dense input frame * * * public class Securitypasswordedittext extends the linearlayout {PR 
 Ivate EditText Medittext; 
 Private ImageView Onetextview; 
 Private ImageView Twotextview; 
 Private ImageView Threetextview; 
 Private ImageView Fourtextview; 
 Private ImageView Fivetextview; 
 Private ImageView Sixtextview; 
 Layoutinflater Inflater; 
 Imageview[] Imageviews; 
 View Contentview; Public Securitypasswordedittext, AttributeSET attrs) {super (context, attrs); 
  Inflater = Layoutinflater.from (context); 
  Builder = new StringBuilder (); 
 Initwidget (); 
  private void Initwidget () {Contentview = inflater.inflate (r.layout.sdk_simple_pwd_widget, NULL); 
  Medittext = (edittext) contentview. Findviewbyid (R.id.sdk_pwd_edit_simple); 
  Onetextview = (ImageView) contentview. Findviewbyid (R.ID.SDK_PWD_ONE_IMG); 
  Twotextview = (ImageView) contentview. Findviewbyid (R.ID.SDK_PWD_TWO_IMG); 
  Fourtextview = (ImageView) contentview. Findviewbyid (R.ID.SDK_PWD_FOUR_IMG); 
  Fivetextview = (ImageView) contentview. Findviewbyid (R.ID.SDK_PWD_FIVE_IMG); 
  Sixtextview = (ImageView) contentview. Findviewbyid (R.ID.SDK_PWD_SIX_IMG); 
  Threetextview = (ImageView) contentview. Findviewbyid (R.ID.SDK_PWD_THREE_IMG); Linearlayout.layoutparams lparams = new Layoutparams (LinearLayout.LayoutParams.MATCH_PARENT, linearlayout.layou 
  Tparams.wrap_content); Medittext.addtextchAngedlistener (Mtextwatcher); 
  Medittext.setonkeylistener (KeyListener); 
  Imageviews = new imageview[] {onetextview, Twotextview, Threetextview, Fourtextview, Fivetextview, SixTextView}; 
 This.addview (Contentview, lparams); Textwatcher mtextwatcher = new Textwatcher () {@Override public void ontextchanged (charsequence s, int start, 
    t before, int count) {} @Override public void beforetextchanged (charsequence s, int start, int count, int after) {} @Override public void aftertextchanged (Editable s) {if s.tostring (). Length () =) {RET 
   Urn 
    } if (Builder.length () <) {Builder.append (s.tostring ()); 
   Settextvalue (); 
  } s.delete (, s.length ()); 
 } 
 }; Onkeylistener KeyListener = new Onkeylistener () {@Override public boolean onkey (View v, int keycode, keyevent event {if (keycode = = Keyevent.keycode_del && event.getaction () = = keyevent.action_up) {Deltextvalue ( 
  );  return true; 
  return false; 
 } 
 }; 
  private void Settextvalue () {String str = builder.tostring (); 
  int len = Str.length (); 
  if (len <=) {imageviews[len-].setvisibility (view.visible); 
   } if (len = =) {logutils.i ("callback"); 
   LOGUTILS.I ("Payment password" + str); 
   if (Mlistener!= null) {mlistener.onnumcompleted (str); 
   } logutils.i ("Jone", builder.tostring ()); 
  Functionutils.hidesoftinputbyview (GetContext (), medittext); 
  } private void Deltextvalue () {String str = builder.tostring (); 
  int len = Str.length (); 
  if (len = =) {return; 
  } if (Len > && len <=) {builder.delete (Len-, Len); 
  } Imageviews[len-].setvisibility (view.invisible); 
 ; 
 } StringBuilder Builder; 
 Public interface Securityeditcomplelistener {public void onnumcompleted (String num); 
 Public Securityeditcomplelistener Mlistener; public void Setsecurityeditcomplelistener (Securityeditcomplelistener mlisteNER) {this.mlistener = Mlistener; 
   public void Clearsecurityedit () {if (builder!= null) {if (builder.length () =) {Builder.delete (,); 
  } for (ImageView tv:imageviews) {tv.setvisibility (view.invisible); 
 } public EditText Getsecurityedit () {return this.medittext;  } 
}

This is actually achieved a simple secret function, but this is much simpler than the previous open source Library, of course, the function is not in front of that strong.

The above content for you to introduce the Android imitation micro-letter/Alipay Password input box all the narrative, I hope you like.