Android自定義PasswordInputView密碼輸入
歡迎來(lái)到“實(shí)現(xiàn)自定義密碼輸入控件”這一章節(jié),PasswordInputView定義了密碼輸入的監(jiān)聽,支持直接在布局文件定義屬性值、支持直接獲取密碼輸入的長(zhǎng)度、原始密碼……
先上圖

PasswordInputView是做什么的?
PasswordInputView是一個(gè)自定義密碼輸入的控件,類似支付寶、微信支付的密碼輸入,同時(shí)定義了密碼輸入的監(jiān)聽,支持直接在布局文件定義屬性值、支持直接獲取密碼輸入的長(zhǎng)度、原始密碼等,還可以擴(kuò)展其他方法,請(qǐng)自行實(shí)現(xiàn)。
實(shí)現(xiàn)原理
1.創(chuàng)建一個(gè)類 ‘PasswordInputView' ,讓其繼承EditText,因?yàn)槲覀円獙?shí)現(xiàn)的自定義view是用來(lái)密碼輸入的,所以必須繼承EditText。
2.為了在布局(layout)文件(.xml)能直接定義PasswordInputView各個(gè)屬性的值,我們需要定義PasswordInputView帶AttributeSet 參數(shù)的構(gòu)造方法。
public PasswordInputView(Context context, AttributeSet attr) {
super(context, attr);
init(context, attr);
}
3.在'value/attrs.xml'中定義PasswordInputView各個(gè)屬性及其類型,如:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="Passwordinputview">
<attr name="passwordLength" format="integer"/>
<attr name="borderWidth" format="dimension"/>
<attr name="borderRadius" format="dimension"/>
<attr name="borderColor" format="color"/>
<attr name="passwordWidth" format="dimension"/>
<attr name="passwordColor" format="color"/>
</declare-styleable>
</resources>
4.重載OnDraw(Canvas canvas)方法,并在其實(shí)現(xiàn)畫邊框、畫內(nèi)容區(qū)域(以填充模式繪制Paint.Style.FILL)、畫分割線、畫實(shí)心圓點(diǎn)(密碼)。有人可能會(huì)問(wèn):畫了邊框、分割線,就可以了,為什么還要畫內(nèi)容區(qū)域?問(wèn)得好,筆者在實(shí)現(xiàn)過(guò)程中也碰到這個(gè)問(wèn)題,當(dāng)時(shí)沒(méi)有畫內(nèi)容區(qū)域,導(dǎo)致輸入的原始內(nèi)容也顯示出來(lái)了(如下異常圖),所以畫內(nèi)容區(qū)域(以填充模式繪制Paint.Style.FILL)是為了掩蓋原始內(nèi)容不被發(fā)現(xiàn),切記必不可少。

正確代碼如下:
private void init(Context context, AttributeSet attr) {
TypedArray ta = context.obtainStyledAttributes(attr, R.styleable.Passwordinputview);
try {
passwordLength = ta.getInt(R.styleable.Passwordinputview_passwordLength, passwordLength);
borderWidth = ta.getDimensionPixelSize(R.styleable.Passwordinputview_borderWidth, borderWidth);
borderRadius = ta.getDimensionPixelSize(R.styleable.Passwordinputview_borderRadius, borderRadius);
borderColor = ta.getColor(R.styleable.Passwordinputview_borderColor, borderColor);
passwordWidth = ta.getDimensionPixelSize(R.styleable.Passwordinputview_passwordWidth, passwordWidth);
passwordColor = ta.getColor(R.styleable.Passwordinputview_passwordColor, passwordColor);
} catch (Exception e) {
}
ta.recycle();
borderPaint = new Paint();
borderPaint.setAntiAlias(true);
borderPaint.setColor(borderColor);
borderPaint.setStrokeWidth(borderWidth);
borderPaint.setStyle(Paint.Style.FILL); //以填充模式來(lái)畫,防止原始輸入內(nèi)容顯示出來(lái)
passwordPaint = new Paint();
passwordPaint.setAntiAlias(true);
passwordPaint.setColor(passwordColor);
passwordPaint.setStrokeWidth(passwordWidth);
}
@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
int width = getWidth();
int height = getHeight();
//畫邊框
RectF rect = new RectF(0, 0, width, height);
borderPaint.setColor(borderColor);
canvas.drawRoundRect(rect, borderRadius, borderRadius, borderPaint);
//畫內(nèi)容區(qū)域,與上面的borderPaint.setStyle(Paint.Style.FILL)對(duì)應(yīng), 防止原始輸入內(nèi)容顯示出來(lái)
RectF rectContent = new RectF(rect.left + defaultContentMargin, rect.top + defaultContentMargin, rect.right - defaultContentMargin, rect.bottom - defaultContentMargin);
borderPaint.setColor(Color.WHITE);
canvas.drawRoundRect(rectContent, borderRadius, borderRadius, borderPaint);
//畫分割線:分割線數(shù)量比密碼數(shù)少1
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);
}
//畫密碼內(nèi)容
float px, py = height / 2;
float halfWidth = width / passwordLength / 2;
for (int i = 0; i < textLength; i++) {
px = width * i / passwordLength + halfWidth;
canvas.drawCircle(px, py, passwordWidth, passwordPaint);
}
}
5.定義“設(shè)置屬性值”的方法,如下
public void setBorderWidth(int borderWidth) {
this.borderWidth = borderWidth;
borderPaint.setStrokeWidth(borderWidth);
postInvalidate();
}
動(dòng)態(tài)圖

