自定義view密碼框等同於支付寶支付密碼框
Android 自定義View 密碼框 例子
遵從準則
樣式圖片鏈接:http://images.cnitblog.com/blog/275810/201406/201603541141956.jpg
暴露您view中所有影響可見外觀的屬性或者行爲。
通過XML添加和設置樣式
通過元素的屬性來控制其外觀和行爲,支持和重要事件交流的事件監聽器
可以通過XML定義影響外邊和行爲的屬性如下
邊框圓角值,邊框顏色,分割線顏色,邊框寬度,密碼長度,密碼大小,密碼顏色
<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功能,可以獲得數據值,數字鍵盤設置等
繪製邏輯的主要代碼
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-PasswordInputView
遵從準則
樣式圖片鏈接:http://images.cnitblog.com/blog/275810/201406/201603541141956.jpg
暴露您view中所有影響可見外觀的屬性或者行爲。
通過XML添加和設置樣式
通過元素的屬性來控制其外觀和行爲,支持和重要事件交流的事件監聽器
可以通過XML定義影響外邊和行爲的屬性如下
邊框圓角值,邊框顏色,分割線顏色,邊框寬度,密碼長度,密碼大小,密碼顏色
<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功能,可以獲得數據值,數字鍵盤設置等
繪製邏輯的主要代碼
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-PasswordInputView
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.