The custom view password box is equivalent to the Alipay payment password box

Android Custom View Password Box Example
Follow guidelines

Style image link: http://images.cnitblog.com/blog/275810/201406/201603541141956.jpg Expose


all properties or behaviors in your view that affect the visible appearance.

    Add and set styles through XML
    to control the appearance and behavior of elements through attributes, and support event listeners for communicating with important events

. The attributes that affect the outer edge and behavior can be defined through XML as follows:

border fillet value, border color, dividing line color, border width, password length, password size, password color

<declare-styleable name="PasswordInputView">
    <attr name="borderWidth" format="dimension"/>
    <attr name="borderColor" format="color"/>
    <attr name="borderRadius" format="dimension"/>
    <attr name="passwordLength" format="integer"/>
    <attr name="passwordWidth" format="dimension"/>


</declare-styleable>

Also supports the original EditText function, you can get data values, numeric keyboard settings, etc. The main code of the
drawing logic

protected void onDraw(Canvas canvas) {
    int width = getWidth();
    int height = getHeight();

    // Outer border
    RectF rect = new RectF(0, 0, width, height) ; borderPaint.setColor
    (borderColor);
    canvas.drawRoundRect(rect, borderRadius, borderRadius, borderPaint);

    // Content area
    RectF rectIn = new RectF(rect.left + defaultContMargin, rect.top + defaultContMargin,
            rect.right - defaultContMargin, rect.bottom - defaultContMargin); borderPaint.setColor
    (Color.WHITE);
    canvas.drawRoundRect(rectIn, borderRadius, borderRadius, borderPaint);

    // 分割线
    borderPaint.setColor(borderColor);
    borderPaint.setStrokeWidth(defaultSplitLineWidth);
    for (int i = 1; i < passwordLength; i++) {
        float x = width * i / passwordLength;
        canvas.drawLine(x, 0, x, height, borderPaint);
    }

    // 密码
    float cx, cy = height/ 2;
    float half = width / passwordLength / 2;
    for(int i = 0; i < textLength; i++) {
        cx = width * i / passwordLength + half;
        canvas.drawCircle(cx, cy, passwordWidth, passwordPaint);
    }
}  


完整代码下载

https://github.com/tianshaojie/Android-PasswordInputView

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326612871&siteId=291194637