Android的支付密码输入框实现浅析
程序员文章站
2024-03-06 13:38:26
先看一下效果图
实现思路:
变成点的控件不是textview和edittext而是imageview。首先写一个relativelayout里边包含6个im...
先看一下效果图
实现思路:
变成点的控件不是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(); } });
总结
好了,本文的内容到这就结束了,如此就可以了,是不是很简单。希望这篇文章能对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。