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

先看一下效果图

实现思路：

变成点的控件不是textview和edittext而是imageview。首先写一个relativelayout里边包含6个imageview和一个edittext(edittext要覆盖imageview)将edittext的背景设置成透明。

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 <linearlayout
  android:layout_width="match_parent"
  android:layout_height="50dp"
  android:orientation="horizontal"
  android:background="@android:color/white">
  <imageview
   android:id="@+id/item_password_iv1"
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:src="@mipmap/nopassword"/>
  <imageview
   android:id="@+id/item_password_iv2"
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:src="@mipmap/nopassword"/>
  <imageview
   android:id="@+id/item_password_iv3"
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:src="@mipmap/nopassword"/>
  <imageview
   android:id="@+id/item_password_iv4"
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:src="@mipmap/nopassword"/>
  <imageview
   android:id="@+id/item_password_iv5"
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:src="@mipmap/nopassword"/>
  <imageview
   android:id="@+id/item_password_iv6"
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:src="@mipmap/nopassword"/>
 </linearlayout>
 <edittext
  android:id="@+id/item_edittext"
  android:layout_width="match_parent"
  android:layout_height="50dp"
  android:background="@android:color/transparent"/>
</relativelayout>

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

/**
 * 密码输入框的控件布局
 * created by went_gone on 2016/9/14.
 */
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;i<stringbuffer.length();i++){
      imageviews[i].setimageresource(r.mipmap.ispassword);
     }
    }
   }
  });
  edittext.setonkeylistener(new onkeylistener() {
   @override
   public boolean onkey(view v, int keycode, keyevent event) {
    if (keycode == keyevent.keycode_del
      && event.getaction() == keyevent.action_down) {
//     log.e("tag", "aftertextchanged: stringbuffer is "+stringbuffer);
     if (onkeydelete()) return true;
     return true;
    }
    return false;
   }
  });
 }

 public boolean onkeydelete() {
  if (count==0){
   count = 6;
   return true;
  }
  if (stringbuffer.length()>0){
   //删除相应位置的字符
   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;
 }

 /**
  * 获取密码
  * @return
  */
 public string getstrpassword() {
  return strpassword;
 }

 public void setcontent(string content){
  edittext.settext(content);
 }
}

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

在xml中声明

 <com.example.went_gone.demo.view.itempasswordlayout
  android:id="@+id/act_zhifubao_iplayout"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
 </com.example.went_gone.demo.view.itempasswordlayout>

在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();
   }
  });

总结

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