自定义密码输入框

如果是做电商或者金融借贷的App，可能会用到密码输入框的情况。这也是一个简单的View，通过绘制边框、分割线，密码圆点实现。该view自定义了密码长度，线粗细、颜色，圆点大小、颜色等属性。

效果图：

PsdBoxView代码：

/**
 * 密码输入框：可自定义属性包括：密码长度，边框颜色，边框粗细，圆点颜色，圆点大小
 */
public class PsdBoxView extends AppCompatEditText {
    private Paint borderPaint, dotPaint;
    /** 当前输入文字长度 */
    private int curTextLeng;
    private OnInputFinishListener finishListener;
    /** 密码长度 */
    private int maxLength;
    /** 边框长度 */
    private float borderWidth;
    /** 边框颜色 */
    private int borderColor;
    /** 圆角半径 */
    private float borderRadus;
    /** 圆点半径 */
    private float dotRadus;
    /** 圆点颜色 */
    private int dotColor;

    public PsdBoxView(Context context) {
        super(context);
        init();
    }

    public PsdBoxView(Context context, AttributeSet attrs) {
        super(context, attrs);

        initAttrs(context, attrs);
        init();
    }

    @TargetApi(Build.VERSION_CODES.M)
    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PsdBoxView);
        maxLength = array.getInteger(R.styleable.PsdBoxView_maxleng, 6);
        borderWidth = array.getDimension(R.styleable.PsdBoxView_border_width, 1);
        borderColor = array.getColor(R.styleable.PsdBoxView_border_color, context.getColor(R.color.colorPrimary));
        borderRadus = array.getDimension(R.styleable.PsdBoxView_border_radus, 5);
        dotRadus = array.getDimension(R.styleable.PsdBoxView_dot_radus, 2);
        dotColor = array.getColor(R.styleable.PsdBoxView_dot_color, context.getColor(R.color.colorPrimary));
    }

    private void init() {
        initPaint();
        setInputType(InputType.TYPE_CLASS_NUMBER);
        setTextSize(0);  //隐藏默认的文字，设置字体大小为0，或者设置文字颜色透明
        setEditTextListener();
    }

    /**
     * 初始画笔
     */
    private void initPaint() {
        borderPaint = new Paint();
        borderPaint.setColor(borderColor);
        borderPaint.setStrokeWidth(borderWidth);
        borderPaint.setStyle(Paint.Style.STROKE);

        dotPaint = new Paint();
        dotPaint.setColor(dotColor);
        dotPaint.setStyle(Paint.Style.FILL);
    }

    /**
     * 设置输入框数字监听
     */
    private void setEditTextListener() {
        addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) { }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) { }

            @Override
            public void afterTextChanged(Editable s) {
                //文字长度改变，重新刷新绘制
                curTextLeng = s.toString().length();
                invalidate();
                if (curTextLeng == maxLength) {
                    //监听是否输入结束
                    if (finishListener != null) {
                        finishListener.onfinish(s.toString());
                    }
                }
            }
        });
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //绘制自身大小的圆角边框
        RectF rectF = new RectF(0, 0, getWidth(), getHeight());
        canvas.drawRoundRect(rectF, borderRadus, borderRadus, borderPaint);

        int spaceWidth = getWidth() / maxLength;  //每隔方框宽度
        //绘制分割线
        for (int i = 1; i < maxLength; i++) {
            canvas.drawLine(spaceWidth * i, 0, spaceWidth * i, getHeight(), borderPaint);
        }

        //绘制圆点
        for (int i = 0; i < curTextLeng; i++) {
            int left = spaceWidth / 2 + spaceWidth * i;
            canvas.drawOval(left - dotRadus, getHeight() / 2 - dotRadus, left + dotRadus, getHeight() / 2 + dotRadus, dotPaint);
        }
    }

    public void setInputFinishListener(OnInputFinishListener finishListener) {
        this.finishListener = finishListener;
    }

    public interface OnInputFinishListener {
        void onfinish(String number);
    }

}

自定义属性：

<declare-styleable name="PsdBoxView">
        <attr name="maxleng" format="integer"/>
        <attr name="border_width" format="dimension"/>
        <attr name="border_color" format="color"/>
        <attr name="border_radus" format="dimension"/>
        <attr name="dot_radus" format="dimension"/>
        <attr name="dot_color" format="color"/>
    </declare-styleable>

布局文件：

稍微改了属性值的两个view。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <com.example.com.passwordboxview.PsdBoxView
        android:id="@+id/view_psd"
        android:layout_width="250dp"
        android:layout_height="50dp"
        android:maxLength="6"
        android:background="@null"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:cursorVisible="false"
        app:maxleng="6"
        app:border_width="1.5dp"
        app:border_color="@color/colorPrimary"
        app:border_radus="8dp"
        app:dot_radus="5dp"
        app:dot_color="@color/colorAccent"/>

    <com.example.com.passwordboxview.PsdBoxView
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:maxLength="6"
        android:background="@null"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:cursorVisible="false"
        android:layout_below="@id/view_psd"
        app:maxleng="4"
        app:border_width="1.5dp"
        app:border_color="#000"
        app:border_radus="5dp"
        app:dot_radus="4dp"
        app:dot_color="@color/colorPrimary" />

</RelativeLayout>