如何使用Android实现常见的验证码输入框-创新互联
小编给大家分享一下如何使用Android实现常见的验证码输入框,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联公司是一家专业的成都网站建设公司,我们专注网站建设、成都网站制作、网络营销、企业网站建设,卖链接,广告投放为企业客户提供一站式建站解决方案,能带给客户新的互联网理念。从网站结构的规划UI设计到用户体验提高,创新互联力求做到尽善尽美。正文
先搂一眼效果吧
不要把注意力都放在头顶的那一抹绿上,重点在输入框,可能大多数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,当然大家也可以直接本地下载。
以上是“如何使用Android实现常见的验证码输入框”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
当前标题:如何使用Android实现常见的验证码输入框-创新互联
分享网址:http://scyanting.com/article/djohjo.html