android自定義仿微信、支付寶 密碼輸入框

#####效果圖：

#####直接上程式碼：

/**
 * 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