仿支付宝微信支付密码输入控件

简介: 目录目录前言最近公司的项目需要实现类似于支付宝输入支付密码的功能,本来打算上网找一个别人写好的直接用,又怕直接用别人的出了问题不能够快速解决,索性就写了一个支付密码控件(GitHub传送门),在这里分享出来。

目录

img_8d2341f052cb2581fd3671176aa1e69c.png
目录

前言

最近公司的项目需要实现类似于支付宝输入支付密码的功能,本来打算上网找一个别人写好的直接用,又怕直接用别人的出了问题不能够快速解决,索性就写了一个支付密码控件(GitHub传送门),在这里分享出来。

效果图

img_8f8f245eea5d39f8250d4f3b96f35f78.gif
效果图

设计思路

这个控件整体可以分为两层:

  • 下层使用EditText来存储输入的密码以及监听密码是否输入完毕,另外注意这里的EditText字体大小一定要设置为0,否则会出现密码和密文重合的现象。
  • 上层根据设置的密码长度来动态的添加TextView,并用TextView显示密文。


    img_fbbb22873f0948be63336eb8a285adaf.png
    设计思路

使用方法

这个控件我增加了自定义属性和输入完毕的监听事件所以使用起来非常简单。

  • 首先在布局文件中添加控件(默认是6位密码,颜色为colorAccent)
<com.itfitness.paypasswordview.widget.PayPasswordView
            android:layout_width="match_parent"
            android:id="@+id/dialog_pay_ppv"
            android:layout_height="40dp">
</com.itfitness.paypasswordview.widget.PayPasswordView>
  • 自定义属性
app:borderWidth="1.5dp"//边框及分割线宽度
app:passTextColor="@android:color/darker_gray"//密文颜色
app:borderColor="@android:color/darker_gray"//边框颜色
app:radius="2dp"//边框圆角大小
app:passLength="8"//密码长度
app:passText="◆"//密文字符
app:passTextSize="16sp"//密文字体大小
  • 添加监听事件
PayPasswordView myModuleDialogPayPv= (PayPasswordView) paydialogView.findViewById(R.id.dialog_pay_ppv);
myModuleDialogPayPv.addInputPassWordFinshListener(new InputPassWordFinshListener() {
            @Override
            public void onInputPassWordFinsh(String password) {
                Toast.makeText(MainActivity.this, password, Toast.LENGTH_SHORT).show();
            }
        });

个人技术博客:https://myml666.github.io

目录
相关文章
|
6月前
|
数据安全/隐私保护
常用的表单校验规则——邮箱/QQ/身份证号码/微信/电话/数字字母/整数/文本/密码等
常用的表单校验规则——邮箱/QQ/身份证号码/微信/电话/数字字母/整数/文本/密码等
177 0
|
数据安全/隐私保护
常用的表单校验规则——邮箱/QQ/身份证号码/微信/电话/数字字母/整数/文本/密码等
常用的表单校验规则——邮箱/QQ/身份证号码/微信/电话/数字字母/整数/文本/密码等
128 0
|
4月前
|
JSON 小程序 JavaScript
【微信小程序-原生开发】TDesign 实战模板——账号密码登录页(含密码显示隐藏的技巧)
【微信小程序-原生开发】TDesign 实战模板——账号密码登录页(含密码显示隐藏的技巧)
132 0
|
6月前
|
JavaScript API 数据安全/隐私保护
vue3制作类微信的六位的密码输入框
vue3制作类微信的六位的密码输入框
179 0
|
安全 数据安全/隐私保护
WebApp - 微信浏览器解决安全提示“防盗号或诈骗,请不要输入QQ密码”
WebApp - 微信浏览器解决安全提示“防盗号或诈骗,请不要输入QQ密码”
285 0
WebApp - 微信浏览器解决安全提示“防盗号或诈骗,请不要输入QQ密码”
|
小程序 前端开发 JavaScript
手把手教你微信小程序如何设置密码输入框
手把手教你微信小程序如何设置密码输入框
931 0
手把手教你微信小程序如何设置密码输入框
|
数据库 数据安全/隐私保护 Android开发
|
数据安全/隐私保护
微信去除 防欺诈盗号请勿支付或输入qq密码 以及 防欺诈或盗号请不要输入qq密码 的方法
本文介绍如何去除微信顶部的“防欺诈盗号,请勿支付或输入qq密码”。或 “防欺诈或盗号,请不要输入qq密码”如图所示。      一、微信认证 目前只有已经通过微信认证的账号可以去除这个提示。在公众账号下左侧列表中找到微信认证,按照提示申请认证即可。
3123 0
|
安全 数据安全/隐私保护
微信任意用户密码修改漏洞分析
【转】网友曝光微信密码漏洞 柳岩马化腾账号被入侵(图) 在微信官方的首页上发现新增了如下功能模块 微信功能模块 访问后看到这个功能。来了兴趣 微信重设密码 在这个页面输入一个已经注册了微信的手机号。
1097 0
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
498 7

热门文章

最新文章

下一篇
无影云桌面