Android实现常见的验证码输入框实例代码

Android实现常见的验证码输入框实例代码,第1张

概述前言验证码输入框是很多APP必不可少的组件,之前在重构注册登录页面的时候,重新设计了UI,所以不能再简单的用EditText来做了,所以这篇文章将分享一下如何实现一个常见的验证码输入框。下面话不多说了,来一起看看

前言

验证码输入框是很多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,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 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,当然大家也可以直接本地下载。

总结

有时候我们实现一个需求,不光要考虑最终的效果,还要考虑时间成本,能用最简单的方法实现当然是最好的,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对编程小技巧的支持。

总结

以上是内存溢出为你收集整理的Android实现常见的验证码输入框实例代码全部内容,希望文章能够帮你解决Android实现常见的验证码输入框实例代码所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1144512.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-31
下一篇 2022-05-31

发表评论

登录后才能评论

评论列表(0条)

保存