Android High Imitation micro-letter payment Password input control _android

Like a micro-credit-payment password control, it's a commonplace feature in app. Recently, the project needs this function, and thus the implementation of this function.
The old way, the shot needs to find the angle, becomes needs to clarify the thought. For this "small but beautiful" control, we should be thinking like this.

Ⅰ, the number of password will be entered dynamically through the code to load out.

Ⅱ, using the GridView simulation to produce an input numeric keypad, and follow the habit of bouncing out from the bottom of the screen.

Ⅲ, the input numeric keypad for event monitoring, this input number into this password box, and when you enter the password length consistent, the event callback.

The mind map should be like this:

First, we will dynamically load the password box according to the requirement, the corresponding code is as follows:

 for (int i = 0; i < 6; i++) {TextView TextView = new TextView (context); Android.widget.LinearLayout.LayoutParams layoutparams = new Android.widget.LinearLayout.LayoutParams (0, Android.wid Get.
   LinearLayout.LayoutParams.WRAP_CONTENT, 1);
   Textview.setgravity (Gravity.center);
   Textview.settransformationmethod (Passwordtransformationmethod.getinstance ());
   Textview.settextsize (32);
   Textview.setlayoutparams (Layoutparams);
   Ll_pwd.addview (TextView);
    if (I!= 5) {View View2 = new view (context); Android.widget.LinearLayout.LayoutParams layoutParams1 = new Android.widget.LinearLayout.LayoutParams (1, Andr
    Oid.widget.LinearLayout.LayoutParams.MATCH_PARENT, 0);
    View2.setlayoutparams (LAYOUTPARAMS1);
    View2.setbackgroundcolor (Color.parsecolor ("#999999"));

   Ll_pwd.addview (VIEW2);
  } Tvlist[i] = TextView; }

We're here. The password length is set to 6, and the 6 Password box controls are added to the parent control of the control, and there is a separate control in each password control. and put each password input control into the control array so that we can do the next action.

Then, we use the GridView to generate a 12 Sudoku analog numeric keypad, so the analog keyboard looks like this:

