Android如何實現(xiàn)仿支付寶自定義密碼輸入框及安全鍵盤

這篇文章主要為大家展示了“Android如何實現(xiàn)仿支付寶自定義密碼輸入框及安全鍵盤”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Android如何實現(xiàn)仿支付寶自定義密碼輸入框及安全鍵盤”這篇文章吧。

 0、前言

 之前做過的項目里有運(yùn)用到一個支付場景：用戶辦理業(yè)務(wù)時需要輸入交易密碼，并且可根據(jù)平臺下發(fā)的支付方式進(jìn)行選擇。這與支付寶的密碼輸入方式十分相似，如果使用Android系統(tǒng)或者第三方軟件的鍵盤，會有密碼泄露的風(fēng)險。因此，大多數(shù)的應(yīng)用軟件使用的是自定義的密碼輸入框及安全鍵盤。

 由于密碼輸入方式需要實現(xiàn)一個從底部彈出的效果，因此總體上決定采用BottomSheetDialog來進(jìn)行封裝，同時為了提高安全性，還應(yīng)該隨機(jī)生成鍵盤上的數(shù)字，界面如下圖所示：

 首先新建一個PasswordInputView類，將需要使用到的Context對象、支付金額、可支持的支付方式等數(shù)據(jù)，作為該類構(gòu)造方法的參數(shù)進(jìn)行傳遞。下文還將提到該類有一個回調(diào)方法，當(dāng)用戶輸入的密碼滿足六位時，可以在回調(diào)方法中獲取密碼并顯示出來。PasswordInputView類的構(gòu)造方法如下所示：

public PasswordInputView(Context context, String payMoney, List<String> payWayList) { 
 this.context = context; 
 this.payMoney = payMoney; 
 this.payWayList = payWayList; 
 payPwdDialog = new BottomSheetDialog(context); 
 View view = LayoutInflater.from(context).inflate(R.layout.dialog_pay_pwd, null, false); 
 initStep1(view); 
 initStep2(view); 
 llyPwdInputView = (LinearLayout) view.findViewById(R.id.lly_pwd_input_view); 
 llyPayWaySelect = (LinearLayout) view.findViewById(R.id.lly_pay_way_select); 
 showStep1(); // 顯示第一頁 
}

1、自定義密碼輸入框

 因為不能明文顯示輸入的密碼，所以使用“●”來代替每位密碼。自定義密碼輸入框涉及到的自定義屬性，主要包括：輸入框的大小、顏色、圓角半徑以及密碼圓點的大小、顏色、半徑。因此，自定義屬性attrs.xml文件如下所示：

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
 <declare-styleable name="PasswordEditText"> 
  <attr name="borderWidth" format="dimension"/> 
  <attr name="borderColor" format="color"/> 
  <attr name="borderRadius" format="dimension"/> 
  <attr name="passwordLength" format="integer"/> 
  <attr name="passwordWidth" format="dimension"/> 
  <attr name="passwordColor" format="color"/> 
  <attr name="passwordRadius" format="dimension"/> 
 </declare-styleable> 
</resources>

 接下來就需要去繪制自定義控件了。首先獲取自定義屬性，然后在onDraw()中進(jìn)行繪制，代碼如下所示：

package com.syd.paypwddialogdemo; 
import static android.graphics.Paint.ANTI_ALIAS_FLAG; 
import android.content.Context; 
import android.content.res.Resources; 
import android.content.res.TypedArray; 
import android.graphics.Canvas; 
import android.graphics.Color; 
import android.graphics.Paint; 
import android.graphics.RectF; 
import android.support.v7.widget.AppCompatEditText; 
import android.util.AttributeSet; 
/** 
 * 自定義密碼輸入框 
 */ 
