Android仿支付寶、京東的密碼鍵盤和輸入框
首先看下效果圖
一:布局代碼
鍵盤由0~9的數(shù)字,刪除鍵和完成鍵組成,也可以根據(jù)需求通過GridView
適配器的getItemViewType
方法來定義。點擊鍵的時候背景有變色的效果。
密碼輸入框由六個EditText
組成,每個輸入框最對能輸入一個數(shù)字,監(jiān)聽最后一個輸入框來完成密碼輸入結(jié)束的監(jiān)聽。
二:鍵盤
鍵盤中的主要邏輯處理,鍵盤樣式,item
的點擊事件
@Override public int getViewTypeCount() { return 2; } @Override public int getItemViewType(int position) { return (getItemId(position) == KEY_NINE) ? 2 : 1; } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder viewHolder = null; if (convertView == null) { if (getItemViewType(position) == 1) { //數(shù)字鍵 convertView = LayoutInflater.from(context).inflate(R.layout.item_grid_keyboard, parent, false); viewHolder = new ViewHolder(convertView); } else { //刪除鍵 convertView = LayoutInflater.from(context).inflate(R.layout.item_grid_keyboard_delete, parent, false); } } if (getItemViewType(position) == 1) { viewHolder = (ViewHolder) convertView.getTag(); viewHolder.tvKey.setText(key[position]); } return convertView; }
三:密碼輸入框
密碼輸入框要處理的邏輯有刪除、輸入、輸入完成回調(diào)等
/** * 輸入密碼,根據(jù)StringBuilder中數(shù)據(jù)的多少進(jìn)行邏輯判斷 * @param value */ public void add(String value) { if (mPassword != null && mPassword.length() < 6) { mPassword.append(value);//此處先添加到StringBuilder中,再在輸入框中顯示 if (mPassword.length() == 1) { tvFirst.setText(value); } else if (mPassword.length() == 2) { tvSecond.setText(value); }else if (mPassword.length() == 3) { tvThird.setText(value); }else if (mPassword.length() == 4) { tvForth.setText(value); }else if (mPassword.length() == 5) { tvFifth.setText(value); }else if (mPassword.length() == 6) { tvSixth.setText(value); } } } /** * 刪除密碼,根據(jù)StringBuilder中數(shù)據(jù)的多少進(jìn)行邏輯判斷 */ public void remove() { if (mPassword != null && mPassword.length() > 0) { if (mPassword.length() == 1) { tvFirst.setText(""); } else if (mPassword.length() == 2) { tvSecond.setText(""); }else if (mPassword.length() == 3) { tvThird.setText(""); }else if (mPassword.length() == 4) { tvForth.setText(""); }else if (mPassword.length() == 5) { tvFifth.setText(""); }else if (mPassword.length() == 6) { tvSixth.setText(""); } mPassword.deleteCharAt(mPassword.length() - 1); } }
獲取完整密碼
/** * 返回完整密碼 * @return */ public String getText() { return (mPassword == null) ? null : mPassword.toString(); }
四:實際應(yīng)用
布局,也可以把鍵盤拆分開來,當(dāng)輸入的時候從窗口下方滑入
<?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"> <com.github.phoenix.widget.PayEditText android:id="@+id/PayEditText_pay" android:layout_width="match_parent" android:layout_marginTop="20dp" android:paddingLeft="12dp" android:layout_alignParentTop="true" android:paddingRight="12dp" android:layout_height="48dp"/> <com.github.phoenix.widget.Keyboard android:id="@+id/KeyboardView_pay" android:layout_alignParentBottom="true" android:layout_width="match_parent" android:layout_height="300dp"/> </RelativeLayout>
代碼中
//鍵 private static final String[] KEY = new String[] { "1", "2", "3", "4", "5", "6", "7", "8", "9", "<<", "0", "完成" }; //設(shè)置鍵盤 keyboard.setKeyboardKeys(KEY); //鍵盤鍵的點擊事件 keyboard.setOnClickKeyboardListener(new Keyboard.OnClickKeyboardListener() { @Override public void onKeyClick(int position, String value) { if (position < 11 && position != 9) { payEditText.add(value); } else if (position == 9) { payEditText.remove(); }else if (position == 11) { //當(dāng)點擊鍵盤上的完成按鈕時,也可以通過payEditText.getText()獲取密碼,此時不應(yīng)該注冊O(shè)nInputFinishedListener接口 Toast.makeText(getApplication(), "您的密碼是:" + payEditText.getText(), Toast.LENGTH_SHORT).show(); finish(); } } }); //當(dāng)密碼輸入完成時的回調(diào) payEditText.setOnInputFinishedListener(new PayEditText.OnInputFinishedListener() { @Override public void onInputFinished(String password) { Toast.makeText(getApplication(), "您的密碼是:" + password, Toast.LENGTH_SHORT).show(); } });
總結(jié)
好了,以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對各位Android開發(fā)者們能有所幫助,如果有疑問大家可以留言交流。
相關(guān)文章
Android自定義控件(實現(xiàn)狀態(tài)提示圖表)
本篇文章主要介紹了android實現(xiàn)狀態(tài)提示圖表的功能,實現(xiàn)了動態(tài)圖表的顯示,有需要的朋友可以了解一下。2016-11-11Android?Jetpack?Compose開發(fā)實用小技巧
這篇文章主要為大家介紹了Android?Jetpack?Compose開發(fā)中的一些實用小技巧示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11實例解析Android ImageView的scaleType屬性
通過本文給大家介紹ImageView這個控件的一些使用方法,以及其最重要的一個屬性: scaleType,對imageview的scaletype相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01Android利用Document實現(xiàn)xml讀取和寫入操作
這篇文章主要為大家詳細(xì)介紹了Android利用Document實現(xiàn)xml讀取和寫入操作,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-12-12