一.小伙伴們?cè)谧鲥X包支付中,相信會(huì)有個(gè)繞不過(guò)去的輸入支付密碼頁(yè)面。下面小編給個(gè)效果圖:
898342572738938468.png
實(shí)現(xiàn)的原理很簡(jiǎn)單,要點(diǎn)如下:
a.自定義EditTextView
b.自定義EditTextView嵌套入Dialog中,點(diǎn)擊緊貼軟鍵盤彈出。
c.監(jiān)聽(tīng)軟鍵盤的彈出和收起事件,當(dāng)軟鍵盤收起,dialog也關(guān)閉。
二.下面開(kāi)始講述實(shí)現(xiàn)的步驟(圍繞上面原理,按三個(gè)步驟闡述)。
步驟1.自定義EditTextView.這里,小編采用的解決方案是網(wǎng)上一個(gè)開(kāi)源的EditTextView,源碼如下:
public class PayPwdEditText extends RelativeLayout {private EditText editText; //文本編輯框private Context context;private LinearLayout linearLayout; //文本密碼的文本private TextView[] textViews; //文本數(shù)組private int pwdlength = 6; //密碼長(zhǎng)度, 默認(rèn)6private OnTextFinishListener onTextFinishListener;public PayPwdEditText(Context context) { this(context, null);}public PayPwdEditText(Context context, AttributeSet attrs) { this(context, attrs, 0);}public PayPwdEditText(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); this.context = context;}/** * @param bgdrawable 背景drawable * @param pwdlength 密碼長(zhǎng)度 * @param splilinewidth 分割線寬度 * @param splilinecolor 分割線顏色 * @param pwdcolor 密碼字體顏色 * @param pwdsize 密碼字體大小 */public void initStyle(int bgdrawable, int pwdlength, float splilinewidth, int splilinecolor, int pwdcolor, int pwdsize){ this.pwdlength = pwdlength; initEdit(bgdrawable); initShowInput(bgdrawable, pwdlength, splilinewidth, splilinecolor, pwdcolor, pwdsize);}/** * 初始化編輯框 * @param bgcolor */private void initEdit(int bgcolor){ editText = new EditText(context); editText.setBackgroundResource(bgcolor); editText.setCursorVisible(false); editText.setTextSize(0); editText.setInputType(InputType.TYPE_NUMBER_VARIATION_PASSWORD | InputType.TYPE_CLASS_NUMBER); editText.setFilters(new InputFilter[]{new InputFilter.LengthFilter(pwdlength)}); editText.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { Editable etext = editText.getText(); Selection.setSelection(etext, etext.length()); } @Override public void onTextChanged(CharSequence s, int start, int before, int count) { } @Override public void afterTextChanged(Editable s) { initDatas(s); if(s.length() == pwdlength) { if(onTextFinishListener != null) { onTextFinishListener.onFinish(s.toString().trim()); } } } }); LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); lp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE); addView(editText, lp);}/** * @param bgcolor 背景drawable * @param pwdlength 密碼長(zhǎng)度 * @param slpilinewidth 分割線寬度 * @param splilinecolor 分割線顏色 * @param pwdcolor 密碼字體顏色 * @param pwdsize 密碼字體大小 */public void initShowInput(int bgcolor, int pwdlength, float slpilinewidth, int splilinecolor, int pwdcolor, int pwdsize){ //添加密碼框父布局 linearLayout = new LinearLayout(context); linearLayout.setBackgroundResource(bgcolor); LayoutParams layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); linearLayout.setLayoutParams(layoutParams); linearLayout.setOrientation(LinearLayout.HORIZONTAL); addView(linearLayout); //添加密碼框 textViews = new TextView[pwdlength]; LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT); params.weight = 1; params.gravity = Gravity.CENTER; LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(dip2px(context, slpilinewidth), LayoutParams.MATCH_PARENT); for(int i = 0; i < textViews.length; i++) { final int index = i; TextView textView = new TextView(context); textView.setGravity(Gravity.CENTER); textViews[i] = textView; textViews[i].setTextSize(pwdsize); textViews[i].setTextColor(context.getResources().getColor(pwdcolor)); textViews[i].setInputType(InputType.TYPE_NUMBER_VARIATION_PASSWORD | InputType.TYPE_CLASS_NUMBER); linearLayout.addView(textView, params); if(i < textViews.length - 1) { View view = new View(context); view.setBackgroundColor(context.getResources().getColor(splilinecolor)); linearLayout.addView(view, params2); } }}/** * 是否顯示明文 * @param showPwd */public void setShowPwd(boolean showPwd) { int length = textViews.length; for(int i = 0; i < length; i++) { if (showPwd) { textViews[i].setTransformationMethod(PasswordTransformationMethod.getInstance()); } else { textViews[i].setTransformationMethod(HideReturnsTransformationMethod.getInstance()); } }}/** * 設(shè)置顯示類型 * @param type */public void setInputType(int type){ int length = textViews.length; for(int i = 0; i < length; i++) { textViews[i].setInputType(type); }}/** * 清除文本框 */public void clearText(){ editText.setText(""); for(int i = 0; i < pwdlength; i++) { textViews[i].setText(""); }}public void setOnTextFinishListener(OnTextFinishListener onTextFinishListener) { this.onTextFinishListener = onTextFinishListener;}/** * 根據(jù)輸入字符,顯示密碼個(gè)數(shù) * @param s */public void initDatas(Editable s){ if(s.length() > 0) { int length = s.length(); for(int i = 0; i < pwdlength; i++) { if(i < length) { for(int j = 0; j < length; j++) { char ch = s.charAt(j); textViews[j].setText(String.valueOf(ch)); } } else { textViews[i].setText(""); } } } else { for(int i = 0; i < pwdlength; i++) { textViews[i].setText(""); } }}public String getPwdText(){ if(editText != null) return editText.getText().toString().trim(); return "";}public static int dip2px(Context context, float dipValue) { final float scale = context.getResources().getDisplayMetrics().density; return (int) (dipValue * scale + 0.5f);}public interface OnTextFinishListener{ void onFinish(String str);}public void setFocus(){ editText.requestFocus(); editText.setFocusable(true); showKeyBord(editText);}/** * 顯示鍵盤 * @param view */public void showKeyBord(View view){ InputMethodManager imm = (InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE); imm.showSoftInput(view, InputMethodManager.SHOW_FORCED); }}該P(yáng)ayPwdEditText使用方法也很簡(jiǎn)單:
a.調(diào)用initStyle方法創(chuàng)建你需要設(shè)置的樣式(參數(shù)說(shuō)明,詳見(jiàn)源碼里面有方法注釋):
final PayPwdEditText ppet = (PayPwdEditText) view.findViewById(R.id.dialog_ppet); /** * @param bgcolor 背景drawable * @param pwdlength 密碼長(zhǎng)度 * @param slpilinewidth 分割線寬度 * @param splilinecolor 分割線顏色 * @param pwdcolor 密碼字體顏色 * @param pwdsize 密碼字體大小 */ ppet.initStyle(R.drawable.edit_num_bg, 6, 0.33f, R.color.yellow, R.color.yellow, 30);
其中,背景R.drawable.edit_num_bg所對(duì)應(yīng)的樣式代碼如下:
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android/222901.html">android="http://schemas.android.com/apk/res/android" ><item android:state_pressed="false"> <shape> <!--圓角大小--> <corners android:radius="5dip"/> <!--背景填充色--> <solid android:color="@color/rdb_bg"/> <!--背景外圍分割線顏色及寬度--> <stroke android:color="@color/yellow" android:width="0.3dp"/> </shape></item></selector>
以上&&以下需要使用到的色值如下:
<color name="rdb_bg">#151515</color><color name="yellow">#fdd108</color><color name="transparent">#00000000</color>
b.設(shè)置密碼輸入完成后的回調(diào):
ppet.setOnTextFinishListener(new PayPwdEditText.OnTextFinishListener() { @Override public void onFinish(String str) {//密碼輸入完后的回調(diào) //手動(dòng)收起軟鍵盤 InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE); imm.hideSoftInputFromWindow(ppet.getWindowToken(), 0); //支付密碼輸入框消失 walletDialog.dismiss(); } });c.延遲彈起軟鍵盤,使PayPwdEditText獲取焦點(diǎn):
new Handler().postDelayed(new Runnable() { @Override public void run() { ppet.setFocus(); } }, 100);步驟2.自定義的EditTextView設(shè)置好了,那么,得將它放到Dialog中加以使用了:
//將此方法放在按鈕的點(diǎn)擊事件中即可彈出輸入支付密碼頁(yè)面 private void showEditPayPwdDialog() { View view = getLayoutInflater().inflate(R.layout.dialog_et_paypwd, null); walletDialog = new Dialog(this, R.style.walletFrameWindowStyle); walletDialog.setContentView(view, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)); final Window window = walletDialog.getWindow(); WindowManager.LayoutParams wl = window.getAttributes(); //緊貼軟鍵盤彈出 wl.gravity = Gravity.BOTTOM; // 以下這兩句是為了保證按鈕可以水平滿屏 wl.width = ViewGroup.LayoutParams.MATCH_PARENT; wl.height = ViewGroup.LayoutParams.WRAP_CONTENT; walletDialog.onWindowAttributesChanged(wl); walletDialog.setCanceledOnTouchOutside(false); walletDialog.show(); final PayPwdEditText ppet = (PayPwdEditText) view.findViewById(R.id.dialog_ppet); //調(diào)用initStyle方法創(chuàng)建你需要設(shè)置的樣式 ppet.initStyle(R.drawable.edit_num_bg, 6, 0.33f, R.color.yellow, R.color.yellow, 30); ppet.setOnTextFinishListener(new PayPwdEditText.OnTextFinishListener() { @Override public void onFinish(String str) {//密碼輸入完后的回調(diào) //手動(dòng)收起軟鍵盤 InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE); imm.hideSoftInputFromWindow(ppet.getWindowToken(), 0); //支付密碼輸入框消失 walletDialog.dismiss(); //可在此執(zhí)行下一步操作 } }); //延遲彈起軟鍵盤,使PayPwdEditText獲取焦點(diǎn) new Handler().postDelayed(new Runnable() { @Override public void run() { ppet.setFocus(); } }, 100);}Dialog對(duì)應(yīng)的xml文件代碼如下(@dimen/y30等為小編采用的適配方案,大家可自行轉(zhuǎn)換為等值的px):
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:alpha="13"android:background="@color/transparent"android:orientation="vertical"><LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:background="@color/rdb_bg" android:orientation="vertical"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/tv_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="@dimen/y30" android:text="輸入支付密碼" android:textColor="@color/white" /> <com.enterprise.moshare.xdht.view.widget.PayPwdEditText android:id="@+id/dialog_ppet" android:layout_marginTop="@dimen/y30" android:layout_width="@dimen/x544" android:layout_height="@dimen/y78" android:layout_below="@+id/tv_title" android:layout_marginBottom="@dimen/y40" android:layout_centerHorizontal="true" /> </RelativeLayout> </LinearLayout></LinearLayout>
Dialog對(duì)應(yīng)的style樣式如下:
<!--支付密碼Dialog篩選器--><style name="walletFrameWindowStyle" parent="android:style/Theme.Dialog"> <item name="android:windowBackground">@android:color/transparent</item> <item name="android:windowNoTitle">true</item></style>
步驟3:監(jiān)聽(tīng)軟鍵盤的彈出和收起事件,當(dāng)軟鍵盤收起,dialog也關(guān)閉。實(shí)現(xiàn)思路很簡(jiǎn)單:監(jiān)聽(tīng)窗體的不可見(jiàn)區(qū)域的高度,判斷是否大于屏幕高度的1/4即可(實(shí)現(xiàn)此步驟的目的是,當(dāng)你點(diǎn)擊軟鍵盤中的收起按鈕時(shí),也能自行關(guān)閉Dialog)。
在Activity的onCreate方法中,加入如下代碼即可實(shí)現(xiàn)監(jiān)聽(tīng):
final View decorView = getWindow().getDecorView(); decorView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { Rect rect = new Rect(); //1、獲取main在窗體的可視區(qū)域 decorView.getWindowVisibleDisplayFrame(rect); //2、獲取main在窗體的不可視區(qū)域高度,在鍵盤沒(méi)有彈起時(shí),main.getRootView().getHeight()調(diào)節(jié)度應(yīng)該和rect.bottom高度一樣 int mainInvisibleHeight = decorView.getRootView().getHeight() - rect.bottom; int screenHeight = decorView.getRootView().getHeight();//屏幕高度 //3、不可見(jiàn)區(qū)域大于屏幕本身高度的1/4:說(shuō)明鍵盤彈起了 if (mainInvisibleHeight > screenHeight / 4) { //軟鍵盤顯示 LogUtils.d(TAG, "show------------" + rect.bottom + "----" + decorView.getRootView().getHeight()); } else { //軟鍵盤隱藏 if (walletDialog!=null){ //在軟鍵盤隱藏時(shí),關(guān)閉Dialog。 walletDialog.dismiss(); } } } });三.到此,就已經(jīng)實(shí)現(xiàn)了輸入支付密碼的功能。隨手分享,喜歡的朋友可以關(guān)注簡(jiǎn)書(shū)號(hào)MiHomes,后續(xù)會(huì)有更多更好的博客推送給您。
總結(jié)
以上所述是小編給大家介紹的Android 錢包支付之輸入支付密碼的實(shí)現(xiàn)步驟,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)VEVB武林網(wǎng)網(wǎng)站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注