欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-03-06 13:38:26
先看一下效果图 实现思路: 变成点的控件不是textview和edittext而是imageview。首先写一个relativelayout里边包含6个im...

先看一下效果图

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

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

实现思路:

变成点的控件不是textviewedittext而是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();
   }
  });

总结

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