Android 錢包支付之輸入支付密碼的實(shí)現(xiàn)步驟

更新時(shí)間：2018年04月02日 11:57:54 作者：MiHomes

這篇文章主要介紹了Android 錢包支付之輸入支付密碼,需要的朋友可以參考下

一.小伙伴們?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)聽軟鍵盤的彈出和收起事件，當(dāng)軟鍵盤收起，dialog也關(guān)閉。

二.下面開始講述實(shí)現(xiàn)的步驟(圍繞上面原理，按三個(gè)步驟闡述)。

步驟1.自定義EditTextView.這里，小編采用的解決方案是網(wǎng)上一個(gè)開源的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)6
private 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ō)明，詳見源碼里面有方法注釋）：

 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="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)聽軟鍵盤的彈出和收起事件，當(dāng)軟鍵盤收起，dialog也關(guān)閉。實(shí)現(xiàn)思路很簡(jiǎn)單：監(jiān)聽窗體的不可見區(qū)域的高度，判斷是否大于屏幕高度的1/4即可（實(shí)現(xiàn)此步驟的目的是，當(dāng)你點(diǎn)擊軟鍵盤中的收起按鈕時(shí)，也能自行關(guān)閉Dialog）。

在Activity的onCreate方法中，加入如下代碼即可實(shí)現(xiàn)監(jiān)聽：

 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、不可見區(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)書號(hào)MiHomes，后續(xù)會(huì)有更多更好的博客推送給您。

總結(jié)

以上所述是小編給大家介紹的Android 錢包支付之輸入支付密碼的實(shí)現(xiàn)步驟，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: