I was wondering how to set up a custom iOS like pinview component, to enable users to login using a pin code. while i know the solution i came up with is not the most flexible, it does seem to doe its job well.
First i created a layout to show 5 input boxes:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:id="@+id/RootViewTrackList" android:background="@drawable/bg_grad" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/titleBox" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:text="Enter PIN" android:gravity="center" android:textColor="#000" android:textSize="30sp" android:padding="10dip" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/pinBox0" android:inputType="numberPassword" android:password="true" android:layout_width="50dip" android:layout_height="50dip" android:text="8" android:layout_margin="5dip" android:textSize="40sp" android:textColor="@android:color/background_dark" android:gravity="center" android:background="@android:drawable/editbox_background" android:maxLength="1" android:numeric="integer" android:editable="true" android:enabled="true" /> <TextView android:id="@+id/pinBox1" android:inputType="numberPassword" android:password="true" android:layout_width="50dip" android:layout_height="50dip" android:text="8" android:layout_margin="5dip" android:textSize="40sp" android:textColor="@android:color/background_dark" android:gravity="center" android:background="@android:drawable/editbox_background" android:maxLength="1" android:numeric="integer" android:editable="true" android:enabled="true" /> <TextView android:id="@+id/pinBox2" android:inputType="numberPassword" android:password="true" android:text="8" android:layout_width="50dip" android:layout_height="50dip" android:layout_margin="5dip" android:textSize="40sp" android:textColor="@android:color/background_dark" android:gravity="center" android:background="@android:drawable/editbox_background" android:maxLength="1" android:numeric="integer" android:editable="true" android:enabled="true" /> <TextView android:id="@+id/pinBox3" android:inputType="numberPassword" android:password="true" android:text="8" android:layout_width="50dip" android:layout_height="50dip" android:layout_margin="5dip" android:textSize="40sp" android:textColor="@android:color/background_dark" android:gravity="center" android:background="@android:drawable/editbox_background" android:maxLength="1" android:numeric="integer" android:editable="true" android:enabled="true" /> <TextView android:id="@+id/pinBox4" android:inputType="numberPassword" android:password="true" android:layout_width="50dip" android:layout_height="50dip" android:text="8" android:layout_margin="5dip" android:textSize="40sp" android:textColor="@android:color/background_dark" android:gravity="center" android:background="@android:drawable/editbox_background" android:maxLength="1" android:numeric="integer" android:editable="true" android:enabled="true" /> </LinearLayout> <TextView android:id="@+id/statusMessage" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="" android:gravity="center" android:textColor="#ff0000" android:textSize="20sp" android:padding="5dip" /> </LinearLayout> </LinearLayout> |
in my activity it a simple matter of getting the views, reading their contents and change the focus to the appropriate view when needed:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | [Activity (Label = "pinviewActivity")] public class pinviewActivity : Activity { string userEntered; string userPin="88888"; const int PIN_LENGTH = 5; Context appContext; TextView pinBox0; TextView pinBox1; TextView pinBox2; TextView pinBox3; TextView pinBox4; TextView [] pinBoxArray; TextView statusView; protected override void OnCreate (Bundle bundle) { base.OnCreate (bundle); SetContentView(Resource.Layout.passcode); appContext = this; userEntered = ""; pinBox0 = (TextView)FindViewById(Resource.Id.pinBox0); pinBox1 = (TextView)FindViewById(Resource.Id.pinBox1); pinBox2 = (TextView)FindViewById(Resource.Id.pinBox2); pinBox3 = (TextView)FindViewById(Resource.Id.pinBox3); pinBox4 = (TextView)FindViewById(Resource.Id.pinBox4); statusView = (TextView) FindViewById(Resource.Id.statusMessage); pinBoxArray = new TextView[PIN_LENGTH]; pinBoxArray[0] = pinBox0; pinBoxArray[1] = pinBox1; pinBoxArray[2] = pinBox2; pinBoxArray[3] = pinBox3; pinBoxArray[4] = pinBox4; pinBox0.FocusableInTouchMode = true; pinBox1.FocusableInTouchMode = true; pinBox2.FocusableInTouchMode = true; pinBox3.FocusableInTouchMode = true; pinBox4.FocusableInTouchMode = true; pinBox0.RequestFocusFromTouch (); int i = 0; foreach (TextView t in pinBoxArray) { t.AfterTextChanged += delegate(object sender, Android.Text.AfterTextChangedEventArgs e) { // read the input values and construct the entire userEntered = ""; foreach (TextView tr in pinBoxArray) { userEntered = userEntered+tr.Text; } Log.Info ("PinView", userEntered); i++; if(pinBoxArray.Length > i){ pinBoxArray[i].RequestFocusFromTouch(); } }; } pinBox4.AfterTextChanged += delegate(object sender, Android.Text.AfterTextChangedEventArgs e) { if (userEntered.Length == PIN_LENGTH) { //Check if entered PIN is correct if (userEntered.Equals (userPin)) { statusView.SetTextColor (Android.Graphics.Color.Green); statusView.Text = "Correct"; } else { statusView.SetTextColor (Android.Graphics.Color.Red); statusView.Text = "Wrong PIN. Keypad Locked"; Log.Info ("PinView", "Wrong PIN"); } } }; } } |