Android High Imitation micro-letter Payment Digital keyboard function _android

Now many app's payment, the input password function, already started to use the custom numeric keypad, not only is more convenient, its effect is really exquisite.

Below with everyone to learn, how high imitation micro-letter digital keyboard, can be used directly in their own projects.

First look at the effect of the picture:

1. Custom layout

<?xml version= "1.0" encoding= "Utf-8"?> <relativelayout xmlns:android= "http://schemas.android.com/apk/res/" Android "Android:layout_width=" Match_parent "android:layout_height=" Wrap_content "> <!--input keyboard--> <
GridView android:id= "@+id/gv_keybord" android:layout_width= "match_parent" android:layout_height= "Wrap_content" Android:layout_alignparentbottom= "true" android:background= "#bdbdbd" android:horizontalspacing= "1px" Android: numcolumns= "3" android:verticalspacing= "1px"/> <view android:id= "@+id/line" android:layout_width= "Match_" Parent "android:layout_height=" 1px "android:layout_above=" "@id/gv_keybord" android:background= "#bdbdbd"/> < Relativelayout android:id= "@+id/layoutback" android:layout_width= match_parent "android:layout_height=" Wrap_
Content "android:layout_above=" @id/line "android:background=" #f5f5f5 "android:padding=" 10DP "> <imageview Android:id= "@+id/imgback" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:layouT_centerinparent= "true" android:src= "@mipmap/keyboard_back_img"/> </RelativeLayout> <view android: Layout_width= "Match_parent" android:layout_height= "1px" android:layout_above= "@id/layoutback" Android:layout_ margintop= "1DP" android:background= "#bdbdbd"/> </RelativeLayout>

The keyboard layout, in essence, is a 4x3 grid layout of the GridView.

2. Realize the digital keyboard content

