Android实现常见的验证码输入框实例代码
前言
验证码输入框是很多app必不可少的组件,之前在重构注册登录页面的时候,重新设计了ui,所以不能再简单的用edittext来做了,所以这篇文章将分享一下如何实现一个常见的验证码输入框。下面话不多说了,来一起看看详细的介绍吧。
正文
先搂一眼效果吧
不要把注意力都放在头顶的那一抹绿上,重点在输入框,可能大多数app里都是采用6个方框的ui效果,我这里是按照我们设计的要求,用6根横线来划出6个数字的位置。一开始我想的是直接用6个textview,然后传递焦点的做法,但是发现实现起来有一定的难度。又在网上查了一下,发现比较靠谱的办法是用6个textview加一个edittext来实现,也按照这个方法去实现了,但是后来在测试的时候就发现了问题:网上给出的实现方式需要监听软键盘的删除按钮
edittext.setonkeylistener(new onkeylistener() { @override public boolean onkey(view v, int keycode, keyevent event) { if (keycode == keyevent.keycode_del && event.getaction() == keyevent.action_down) { //todo: return true; } return false; } });
这是一个大家熟知的写法,但是这个监听的方法其实并不靠谱(在安卓原生键盘上就监听不到),因为这个监听是否触发,并没有强制的要求,全看输入法开发者的心情,这是官方文档中的描述:
key presses in software keyboards will generally not trigger this method, although some may elect to do so in some situations.
只能输入,不能删除,这可不行啊,用户肯定会骂娘的,我可不想被拿去去祭天什么的...
于是乎只能想办法在原有的基础上做一些修改,来规避这个问题,最后采用的方案是:采用一个textview的数组来维护6个textview,然后藏一个透明的edittextview在后面用于接收用户输入的内容,再把输入的内容展示到6个textview上就行了,ui什么的可以自己随意设计。在实现的过程中,遇到的一个关键问题就是:当输入的内容超过6位以后我该如何处理?一开始的方案是通过判断当前输入的位数然后再做相应的处理,网上的方案也是这么实现的,我后来一想,根本用不着这么麻烦,只需要一行属性就能解决这个问题:
android:maxlength="6"
只需要在edittext的属性里限制它的最大长度,就不用再去代码里做处理了,直接把edittextview里的内容完全照搬到textview上就可以了。
最终的完整代码如下:
public class verifycodeview extends relativelayout { private edittext edittext; private textview[] textviews; private static int max = 6; private string inputcontent; public verifycodeview(context context) { this(context, null); } public verifycodeview(context context, attributeset attrs) { this(context, attrs, 0); } public verifycodeview(context context, attributeset attrs, int defstyleattr) { super(context, attrs, defstyleattr); view.inflate(context, r.layout.view_verify_code, this); textviews = new textview[max]; textviews[0] = (textview) findviewbyid(r.id.item_code_iv0); textviews[1] = (textview) findviewbyid(r.id.item_code_iv1); textviews[2] = (textview) findviewbyid(r.id.item_code_iv2); textviews[3] = (textview) findviewbyid(r.id.item_code_iv3); textviews[4] = (textview) findviewbyid(r.id.item_code_iv4); textviews[5] = (textview) findviewbyid(r.id.item_code_iv5); edittext = (edittext) findviewbyid(r.id.item_edittext); edittext.setcursorvisible(false);//隐藏光标 setedittextlistener(); } private void setedittextlistener() { 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) { inputcontent = edittext.gettext().tostring(); if (inputcompletelistener != null) { if (inputcontent.length() >= max) { inputcompletelistener.inputcomplete(); } else { inputcompletelistener.invalidcontent(); } } for (int i = 0; i < max; i++) { if (i < inputcontent.length()) { textviews[i].settext(string.valueof(inputcontent.charat(i))); } else { textviews[i].settext(""); } } } }); } private inputcompletelistener inputcompletelistener; public void setinputcompletelistener(inputcompletelistener inputcompletelistener) { this.inputcompletelistener = inputcompletelistener; } public interface inputcompletelistener { void inputcomplete(); void invalidcontent(); } public string geteditcontent() { return inputcontent; } }
如果需要完整的demo,可以访问我的github:https://github.com/jb274585381/verifycodeviewdemo,当然大家也可以直接本地下载。
总结
有时候我们实现一个需求,不光要考虑最终的效果,还要考虑时间成本,能用最简单的方法实现当然是最好的,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。