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

简介: 目录目录前言最近公司的项目需要实现类似于支付宝输入支付密码的功能,本来打算上网找一个别人写好的直接用,又怕直接用别人的出了问题不能够快速解决,索性就写了一个支付密码控件(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

目录
相关文章
|
5月前
|
小程序 JavaScript API
uniapp微信小程序获取用户手机号
uniapp微信小程序获取用户手机号
148 0
|
3月前
|
前端开发 JavaScript 数据安全/隐私保护
c2c商城登录注册的输入框隐藏
c2c商城登录注册的输入框隐藏
|
4月前
uniapp获取微信用户信息登录
uniapp获取微信用户信息登录
|
7月前
|
移动开发
微信h5扫码接口范例:扫码后内容显示到输入框
微信h5扫码接口范例:扫码后内容显示到输入框
100 0
|
9月前
|
小程序 JavaScript
微信小程序获取用户头像和姓名
微信小程序获取用户头像和姓名
148 0
|
10月前
|
缓存 小程序 前端开发
微信小程序获取用户头像昵称手机号最新版
微信小程序获取用户头像昵称手机号最新版
363 0
|
10月前
|
小程序
微信小程序-获取用户头像信息以及修改用户头像
微信小程序-获取用户头像信息以及修改用户头像
414 0
|
10月前
|
缓存 小程序 Java
微信支付宝双端兼容获取手机号头像昵称
微信支付宝双端兼容获取手机号头像昵称
153 0
|
11月前
|
小程序 JavaScript
微信小程序登录与注册验证码倒计时的效果实现
微信小程序登录与注册验证码倒计时的效果实现
251 0