Android仿支付宝自定义密码输入框及安全键盘(密码键盘)

概述 0、前言 之前做过的项目里有运用到一个支付场景：用户办理业务时需要输入交易密码，并且可根据平台下发的支付方式进行选择。这与支付宝的密码输入方式十分相似，如果使用Android系统或者第三方软件的键盘  0、前言

 之前做过的项目里有运用到一个支付场景：用户办理业务时需要输入交易密码，并且可根据平台下发的支付方式进行选择。这与支付宝的密码输入方式十分相似，如果使用AndroID系统或者第三方软件的键盘，会有密码泄露的风险。因此，大多数的应用软件使用的是自定义的密码输入框及安全键盘。

 由于密码输入方式需要实现一个从底部d出的效果，因此总体上决定采用BottomSheetDialog来进行封装，同时为了提高安全性，还应该随机生成键盘上的数字，界面如下图所示：

 

 

 首先新建一个PasswordinputVIEw类，将需要使用到的Context对象、支付金额、可支持的支付方式等数据，作为该类构造方法的参数进行传递。下文还将提到该类有一个回调方法，当用户输入的密码满足六位时，可以在回调方法中获取密码并显示出来。PasswordinputVIEw类的构造方法如下所示：

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()中进行绘制，代码如下所示：

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);   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,wIDth,height);   borderPaint.setcolor(bordercolor);   canvas.drawRoundRect(rect,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,borderPaint);   borderPaint.setcolor(bordercolor);   borderPaint.setstrokeWIDth(defaultSplitlinewidth);   for (int i = 1; i < passwordLength; i++) {    float x = wIDth * i / passwordLength;    canvas.drawline(x,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、安全键盘的实现

 安全键盘主要是通过GrIDVIEw来实现，上文提到为了保证安全性，在安全键盘初始化的时候，应该随机生成键盘上的数字，代码如下所示：

/**  * 初始化密码键盘  */ private voID initKeyboard() {  final int number = 10;  int[] keys = new int[number];  for (int i = 0; i < 10; i++) {   keys[i] = i;  }  // 随机生成键盘数字  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的构造方法中传入Handler对象，通过收发消息的方式在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;   }  } }; 

 为了方便外部获取到用户输入的密码，设计一个回调接口OnPwdinputListener，并在PasswordinputVIEw类中为回调接口创建一个set方法，代码如下所示：

package com.syd.paypwddialogdemo; public interface OnPwdinputListener {  voID onPwdinput(String password); } 

 当PasswordEditText控件的TextWatcher对象监听到输入的密码满足六位时，调用回调方法，将密码作为参数进行传递，代码如下所示：

textWatcher = new TextWatcher() {  @OverrIDe  public voID afterTextChanged(Editable s) {   if (etPwd.getText().length() == 6) {    onPwdinputListener.onPwdinput(etPwd.getText().toString());   }  } }; etPwd.addTextChangedListener(textWatcher); 

在外部调用set方法，创建OnPwdinputListener对象，重写回调方法，即可获取到用户输入的密码，代码如下所示：

pwdinputVIEw.setonPwdinputListener(new OnPwdinputListener() {  @OverrIDe  public voID onPwdinput(String password) {   Toast.makeText(MainActivity.this,password,Toast.LENGTH_SHORT).show();  } }); 

3、结语

 以上介绍了自定义密码输入框及安全键盘的大致实现思路，对源码感兴趣的小伙伴可以点击下载Demo，查看具体的实现过程及演示效果。

您可能感兴趣的文章:android仿支付宝、微信密码输入框效果android仿微信支付宝的支付密码输入框示例Android 仿支付宝密码输入框效果Android仿支付宝支付密码输入框Android仿支付宝、京东的密码键盘和输入框Android仿微信/支付宝密码输入框 总结

以上是内存溢出为你收集整理的Android仿支付宝自定义密码输入框及安全键盘(密码键盘)全部内容，希望文章能够帮你解决Android仿支付宝自定义密码输入框及安全键盘(密码键盘)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。