当前位置： 移动技术网 > IT编程>移动开发>Android > Android实现常见的验证码输入框实例代码

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

2019年07月24日  | 移动技术网IT编程  | 我要评论

龙部落电影网,黄昏操逼去,数字图像处理实验

前言

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

总结

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网