我司之前有個需求，要求類似支付寶那樣的密碼支付，產品要求輸入的當前字元需要是明文密碼，1s後轉換為圓點，原本想網上那麼多密碼輸入框，肯定沒問題，結果UI一出圖就懵逼了，翻遍了各個角落，都找不到類似的密碼輸入框，沒辦法，自己寫吧。
使用方法，在gradle中新增：compile ‘com.rokudoll:PswText:1.0.0’即可使用
當然繪製思路參照了其他大佬的思路，言歸正傳，先來看看效果圖：

需求分析

拿到效果圖，再結合產品的要求，整理出以下要求：
1、類似EditText的password模式，輸入密碼時，輸入的當前密碼為明文，而之前的密碼變為圓點，1s後當前密碼也變為圓點
2、整體密碼框為一個顏色，而已輸入或當前輸入密碼位置的密碼框為另一個顏色
3、有陰影

程式碼實現

自定義view的流程就不再贅述了，不太清楚的可以去看看鴻洋和郭林的教程，先寫好自定義屬性，按照之前分析的結果以及自己的一點想法，為了更方便的使用，就有了以下的自定義屬性，目前沒有使用列舉，全部都是以boolean值來規定使用哪種模式，不過之後會換成列舉，那麼先來看看有哪些自定義屬性：

attrs

設定好自定義屬性後，就開始實現這個自定義控制元件了！首先肯定是計算寬高

onMeasure

作為一個數學很差的人，計算這個的過程確實是比較糟心的。。直接看圖吧

圖中說明兩處：
1、spacingWidth：為什麼在寬度已知的情況下，spacingWidth = borderWidth / 4：
很簡單，因為用邊框的寬度除以4得到的大小剛好是能讓我接受的大小，且在pswLength = 7、8、9、10的時候，寬度也比較合適，說白了就是一點點湊出來的
2、borderWidth：為什麼在寬度已知的情況下，borderWidth = (width 4) / ((5 pswLength) - 1)，
這個其實很好理解，當寬度已知的時候，borderWidth = width / 6 - spacingWidth，即寬度除以6減去一個間隙的寬度就等於一個邊框的寬度，而間隙的寬度 = borderWidth /4，那麼我們換算成一個方程式來看看，就一目瞭然了,如果這個方程式還看不懂，那就去請教一下初中數學老師吧。。

來看看完整程式碼：

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSpec = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);

        int heightSpec = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        if (widthSpec == MeasureSpec.AT_MOST) {
            if (heightSpec != MeasureSpec.AT_MOST) {//高度已知但寬度未知時
                spacingWidth = heightSize / 4;
                widthSize = (heightSize * pswLength) + (spacingWidth * (pswLength - 1));
                borderWidth = heightSize;
            } else {//寬度，高度都未知時
                widthSize = (borderWidth * pswLength) + (spacingWidth * (pswLength - 1));
                heightSize = (int) (borderWidth + ((borderPaint.getStrokeWidth()) * 2));
            }
        } else {
            //寬度已知但高度未知
            if (heightSpec == MeasureSpec.AT_MOST) {
                borderWidth = (widthSize * 4) / (5 * pswLength);
                spacingWidth = borderWidth / 4;
                heightSize = (int) (borderWidth + ((borderPaint.getStrokeWidth()) * 2));
            }
        }
        setMeasuredDimension(widthSize, heightSize);
    }

解釋一下為什麼高度要加上borderPaint.getStrokeWidth()2，很簡單，如果直接取每個密碼框的寬度作為高度的話，會出現密碼框上下兩根線繪製不完全的問題，因為畫筆的寬度也是佔了一定的大小的，所以我們在繪製高度時要留足夠的高度來繪製整個view，為什麼是2呢？因為上下兩根線。。當然要加兩次，所以是乘以2

按這種演算法繪製出的view，其實右邊還多了一個spacingWidth的寬度，因為我們給每一個邊框都減去了一個spacingWidth的寬度，所以會多出一個spacingWidth的寬度，不過並不影響，我們可以在onDraw裡把每一個密碼框往右移0.5個spacingWidth的寬度，這樣左右都空出了一小段空隙，視覺效果上也好看一點，直接來看看onDraw

onDraw

繪製pswLength數量個密碼框

先說說思路，我們用for迴圈的方式，迴圈繪製出pswLength個密碼框，用canvas.drawRoundRect繪製密碼框，如果使用圖片的話，就繪製圖片，那麼來看看canvas.drawRoundRect需要傳遞的引數:

drawRoundRect(RectF rect, float rx, float ry, Paint paint)

rect：RectF物件，邊框的具體座標
rx,ry：圓角x,y軸的半徑
paint：畫筆
那我們先來計算邊框的具體座標，來看看草稿：