The source code should be like this:

 /** * Code to load data */private void InitData () {/* the number that should be displayed on the initialization button (int i = 1; i < i++) {Map<stri
   Ng, string> map = new hashmap<string, string> ();
   if (I < ten) {map.put ("name", string.valueof (i));
   else if (i = = ten) {map.put ("name", "");
   else if (i = = one) {map.put ("name", string.valueof (0));
   else if (i = =) {map.put ("name", "X");
   else {map.put ("name", "");
  } valuelist.add (map);
  } gridview.setadapter (adapter); Gridview.setonitemclicklistener (New Adapterview.onitemclicklistener () {@Override public void Onitemclick (Adaptervie W<?> Parent, view view, int position, long id) {if (Position < && position!= 9) {//click 0~9 Press button if (currentindex >=-1 && currentindex < 5) {//Judge input position ———— be careful with array bounds Tvlist[++currentindex].sette
     XT (Valuelist.get (position). Get ("name")); } else {if (position = 11) {//DOT Repulse bar if (currentinDex-1 >=-1) {//judge whether the deletion is complete ———— to be careful of the array of bounds Tvlist[currentindex--].settext ("");
 }
     }
    }
   }
  }); /** * Grideview Adapter */Baseadapter adapter = new Baseadapter () {@Override public int getcount () {Retu
  RN Valuelist.size ();
  @Override public Object getitem (int position) {return valuelist.get (position);
  @Override public long getitemid (int position) {return position; @SuppressWarnings ("deprecation") @Override public View getview (int position, View Convertview, ViewGroup parent)
   {Viewholder viewholder;
    if (Convertview = = null) {Convertview = View.inflate (context, r.layout.item_gride, null);
    Viewholder = new Viewholder ();
    Viewholder.btnkey = (TextView) convertview. Findviewbyid (R.id.btn_keys);
   Convertview.settag (Viewholder);
   else {Viewholder = (Viewholder) convertview.gettag ();
   } viewHolder.btnKey.setText (Valuelist.get (position). Get ("name"); if (position = = 9| | Position==11) {viewHolder.btnKey.setBackgroundDrawable (utils.getstatelistdrawable (context));
   ViewHolder.btnKey.setEnabled (FALSE);
   } if (position = =) {viewHolder.btnKey.setBackgroundDrawable (utils.getstatelistdrawable (context));
  return convertview;
 
 
 }
 };
 /** * Store Control/Public final class Viewholder {public TextView btnkey; 
 }

Load the data on the emulated keyboard to 0-9 and X, and then populate the data with this GridView control with an adapter. These are old drivers ' routines. By convention, this analog keyboard should pop up from the bottom of the screen, and what I do here is to attach the GridView to the Popupwindow and then eject it from the bottom of the screen. The corresponding code is as follows:

View Contentview = layoutinflater.from (context). Inflate (
    r.layout.layout_popupdemo, NULL);//define Back Popup
  GridView = (GridView) Contentview.findviewbyid (R.id.gv_keybord);//Bubble window layout 
 Popupwindow = new Popupwindow ( Contentview,
    viewgroup.layoutparams.match_parent,//width

    ViewGroup.LayoutParams.WRAP_CONTENT);//Higth
  popupwindow.setfocusable (false);
  Popupwindow.setanimationstyle (r.style.animation);
   Eject public
void Show () {
  popupwindow.showatlocation (rl_bottom, gravity.bottom, 0, 0) from the bottom;//determine where to appear in the interface
 }
 @Override public
 void Onwindowfocuschanged (Boolean haswindowfocus) {
  super.onwindowfocuschanged ( Haswindowfocus);
  Show ();
 }

When the control is loaded, it pops up.

Finally, we have to do is to monitor the analog keyboard, the analog keyboard input into the password box, said seemingly very tall, is actually listening to the Onitemclick event of the GridView, the corresponding code is as follows:

Gridview.setonitemclicklistener (New Adapterview.onitemclicklistener () {
   @Override public
   void Onitemclick ( Adapterview<?> Parent, view view,
     int position, long id) {
    if (position < && position!= 9) { Click the 0~9 button
     if (currentindex >=-1 && currentindex < 5) {//judge the input position ———— be careful with array bounds
      Tvlist[++currentindex ].settext (Valuelist.get (position)
        . Get ("name"));
     }
    else {
     if (position = = 11) {//dot Repel bar
      if ( CurrentIndex-1 >=-1) {//judge whether the deletion is complete ———— to be careful array
       tvlist[currentindex--].settext ("");}}}
  });

If the user clicks the number 0-9, fills in the password box, if is the point to repel the key, then deletes the corresponding password box the content. See, the List of text box arrays used above is useful. Here it is worth pointing out that because the BACKSPACE key click Effect is different, I apply code here to set his style.

When the user's last password box is completed, the callback that completes the input is done, and the corresponding code is:

Sets the listener method to trigger the public
 void Setonfinishinput (final onpasswordinputfinish pass) {tvlist[5] after the 6th digit entry completes
  . Addtextchangedlistener (New Textwatcher () {
   @Override public
   void beforetextchanged (charsequence s, int start, int count,
     int after) {

   }

   @Override public
   void ontextchanged (charsequence s, int start, int before,
     int count) {

   }

   @Override public
   void aftertextchanged (Editable s) {
    if s.tostring (). Length () = 1) {
     strpassword = ""; Each trigger must first be strpassword empty, and then retrieved, to avoid confusion due to input deletion and then input caused chaos for
     (int i = 0; i < 6; i++) {
      strpassword = Tvlist[i].gettext (). toString (). Trim ();
     }
     if (pass!=null) {
      pass.inputfinish ()//interface to implement the method to complete the password input after the completion of the response Logic}}}
  );

After some toss, finished, the final effect is as follows:

SOURCE Download: Http://xiazai.jb51.net/201608/yuanma/Android-MyPayUI (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.