android自定义仿微信、支付宝 密码输入框

效果图：

截图.png

直接上代码：

/**
 * Description: 密码 输入框
 * Created by zouyulong on 2017/7/31.
 */

public class CustomPasswordInputView extends EditText {
    private Context mContext;

    /**
     * 第一个密码实心圆的圆心坐标
     */
    private float mFirstCircleX;
    private float mFirstCircleY;

    /**
     * 当前输入的个数
     */
    private int mCurInputCount = 0;

    /**
     * 实心圆的半径
     */
    private int mCircleRadius = dip2px(getContext(), 5);

    /**
     * view的宽高
     */
    private int mHeight;
    private int mWidth;

    /**
     * 最大输入位数
     */
    private int mMaxCount = 6;

    /**
     * 圆的颜色   默认BLACK
     */
    private int mCircleColor = Color.BLACK;

    /**
     * 边线的颜色
     */
    private int mStrokeColor = Color.BLACK;

    /**
     * 分割线的颜色
     */
    private int mDevideLineColor = Color.BLACK;

    /**
     * 描边的画笔
     */
    private Paint mStrokePaint;

    /**
     * 分割线开始的坐标x
     */
    private int mDivideLineWStartX;

    /**
     * 分割线的宽度
     */
    private int mDivideLineWidth = dip2px(getContext(), 0.5f);

    /**
     * 描边的矩形
     */
    private RectF mFrameRectF = new RectF();

    /**
     * 矩形边框的圆角
     */
    private int mRectAngle = 0;

    /**
     * 竖直分割线的画笔
     */
    private Paint mDivideLinePaint;

    /**
     * 圆的画笔
     */
    private Paint mCirclePaint;

    /**
     * 密码输入完成事件
     */
    private OnPasswordCompleteListener mCompleteListener;

    public CustomPasswordInputView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;

        getAtt(attrs);
        initPaint();

        this.setCursorVisible(false);
        this.setFilters(new InputFilter[]{new InputFilter.LengthFilter(mMaxCount)});

    }

    private void getAtt(AttributeSet attrs) {
        TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.CustomPasswordInputView);
        mMaxCount = typedArray.getInt(R.styleable.CustomPasswordInputView_maxCount, mMaxCount);
        mCircleColor = typedArray.getColor(R.styleable.CustomPasswordInputView_pwdcircleColor, mCircleColor);
        mCircleRadius = typedArray.getDimensionPixelOffset(R.styleable.CustomPasswordInputView_pwdCircleRadius, mCircleRadius);
        mStrokeColor = typedArray.getColor(R.styleable.CustomPasswordInputView_strokeColor, mStrokeColor);
        mDevideLineColor = typedArray.getColor(R.styleable.CustomPasswordInputView_devideLineColor, mDevideLineColor);
        mDivideLineWidth = typedArray.getDimensionPixelSize(R.styleable.CustomPasswordInputView_divideLineWidth, mDivideLineWidth);
        mRectAngle = typedArray.getDimensionPixelOffset(R.styleable.CustomPasswordInputView_rectAngle, mRectAngle);

        typedArray.recycle();
    }

    /**
     * 初始化画笔
     */
    private void initPaint() {
        mCirclePaint = getPaint(dip2px(getContext(), 5), Paint.Style.FILL, mCircleColor);

        mStrokePaint = getPaint(dip2px(getContext(), 0.5f), Paint.Style.STROKE, mStrokeColor);

        mDivideLinePaint = getPaint(mDivideLineWidth, Paint.Style.FILL, mStrokeColor);
    }

    /**
     * 设置画笔
     *
     * @param strokeWidth 画笔宽度
     * @param style       画笔风格
     * @param color       画笔颜色
     * @return
     */
    private Paint getPaint(int strokeWidth, Paint.Style style, int color) {
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setStrokeWidth(strokeWidth);
        paint.setStyle(style);
        paint.setColor(color);
        paint.setAntiAlias(true);

        return paint;
    }


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mHeight = h;
        mWidth = w;

        mDivideLineWStartX = w / mMaxCount;

        mFirstCircleX = w / mMaxCount / 2;
        mFirstCircleY = h / 2;

        mFrameRectF.set(0, 0, mWidth, mHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //不删除的画会默认绘制输入的文字
//        super.onDraw(canvas);
        drawWeChatBorder(canvas);
        drawPsdCircle(canvas);
    }


    /**
     * 画微信支付密码的样式
     *
     * @param canvas
     */
    private void drawWeChatBorder(Canvas canvas) {

        canvas.drawRoundRect(mFrameRectF, mRectAngle, mRectAngle, mStrokePaint);

        for (int i = 0; i < mMaxCount - 1; i++) {
            canvas.drawLine((i + 1) * mDivideLineWStartX,
                    0,
                    (i + 1) * mDivideLineWStartX,
                    mHeight,
                    mDivideLinePaint);
        }

    }

    /**
     * 画密码实心圆
     *
     * @param canvas
     */
    private void drawPsdCircle(Canvas canvas) {
        for (int i = 0; i < mCurInputCount; i++) {
            canvas.drawCircle(mFirstCircleX + i * 2 * mFirstCircleX,
                    mFirstCircleY,
                    mCircleRadius,
                    mCirclePaint);
        }
    }

    @Override
    protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
        super.onTextChanged(text, start, lengthBefore, lengthAfter);
        mCurInputCount = text.toString().length();
        if (mCurInputCount == mMaxCount && mCompleteListener !=null) {
            mCompleteListener.onComplete(getPasswordString());
        }
        invalidate();
    }

    @Override
    protected void onSelectionChanged(int selStart, int selEnd) {
        super.onSelectionChanged(selStart, selEnd);
        //保证光标始终在最后
        if (selStart == selEnd) {
            setSelection(getText().length());
        }
    }

    /**
     * 获取输入的密码
     *
     * @return
     */
    public String getPasswordString() {
        return getText().toString().trim();
    }

    /**
     * 密码输入完成回调
     */
    public interface OnPasswordCompleteListener {
        void onComplete(String password);
    }

    public void setOnCompleteListener(OnPasswordCompleteListener mListener) {
        this.mCompleteListener = mListener;
    }

    /**
     * dp转px  自定义事件注意使用dp为单位
     * @param var0
     * @param var1
     * @return
     */
    public static int dip2px(Context var0, float var1) {
        float var2 = var0.getResources().getDisplayMetrics().density;
        return (int)(var1 * var2 + 0.5F);
    }
}

就不做讲解了，每一行代码都做了详细的注解，代码已经上传到了github上面。

github地址：

https://github.com/zyl409214686/CustomPasswordInputView.git