沒錯，這草稿就是這麼low，數學差。。就是這麼心酸，不過已經可以看出規律，前面說過，我們是用for迴圈的方式迴圈繪製出各個密碼框，那麼總結一下：
top = 0 + (borderPaint.getStrokeWidth())
bottom = height - (borderPaint.getStrokeWidth())
left = i (borderWidth + spacingWidth)
right = borderWidth + i (borderWidth + spacingWidth)
= ((i + 1) borderWidth) + (i spacingWidth)

為什麼top加上了borderPaint.getStrokeWidth()，而bottom又減去了borderPaint.getStrokeWidth()？

還記得我們在onMeasure處計算高度時，增加了borderPaint.getStrokeWidth()*2嗎，我們的密碼框在繪製時，為了把整個view往下移一個畫筆寬度的位置，就需要在top出加上一個畫筆寬度的大小。
而為什麼bottom又要減去一個畫筆寬度呢？仔細想想看，我們的bottom是用view的高度-一個畫筆的寬度，而height是在邊框的寬度基礎上加上了兩個畫筆的寬度的，減去一個就正好是把整個view往下移了一個畫筆的寬度

但是這樣繪製出來的密碼框，就像前面提過的，右邊會多出一個spacingWidth，所以我們left和right的座標需要再改進一下:
int left = (int) ( (i (borderWidth + spacingWidth)) + (0.5 spacingWidth));
int right = (int) (((i + 1) borderWidth) + (i spacingWidth) + (0.7 * spacingWidth));
有同學要問了，為毛right要乘以0.7而不是0.5，因為乘以0.5邊框位置還是不對呀！微調一下，乘以0.7剛剛好。
到這裡並沒有結束，為啥？因為說好的可以用圖片來繪製邊框，我們還沒有實現這一步，不過也很簡單，不需要重新計算座標，直接貼該部分的完整程式碼：

private void drawBorder(Canvas canvas, int height) {
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), borderImg);
        Rect src = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        for (int i = 0; i < pswLength; i++) {
            int left = (int) ( (i * (borderWidth + spacingWidth)) + (0.5 * spacingWidth));
            int right = (int) (((i + 1) * borderWidth) + (i * spacingWidth) + (0.7 * spacingWidth));
            if (isBorderImg) {
                Rect dst = new Rect(left, 0, right, height);
                canvas.drawBitmap(bitmap, src, dst, borderPaint);
            } else {
                borderRectF.set(left, 0, right, height);
                canvas.drawRoundRect(borderRectF, borderRadius, borderRadius, borderPaint);
            }
        }
        bitmap.recycle();

    }

只繪製明文密碼模式

這個很簡單，就不多做解釋了

private void drawText(Canvas canvas, String num, int i) {
    Rect mTextBound = new Rect();
    pswTextPaint.getTextBounds(num, 0, num.length(), mTextBound);
    Paint.FontMetrics fontMetrics = pswTextPaint.getFontMetrics();
    float textX = (float) ((i * (borderWidth + spacingWidth)) + (borderWidth / 2 - mTextBound.width() / 2) + (0.5 * spacingWidth));
    float textY = (getMeasuredHeight() - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top;
    if (saveResult != 0 || saveResult < result.size()) {
        canvas.drawText(num, textX, textY, pswTextPaint);
    }
}

說明一點，為什麼在textX最後要加0.5*spacingWidth，因為我們繪製密碼框的時候就多增加了這麼多的寬度，所以繪製文字也要做同樣的操作，同理，繪製圓點時也是一樣，後面不多做贅述

只繪製圓點模式

for (int i = 0; i < result.size(); i++) {
                float circleX = (float) ((i * (borderWidth + spacingWidth)) + (borderWidth / 2)  + (0.6 * spacingWidth));
                float circleY = borderWidth / 2;
                int left = (int) (i * (borderWidth + spacingWidth) + (0.5 * spacingWidth));
                int right = (int) (((i + 1) * borderWidth) + (i * spacingWidth) + (0.7 * spacingWidth));
                drawBitmapOrBorder(canvas, left, right, height);
                canvas.drawCircle(circleX, circleY, dotRadius, pswDotPaint);
            }

繪製輸入密碼時密碼框變換樣式：

private void drawBitmapOrBorder(Canvas canvas, int left, int right, int height) {
    if (isBorderImg) {
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), inputBorderImg);
        Rect src = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        Rect dst = new Rect(left, 0, right, height);
        canvas.drawBitmap(bitmap, src, dst, inputBorderPaint);
        bitmap.recycle();
    } else {
        borderRectF.set(left, 0, right, height);
        canvas.drawRoundRect(borderRectF, borderRadius, borderRadius, inputBorderPaint);
    }
}

輸入密碼時，輸入的當前密碼為明文，1s後變為圓點模式，即預設模式

