(轉)[原] Android 自定義View 密碼框 例子

聽從準則

暴露您view中全部影響可見外觀的屬性或者行爲。html

  • 經過XML添加和設置樣式
  • 經過元素的屬性來控制其外觀和行爲,支持和重要事件交流的事件監聽器

詳細步驟見:Android 自定義View步驟java

樣子

S40620-155511

支持的樣式

能夠經過XML定義影響外邊和行爲的屬性以下git

邊框圓角值,邊框顏色,分割線顏色,邊框寬度,密碼長度,密碼大小,密碼顏色github

<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"/>
    <attr name="passwordColor" format="color"/>
    <attr name="passwordRadius" format="dimension"/>
</declare-styleable>

 

同時支持原來EditText功能,能夠得到數據值,數字鍵盤設置等canvas

繪製邏輯的主要代碼

protected void onDraw(Canvas canvas) {
    int width = getWidth();
    int height = getHeight();
 
    // 外邊框
    RectF rect = new RectF(0, 0, width, height);
    borderPaint.setColor(borderColor);
    canvas.drawRoundRect(rect, borderRadius, borderRadius, borderPaint);
 
    // 內容區
    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-PasswordInputViewpost

相關文章
相關標籤/搜索