- 时间:2022-12-04 01:17 编辑: 来源: 阅读:
- 扫一扫,手机访问
摘要:android仿微信支付宝的支付密码输入框示例
大家好,我是狸小华,萌汉子一枚。今天给大家带来的是仿微信/支付宝的密码输入框。这个效果也出来有一段时间了,所以搜索一下还是有不少的网友实现,但是,但是!经过一番查看后,我发现他们的实现分为两大类。
一,直接继承EditText,然后在ondraw里面做文章;二,EditText外面包一个viewGroup。我不喜欢这两种实现方式,觉着有些臃肿了,所以我详细介绍下我的实现方式:直接继承View,获取用户的输入,然后draw出来。
[img]http://files.jb51.net/file_images/article/201702/201702280916244.gif[/img]
我们实现的是上面的密码输入框,这个键盘。。。系统自带的哦,调用用户输入法输入,方便扩展。
下面,我们来具体分析下怎么实现这个view。先从简单的开始。extends View 然后实现三个构造函数,这些就不细细讲了,然后是onMeasure:
[img]http://files.jb51.net/file_images/article/201702/201702280916245.png[/img]
MeasureWidth和MeasureHeight所做的工作是如果是wrap_content则返回-1,不然返回准确大小。Ps:里面有个前面定义的size变量,表示的是每个格子的边长。
好的测量完了之后我们先来画一下外面的圆角矩形,和里面的分割线。
[img]http://files.jb51.net/file_images/article/201702/201702280916246.png[/img]
浅显易懂,这里宽度和高度之所以-2,是因为,画圆角矩形时,如果线宽度不为1,他是以线宽度的中点为基准画的,会导致下面和右边的线会细一点,所以这里留出一点边。
[img]http://files.jb51.net/file_images/article/201702/201702280916247.png[/img]
那么,画完这些后,填充点数据测试,理所应当的,我们会有下面的效果图。
[img]http://files.jb51.net/file_images/article/201702/201702280916248.png[/img]
看起来好像完成了,其实还早呢,我们还没监听用户的输入,这可是重点,难点,请同学们画起来!让我们回忆下一个普通EditText是怎么获取输入的。1,点击以后获取焦点;2,着色,光标闪动提示;3,弹出软键盘;然后用户输入;那么,我们先来做这件事,点击弹出个键盘先,不然怎么输入?
先在初始化的时候: this.setFocusable(true); this.setFocusableInTouchMode(true);让这个view可以获取焦点,然后再在onTouchEvent
[img]http://files.jb51.net/file_images/article/201702/201702280916249.png[/img]
[url=http://xiazai.jb51.net/201702/yuanma/PswInputViewDemo_jb51.rar]PswInputViewDemo_jb51.rar[/url]
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。