Import Android.content.Context;
Import Android.util.AttributeSet;
Import Android.view.View;
Import Android.widget.GridView;
Import Android.widget.RelativeLayout;
Import COM.LNYP.PSWKEYBOARD.R;
Import Com.lnyp.pswkeyboard.adapter.KeyBoardAdapter;
Import java.util.ArrayList;
Import Java.util.HashMap;
Import Java.util.Map; /** * Virtual Keyboard */public class Virtualkeyboardview extends Relativelayout implements View.onclicklistener {context; p 
Rivate GridView GridView;
Private Relativelayout Layoutback; 
Private arraylist<map<string, string>> valuelist; Public Virtualkeyboardview {This (context, null);} public Virtualkeyboardview
AttributeSet attrs) {Super (context, attrs); this.context = context;
View view = view.inflate (context, r.layout.layout_virtual_keyboard, null);
ValueList = new arraylist<> ();
Layoutback = (relativelayout) View.findviewbyid (r.id.layoutback);
Layoutback.setonclicklistener (this); GridView = (GridView) View.findviEwbyid (R.id.gv_keybord);
Setview (); 
AddView (view); Public Relativelayout Getlayoutback () {return layoutback.} public arraylist<map<string, string>> GetValue List () {return valuelist.} public GridView Getgridview () {return gridview;} private void Setview () {/* the number that should appear on the initialization button 
* for (int i = 1; i < i++) {map<string, string> Map = new hashmap<string, string> (); if (I < 10) {
Map.put ("Name", string.valueof (i)); else if (i = ten) {map.put ("name", ".");} else if (i = = Map.put ("name", string.valueof (0));} else if (i = = 12)
{map.put ("name", "");}
Valuelist.add (map);
} keyboardadapter Keyboardadapter = new Keyboardadapter (context, valuelist);
Gridview.setadapter (Keyboardadapter); @Override public void OnClick (View v) {}}

See how the adapter handles: Keyboardadapter. java

Import Android.content.Context;
Import Android.graphics.Color;
Import Android.view.View;
Import Android.view.ViewGroup;
Import Android.widget.BaseAdapter;
Import Android.widget.RelativeLayout;
Import Android.widget.TextView;
Import COM.LNYP.PSWKEYBOARD.R;
Import java.util.ArrayList;
Import Java.util.Map; /** * Nine Sudoku Keyboard Adapter */public class Keyboardadapter extends Baseadapter {private context mcontext; private arraylist<map&lt ;
String, string>> ValueList; Public Keyboardadapter (Context Mcontext, arraylist<map<string, string>> valuelist) {This.mcontext =
Mcontext;
This.valuelist = ValueList; @Override public int GetCount () {return valuelist.size ():} @Override public Object getitem (int position) {return Valu
Elist.get (position); @Override public long getitemid (int position) {return position;} @Override public view getview (int position, View conv Ertview, ViewGroup parent) {Viewholder viewholder; if (Convertview = null) {Convertview = View.inflate (Mcontext, R.laYout.grid_item_virtual_keyboard, NULL);
Viewholder = new Viewholder ();
Viewholder.btnkey = (TextView) Convertview.findviewbyid (R.id.btn_keys);
Viewholder.imgdelete = (relativelayout) Convertview.findviewbyid (r.id.imgdelete);
Convertview.settag (Viewholder); else {Viewholder = (Viewholder) Convertview.gettag ();} if (position = = 9) {viewHolder.imgDelete.setVisibility (view.in
VISIBLE);
ViewHolder.btnKey.setVisibility (view.visible);
ViewHolder.btnKey.setText (Valuelist.get (position). Get ("name");
ViewHolder.btnKey.setBackgroundColor (Color.parsecolor ("#e0e0e0"));
else if (position = =) {ViewHolder.btnKey.setBackgroundResource (r.mipmap.keyboard_delete_img);
ViewHolder.imgDelete.setVisibility (view.visible);
ViewHolder.btnKey.setVisibility (view.invisible);
else {viewHolder.imgDelete.setVisibility (view.invisible); viewHolder.btnKey.setVisibility (view.visible);
ViewHolder.btnKey.setText (Valuelist.get (position). Get ("name");
return convertview; /** * Store Control/Public final class VIEWHOlder {public TextView btnkey; public relativelayout Imgdelete;}} 

Before we look at the adapter, let's look at how the Grid_item_virtual_keyboard is implemented:

 <?xml version= "1.0" encoding= "Utf-8"?> <relativelayout xmlns:android= "http
://schemas.android.com/apk/res/android "android:layout_width=" match_parent "android:layout_height=" Match_parent "
android:background= "#e0e0e0" > <textview android:id= "@+id/btn_keys" android:layout_width= "Match_parent" android:layout_height= "60DP" android:layout_centerinparent= "true" android:background= "@drawable/selector_gird_ Item "android:gravity=" center "android:includefontpadding=" false "android:textcolor=" #333333 "android:textsize=" 26sp "/> <relativelayout android:id=" @+id/imgdelete android:layout_width= "Wrap_content" Android:layout_ height= "60DP" android:layout_centerinparent= "true" > <imageview android:layout_width= "wrap_content" Android:
layout_height= "Wrap_content" android:layout_centerinparent= "true" android:src= "@mipmap/keyboard_delete_img"/> </RelativeLayout> </relativelayout> 

As you can see, in the item layout file, we specify two view, one is the textview of the normal display number, and the other is the relativelayout that displays the last deletion key.
Then, in the GetView method of Keyboardadapter, we handle the layout differently according to the position position. When position is 9, which is the last and third key, its button color should be set separately. When the position is 12 is the last button, you need to control the Delete button display, the number button is hidden. The rest is the delete button is hidden and the number button is displayed.

3. Use and implement keyboard event logic

In a layout, you can use your own defined numeric keypad directly:

<?xml version= "1.0" encoding= "Utf-8"?> <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:background= "#efefef"
tools:context= " Com.lnyp.pswkeyboard.NormalKeyBoardActivity ">
<edittext
android:id=" @+id/textamount "
Android : layout_width= "match_parent"
android:layout_height= "50DP"
android:background= "#FFFFFF"
android: Inputtype= "Numberdecimal"
android:padding= "14DP"
android:textcolor= "#333333"
android:textsize= " 16sp "/>
<com.lnyp.pswkeyboard.widget.virtualkeyboardview
android:id=" @+id/virtualkeyboardview "
android:layout_width= "match_parent"
android:layout_height= "wrap_content"
android:layout_ gravity= "Bottom"/>
</RelativeLayout>

In the activity, we operate the numeric keypad:

Import Android.os.Bundle;
Import android.support.v7.app.AppCompatActivity;
Import android.text.Editable;
Import Android.view.View;
Import android.view.animation.Animation;
Import Android.view.animation.AnimationUtils;
Import Android.widget.AdapterView;
Import Android.widget.EditText;
Import Android.widget.GridView;
Import Com.lnyp.pswkeyboard.widget.VirtualKeyboardView;
Import java.util.ArrayList;
Import Java.util.Map;
public class Normalkeyboardactivity extends Appcompatactivity {private Virtualkeyboardview virtualkeyboardview;
Private GridView GridView;
Private arraylist<map<string, string>> valuelist;
Private EditText Textamount;
Private Animation Enteranim;
Private Animation Exitanim; @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (
R.layout.activity_normal_key_board);
ValueList = Virtualkeyboardview.getvaluelist ();
Initanim ();
Initview (); private void Initanim () {Enteranim = Animationutils.loadanimatIon (this, r.anim.push_bottom_in);
Exitanim = Animationutils.loadanimation (this, r.anim.push_bottom_out);
private void Initview () {Virtualkeyboardview = (Virtualkeyboardview) Findviewbyid (R.id.virtualkeyboardview);
Textamount = (edittext) Findviewbyid (R.id.textamount); Virtualkeyboardview.getlayoutback (). Setonclicklistener (New View.onclicklistener () {@Override public void OnClick (
View v) {virtualkeyboardview.startanimation (Exitanim); virtualkeyboardview.setvisibility (View.GONE);}});
GridView = Virtualkeyboardview.getgridview ();
Gridview.setonitemclicklistener (Onitemclicklistener);
Textamount.setonclicklistener (New View.onclicklistener () {@Override public void OnClick (View v) {
Virtualkeyboardview.setfocusable (TRUE);
Virtualkeyboardview.setfocusableintouchmode (TRUE);
Virtualkeyboardview.startanimation (Enteranim);
Virtualkeyboardview.setvisibility (view.visible);
}
});
Private Adapterview.onitemclicklistener Onitemclicklistener = new Adapterview.onitemclicklistener () {@Overridepublic void Onitemclick (adapterview<?> adapterview, view view, int position, long L) {if (Position < &&am P Position!= 9) {//Click on the 0~9 button String amount = Textamount.gettext (). toString (). Trim (); amount = amount + valuelist.get (positio
n). Get ("name");
Textamount.settext (amount);
Editable ea = Textamount.gettext ();
Textamount.setselection (Ea.length ()); 
else {if (position = 9) {//dot Repel bar String amount = Textamount.gettext (). toString (). Trim (); if (!amount.contains (".")) {
Amount = amount + valuelist.get (position). Get ("name");
Textamount.settext (amount);
Editable ea = Textamount.gettext ();
Textamount.setselection (Ea.length ()); } if (position = 11) {//dot Repel bar String amount = Textamount.gettext (). toString (). Trim (); if (Amount.length () > 0) {AM
Ount = amount.substring (0, Amount.length ()-1);
Textamount.settext (amount);
Editable ea = Textamount.gettext ();
Textamount.setselection (Ea.length ()); }
}
}
}
};}

Source Address: Https://github.com/zuiwuyuan/WeChatPswKeyboard

Described above is a small set to introduce the Android high imitation micro-letter digital keyboard function, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!