項(xiàng)目源碼
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android中的windowSoftInputMode屬性詳解
- android 使用uinput模擬輸入設(shè)備的方法
- Android WebView 不支持 H5 input type="file" 解決方法
- Android 數(shù)據(jù)存儲(chǔ)之 FileInputStream 工具類及FileInputStream類的使用
- Android編程開發(fā)之EditText中inputType屬性小結(jié)
- Android WebView支持input file啟用相機(jī)/選取照片功能
- Android網(wǎng)頁(yè)H5 Input選擇相機(jī)和系統(tǒng)相冊(cè)
- 詳解Android WebView的input上傳照片的兼容問(wèn)題
- Android InputMethodManager輸入法簡(jiǎn)介
- 從"Show?tabs"了解Android?Input系統(tǒng)
相關(guān)文章
android 仿微信demo——微信通訊錄界面功能實(shí)現(xiàn)(移動(dòng)端,服務(wù)端)
本系列文章主要介紹了微信小程序-閱讀小程序?qū)嵗╠emo),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧,希望能給你們提供幫助2021-06-06
淺談Android View繪制三大流程探索及常見(jiàn)問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談Android View繪制三大流程探索及常見(jiàn)問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
Android 中NumberPicker,DatePicker與DatePickerDialog中分割顏色的修改實(shí)例代
這篇文章主要介紹了Android 中NumberPicker,DatePicker與DatePickerDialog中分割顏色的修改實(shí)例代碼的相關(guān)資料,這里提供實(shí)例代碼,需要的朋友可以參考下2017-03-03
android仿新聞閱讀器菜單彈出效果實(shí)例(附源碼DEMO下載)
本篇文章介紹了android仿新聞閱讀器菜單彈出效果實(shí)例,現(xiàn)在很多閱讀器都有這個(gè)功能,需要的朋友可以看一下。2016-11-11
模擬按Home鍵退出應(yīng)用的簡(jiǎn)單方法(分享)
下面小編就為大家?guī)?lái)一篇模擬按Home鍵退出應(yīng)用的簡(jiǎn)單方法(分享)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
Android10填坑適配指南(實(shí)際經(jīng)驗(yàn)代碼)
這篇文章主要介紹了Android10填坑適配指南(實(shí)際經(jīng)驗(yàn)代碼),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Android優(yōu)化之電量?jī)?yōu)化的實(shí)現(xiàn)
這篇文章主要介紹了Android優(yōu)化之電量?jī)?yōu)化的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
Android RecycleView和線型布局制作聊天布局
大家好,本篇文章主要講的是Android RecycleView和線型布局制作聊天布局,感興趣的同學(xué)趕緊來(lái)看一看吧,對(duì)你有幫助的話記得收藏一下2022-01-01
Android實(shí)現(xiàn)微信側(cè)滑刪除當(dāng)前頁(yè)面
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)微信側(cè)滑刪除當(dāng)前頁(yè)面,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12