public class PasswordEditText extends AppCompatEditText { 
 private int textLength; 
 private int borderColor; 
 private float borderWidth; 
 private float borderRadius; 
 private int passwordLength; 
 private int passwordColor; 
 private float passwordWidth; 
 private float passwordRadius; 
 private Paint passwordPaint = new Paint(ANTI_ALIAS_FLAG); 
 private Paint borderPaint = new Paint(ANTI_ALIAS_FLAG); 
 private final int defaultContMargin = 5; 
 private final int defaultSplitLineWidth = 3; 
 public PasswordEditText(Context context, AttributeSet attrs) { 
  super(context, attrs); 
  final Resources res = getResources(); 
  final int defaultBorderColor = res.getColor(R.color.colorGray); 
  final float defaultBorderWidth = res.getDimension(R.dimen.default_ev_border_width); 
  final float defaultBorderRadius = res.getDimension(R.dimen.default_ev_border_radius); 
  final int defaultPasswordLength = res.getInteger(R.integer.default_ev_password_length); 
  final int defaultPasswordColor = res.getColor(R.color.colorBlack); 
  final float defaultPasswordWidth = res.getDimension(R.dimen.default_ev_password_width); 
  final float defaultPasswordRadius = res.getDimension(R.dimen.default_ev_password_radius); 
  TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.PasswordEditText, 0, 0); 
  try { 
   borderColor = a.getColor(R.styleable.PasswordEditText_borderColor, defaultBorderColor); 
   borderWidth = a.getDimension(R.styleable.PasswordEditText_borderWidth, defaultBorderWidth); 
   borderRadius = a.getDimension(R.styleable.PasswordEditText_borderRadius, defaultBorderRadius); 
   passwordLength = a.getInt(R.styleable.PasswordEditText_passwordLength, defaultPasswordLength); 
   passwordColor = a.getColor(R.styleable.PasswordEditText_passwordColor, defaultPasswordColor); 
   passwordWidth = a.getDimension(R.styleable.PasswordEditText_passwordWidth, defaultPasswordWidth); 
   passwordRadius = a.getDimension(R.styleable.PasswordEditText_passwordRadius, defaultPasswordRadius); 
  } finally { 
   a.recycle(); 
  } 
  borderPaint.setStrokeWidth(borderWidth); 
  borderPaint.setColor(borderColor); 
  passwordPaint.setStrokeWidth(passwordWidth); 
  passwordPaint.setStyle(Paint.Style.FILL); 
  passwordPaint.setColor(passwordColor); 
 } 
 @Override 
 protected void onDraw(Canvas canvas) { 
  int width = getWidth(); 
  int height = getHeight(); 
  RectF rect = new RectF(0, 0, width, height); 
  borderPaint.setColor(borderColor); 
  canvas.drawRoundRect(rect, borderRadius, borderRadius, borderPaint); 
  RectF rectIn = new RectF(rect.left + defaultContMargin, rect.top + defaultContMargin, 
    rect.right - defaultContMargin, rect.bottom - defaultContMargin); 
  borderPaint.setColor(Color.WHITE); 
  canvas.drawRoundRect(rectIn, borderRadius, borderRadius, borderPaint); 
  borderPaint.setColor(borderColor); 
  borderPaint.setStrokeWidth(defaultSplitLineWidth); 
  for (int i = 1; i < passwordLength; i++) { 
   float x = width * i / passwordLength; 
   canvas.drawLine(x, 0, x, height, borderPaint); 
  } 
  float cx, cy = height / 2; 
  float half = width / passwordLength / 2; 
  for (int i = 0; i < textLength; i++) { 
   cx = width * i / passwordLength + half; 
   canvas.drawCircle(cx, cy, passwordWidth, passwordPaint); 
  } 
 } 
 @Override 
 protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) { 
  super.onTextChanged(text, start, lengthBefore, lengthAfter); 
  this.textLength = text.toString().length(); 
  invalidate(); 
 } 
 public int getBorderColor() { 
  return borderColor; 
 } 
 public void setBorderColor(int borderColor) { 
  this.borderColor = borderColor; 
  borderPaint.setColor(borderColor); 
  invalidate(); 
 } 
 public float getBorderWidth() { 
  return borderWidth; 
 } 
 public void setBorderWidth(float borderWidth) { 
  this.borderWidth = borderWidth; 
  borderPaint.setStrokeWidth(borderWidth); 
  invalidate(); 
 } 
 public float getBorderRadius() { 
  return borderRadius; 
 } 
 public void setBorderRadius(float borderRadius) { 
  this.borderRadius = borderRadius; 
  invalidate(); 
 } 
 public int getPasswordLength() { 
  return passwordLength; 
 } 
 public void setPasswordLength(int passwordLength) { 
  this.passwordLength = passwordLength; 
  invalidate(); 
 } 
 public int getPasswordColor() { 
  return passwordColor; 
 } 
 public void setPasswordColor(int passwordColor) { 
  this.passwordColor = passwordColor; 
  passwordPaint.setColor(passwordColor); 
  invalidate(); 
 } 
 public float getPasswordWidth() { 
  return passwordWidth; 
 } 
 public void setPasswordWidth(float passwordWidth) { 
  this.passwordWidth = passwordWidth; 
  passwordPaint.setStrokeWidth(passwordWidth); 
  invalidate(); 
 } 
 public float getPasswordRadius() { 
  return passwordRadius; 
 } 
 public void setPasswordRadius(float passwordRadius) { 
  this.passwordRadius = passwordRadius; 
  invalidate(); 
 } 
}