if (invalidated) {
                drawDelayCircle(canvas, height, dotRadius);
                return;
            }
            for (int i = 0; i < result.size(); i++) {
                //密碼明文
                String num = result.get(i) + "";
                //圓點座標
                float circleX = (float) (((i - 1) * (borderWidth + spacingWidth)) + (borderWidth / 2) + (0.6 * spacingWidth));
                float circleY = borderWidth / 2;
                //密碼框座標
                int left = (int) (i * (borderWidth + spacingWidth) + (0.5 * spacingWidth));
                int right = (int) (((i + 1) * borderWidth) + (i * spacingWidth) + (0.7 * spacingWidth));

            drawBitmapOrBorder(canvas, left, right, height);

            drawText(canvas, num, i);

            //當輸入位置 = 輸入的長度時，即判斷當前繪製的位置是否為當前密碼位置，若是則延遲1s後繪製圓點
            if (i + 1 == result.size()) {
                handler.sendEmptyMessageDelayed(1, delayTime);
            }
            //若按下back鍵儲存的密碼 > 輸入的密碼長度，則只繪製圓點
            //即按下back鍵時，不繪製明文密碼
            if (!isShowTextPsw) {
                if (saveResult > result.size()) {
                    canvas.drawCircle((float) ((i * (borderWidth + spacingWidth)) + (borderWidth / 2 + (0.6 * spacingWidth))), circleY, dotRadius, pswDotPaint);
                }
            }
            //當輸入第二個密碼時，才開始繪製圓點
            if (i >= 1) {
                canvas.drawCircle(circleX, circleY, dotRadius, pswDotPaint);
            }
        }
    }

可能有同學注意到，這裡我們計算的圓點座標跟之前計算的不一樣，為什麼呢？因為在這裡，我們計算的圓點座標分為兩種情況：
1、輸入密碼時，已輸入的密碼變為圓點，那麼我們的圓點座標就應該是用(i - 1)的方式去計算，這樣才能實現輸入到第二個密碼時，第一個密碼變為圓點
2、輸入密碼時，延遲1s後當前明文密碼變為圓點，那麼圓點座標就應該是(i + 1)的方式計算

延遲繪製圓點

private void drawDelayCircle(Canvas canvas, int height, int dotRadius) {
    invalidated = false;
    for (int i = 0; i < result.size(); i++) {
        float circleX = (float) (((i - 1) * (borderWidth + spacingWidth)) + (borderWidth / 2) + (0.6 * spacingWidth));
        float circleY = borderWidth / 2;
        int left = (int) (i * (borderWidth + spacingWidth) + (0.5 * spacingWidth));
        int right = (int) (((i + 1) * borderWidth) + (i * spacingWidth) + (0.7 * spacingWidth));
        canvas.drawCircle(circleX, circleY, dotRadius, pswDotPaint);
        drawBitmapOrBorder(canvas, left, right, height);
    }
    canvas.drawCircle((float) ((float) (((result.size() - 1) * (borderWidth + spacingWidth)) + (borderWidth / 2)) + (0.6 * spacingWidth)),
            borderWidth / 2, dotRadius, pswDotPaint);
    handler.removeMessages(1);
}

以上就是全部的繪製邏輯，計算座標這類似乎沒什麼好解釋的，接下來就是自定義鍵盤，介面不需要我們自己再重新設計，用系統的就好，來看看程式碼

鍵盤

class NumKeyListener implements OnKeyListener {
        @Override
        public boolean onKey(View v, int keyCode, KeyEvent event) {
            if (event.getAction() == KeyEvent.ACTION_DOWN) {
                if (event.isShiftPressed()) {//處理*#等鍵
                    return false;
                }
                if (keyCode >= KeyEvent.KEYCODE_0 && keyCode <= KeyEvent.KEYCODE_9) {//只處理數字
                    if (result.size() < pswLength) {
                        result.add(keyCode - 7);
                        invalidate();
                        ensureFinishInput();
                    }
                    return true;
                }
                if (keyCode == KeyEvent.KEYCODE_DEL) {
                    if (!result.isEmpty()) {//不為空，刪除最後一個
                        saveResult = result.size();
                        result.remove(result.size() - 1);
                        invalidate();
                    }
                    return true;
                }
                if (keyCode == KeyEvent.KEYCODE_ENTER) {
                    ensureFinishInput();
                    return true;
                }
            }
            return false;
        }

說明一下只處理數字那部分，為什麼是keyCode - 7，我們點進原始碼看看

可以看出，我們用keyCode - 7就剛好等於輸入的數字
最終效果：

結語

以上就是該自定義view的全部說明，並未貼出全部的完整程式碼，如有需要可到GitHub檢視完整原始碼，如果喜歡或覺得該控制元件對你有幫助還請點個star，文中如有錯誤還請指出，謝謝