Android的支付密码输入框实现浅析

先看一下效果图

实现思路：

变成点的控件不是TextView和EditText而是Imageview。首先写一个RelativeLayout里边包含6个ImageView和一个EditText(EditText要覆盖ImageView)将EditText的背景设置成透明。

自定义一个控件ItemPasswordLayout，用来给布局做一些处理，重点是将EditText的光标去掉，并监听输入文字的事件在文字变化后将文字放在一个StringBuffer中，并将edittext设置为"";再监听按下键盘删除键的事件，当按下删除键后会将StringBuffer中删除相应位置的字符。

public class ItemPasswordLayout extends RelativeLayout{
 private EditText editText;
 private ImageView[] imageViews;//使用一个数组存储密码框
 private StringBuffer stringBuffer = new StringBuffer();//存储密码字符
 private int count = 6;
 private String strPassword;//密码字符串

 public ItemPasswordLayout(Context context) {
  this(context,null);
 }

 public ItemPasswordLayout(Context context, AttributeSet attrs) {
  this(context, attrs,0);
 }

 public ItemPasswordLayout(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  imageViews = new ImageView[6];
  View view = View.inflate(context, R.layout.item_password,this);

  editText = (EditText) findViewById(R.id.item_edittext);
  imageViews[0] = (ImageView) findViewById(R.id.item_password_iv1);
  imageViews[1] = (ImageView) findViewById(R.id.item_password_iv2);
  imageViews[2] = (ImageView) findViewById(R.id.item_password_iv3);
  imageViews[3] = (ImageView) findViewById(R.id.item_password_iv4);
  imageViews[4] = (ImageView) findViewById(R.id.item_password_iv5);
  imageViews[5] = (ImageView) findViewById(R.id.item_password_iv6);

  editText.setCursorVisible(false);//将光标隐藏
  setListener();
 }

 private void setListener() {
  editText.addTextChangedListener(new TextWatcher() {
   @Override
   public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

   }

   @Override
   public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

   }

   @Override
   public void afterTextChanged(Editable editable) {
    //重点 如果字符不为""时才进行操作
    if (!editable.toString().equals("")) {
     if (stringBuffer.length()>5){
      //当密码长度大于5位时edittext置空
      editText.setText("");
      return;
     }else {
      //将文字添加到StringBuffer中
      stringBuffer.append(editable);
      editText.setText("");//添加后将EditText置空 造成没有文字输入的错局
      Log.e("TAG", "afterTextChanged: stringBuffer is "+stringBuffer);
      count = stringBuffer.length();//记录stringbuffer的长度
      strPassword = stringBuffer.toString();
      if (stringBuffer.length()==6){
//文字长度位6 则调用完成输入的监听
if (inputCompleteListener!=null){
 inputCompleteListener.inputComplete();
}
      }
     }

     for (int i =0;i0){
   //删除相应位置的字符
   stringBuffer.delete((count-1),count);
   count--;
   Log.e("TAG", "afterTextChanged: stringBuffer is "+stringBuffer);
   strPassword = stringBuffer.toString();
   imageViews[stringBuffer.length()].setImageResource(R.mipmap.nopassword);

  }
  return false;
 }

 @Override
 public boolean onKeyDown(int keyCode, KeyEvent event) {
  return super.onKeyDown(keyCode, event);
 }

 private InputCompleteListener inputCompleteListener;

 public void setInputCompleteListener(InputCompleteListener inputCompleteListener) {
  this.inputCompleteListener = inputCompleteListener;
 }

 public interface InputCompleteListener{
  void inputComplete();
 }

 public EditText getEditText() {
  return editText;
 }

 
 public String getStrPassword() {
  return strPassword;
 }

 public void setContent(String content){
  editText.setText(content);
 }
}

接下来只需要在Activity调用就可以了。

在xml中声明

在Activity中调用

 itemPasswordLayout = (ItemPasswordLayout) findViewById(R.id.act_zhifubao_IPLayout);
  itemPasswordLayout.setInputCompleteListener(new ItemPasswordLayout.InputCompleteListener() {
   @Override
   public void inputComplete() {
    Toast.makeText(ZhifubaoActivity.this, "密码是："+itemPasswordLayout.getStrPassword(), Toast.LENGTH_SHORT).show();
   }
  });

总结

好了，本文的内容到这就结束了，如此就可以了，是不是很简单。希望这篇文章能对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。