2、安全鍵盤的實現(xiàn)

 安全鍵盤主要是通過GridView來實現(xiàn)，上文提到為了保證安全性，在安全鍵盤初始化的時候，應(yīng)該隨機(jī)生成鍵盤上的數(shù)字，代碼如下所示：

/** 
 * 初始化密碼鍵盤 
 */ 
private void initKeyboard() { 
 final int number = 10; 
 int[] keys = new int[number]; 
 for (int i = 0; i < 10; i++) { 
  keys[i] = i; 
 } 
 // 隨機(jī)生成鍵盤數(shù)字 
 Random random = new Random(); 
 for (int i = 0; i < number; i++) { 
  int p = random.nextInt(number); 
  int tmp = keys[i]; 
  keys[i] = keys[p]; 
  keys[p] = tmp; 
 } 
 numList = new ArrayList<>(); 
 for (int i = 0; i < 12; i++) { 
  Map<String, String> map = new HashMap<>(); 
  if (i < 9) { 
   map.put("num", String.valueOf(keys[i])); 
  } else if (i == 9) { 
   map.put("num", ""); 
  } else if (i == 10) { 
   map.put("num", String.valueOf(keys[9])); 
  } else if (i == 11) { 
   map.put("num", ""); 
  } 
  numList.add(map); 
 } 
 KeyAdapter keyAdapter = new KeyAdapter(context, numList, handler); 
 gvKeyboard.setAdapter(keyAdapter); 
}

 安全鍵盤點擊事件的處理，是在適配器KeyAdapter的構(gòu)造方法中傳入Handler對象，通過收發(fā)消息的方式在PasswordInputView類中處理的，代碼如下所示：

holder.btnKey.setOnClickListener(new View.OnClickListener() { 
 @Override 
 public void onClick(View v) { 
  Message msg = new Message(); 
  msg.what = Constants.KEYBOARD_INPUT; 
  msg.obj = position; 
  handler.sendMessage(msg); 
 } 
});

 Handler對象在PasswordInputView類中定義，主要用于處理安全鍵盤的點擊事件，代碼如下所示：

Handler handler = new Handler() { 
 @Override 
 public void dispatchMessage(Message msg) { 
  switch (msg.what) { 
   case Constants.KEYBOARD_INPUT: 
    int position = (int) msg.obj; 
    if (position < 11 && position != 9) { 
     // 點擊0-9按鍵 
     password = etPwd.getText().append(numList.get(position).get("num")).toString(); 
     etPwd.setText(password); 
    } else { 
     if (position == 11) { 
      // 點擊退格鍵 
      if (!TextUtils.isEmpty(password) && !password.equals("")) { 
       password = etPwd.getText().delete(password.length() - 1, password.length()).toString(); 
       etPwd.setText(password); 
      } 
     } 
    } 
    break; 
  } 
 } 
};

 為了方便外部獲取到用戶輸入的密碼，設(shè)計一個回調(diào)接口OnPwdInputListener，并在PasswordInputView類中為回調(diào)接口創(chuàng)建一個set方法，代碼如下所示：

package com.syd.paypwddialogdemo; 
public interface OnPwdInputListener { 
 void onPwdInput(String password); 
}

 當(dāng)PasswordEditText控件的TextWatcher對象監(jiān)聽到輸入的密碼滿足六位時，調(diào)用回調(diào)方法，將密碼作為參數(shù)進(jìn)行傳遞，代碼如下所示：

textWatcher = new TextWatcher() { 
 @Override 
 public void afterTextChanged(Editable s) { 
  if (etPwd.getText().length() == 6) { 
   onPwdInputListener.onPwdInput(etPwd.getText().toString()); 
  } 
 } 
}; 
etPwd.addTextChangedListener(textWatcher);

在外部調(diào)用set方法，創(chuàng)建OnPwdInputListener對象，重寫回調(diào)方法，即可獲取到用戶輸入的密碼，代碼如下所示：

pwdInputView.setOnPwdInputListener(new OnPwdInputListener() { 
 @Override 
 public void onPwdInput(String password) { 
  Toast.makeText(MainActivity.this, password, Toast.LENGTH_SHORT).show(); 
 } 
});

以上是“Android如何實現(xiàn)仿支付寶自定義密碼輸入框及安全鍵盤”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！