一个优雅的仿微信支付宝密码(验证码)输入框

如今越来越多的app开始添加支付功能，不论哪种支付，不可避免的步骤就是密码的输入，就算没有密码输入，验证码也是少不了的。比较low的实现方式是用一组EditText来拼，每个输入框只允许输入1个字符，通过TextWatcher来监听，输入完成后下一个输入框自动获取焦点。今天介绍一种自定义View的方式实现，优雅而不失逼格！

废话不多说，先上图

Github地址，如果对您有帮助，麻烦给个star，手动狗头

特性

• 仿支付宝微信风格
• 下划线风格
• 可显示明文或者密文，密文支持显示圆点，星号，或者任意字符
• 支持设置密码框之间的间隔和圆角(间隔为0时圆角只显示最左和最右的圆角)
• 支持设置边框和密码的颜色

原理

1. 通过View宽度和间隔宽度计算每个密码框的宽度
2. 绘制边框(区分不同的风格和间距、圆角等)
3. 绘制密码圆点(不同风格有圆点、星号和明文)

注意事项：

1. 绘制圆角canvas.drawRoundRect有api版本限制，所以采用path的方式来绘制
2. 设置圆角、间距后需要重新计算密码框的宽度

核心代码：

@Override
    protected void onDraw(Canvas canvas) {
//        super.onDraw(canvas); // 去掉父类的绘制
        int top = getPaddingTop();
        int bottom = getHeight() - getPaddingBottom();
        int start = getPaddingLeft();
        float left;

        for (int i = 0; i < maxLength; i++) {
            left = start + (boxWidth + spacing) * i;
            rectF.set(left, top, left + boxWidth, bottom);
            drawBorder(canvas, i);// 绘制边框
            if (i >= textLength) continue;
            drawPassword(canvas, i);// 绘制密码
        }
    }
复制代码

使用方式

1. 布局中：

<com.matthew.passwordinput.lib.PasswordInputView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp"
        android:padding="2dp"
        android:text="123"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:pwv_pwdStyle="plaintext"
        app:pwv_radius="10dp"
        app:pwv_spacing="12dp" />
复制代码

2. 设置监听器

passwordView.setInputListener(new PasswordInputView.InputListener() {
        @Override
        public void onInputCompleted(String text) {
            // 输入完成后回调
        }
    });
复制代码

3. 属性参考

<declare-styleable name="PasswordInputView">
        <attr name="pwv_maxLength" format="integer" /> // 最大长度

        <attr name="pwv_borderColor" format="color" /> // 边框颜色
        <attr name="pwv_pwdColor" format="color" /> // 密码颜色

        <attr name="pwv_strokeWidth" format="dimension" /> // 边框宽度
        <attr name="pwv_radius" format="dimension" /> // 圆角半径
        <attr name="pwv_spacing" format="dimension" /> // 每个密码框之间的间距
        <attr name="pwv_asterisk" format="string" /> // 当密码风格为星号风格时，可以用任意字符替换星号，替换的字符为pwv_asterisk的第一个字符

        <attr name="pwv_borderStyle" format="enum"> // 边框风格 方框 和 下划线
            <enum name="box" value="0" />
            <enum name="line" value="1" />
        </attr>
        <attr name="pwv_pwdStyle" format="enum"> // 密码风格 圆点、星号、明文
            <enum name="circle" value="0" />
            <enum name="asterisk" value="1" />
            <enum name="plaintext" value="2" />
        </attr>
    </declare-styleable>
复制代码