Android 自定義密碼輸入框?qū)崿F(xiàn)代碼
效果
自定義密碼輸入框,項(xiàng)目的一個(gè)界面需求,我把這個(gè)自定義的輸入框提取出來(lái)作為這次內(nèi)容的題目。
輸入前:
輸入后:
輸入1個(gè)字符就紅一個(gè)圈圈,很簡(jiǎn)單的效果。
思路
1.自定義EditText。
2.背景為一個(gè)外圓環(huán)加內(nèi)實(shí)心圓。
3.edittext的長(zhǎng)度變化時(shí)候重新繪制背景或者紅色環(huán)位置。
關(guān)鍵代碼
代碼其實(shí)也很簡(jiǎn)單,順手拿資源的請(qǐng)到文末。
1.畫背景
/** * 繪制背景外圓 */ private void drawOutRing(Canvas canvas) { mPaint.setColor(mBgColor); // 設(shè)置畫筆為空心 mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(mBgSize); RectF rectF = new RectF(mBgSize, mBgSize, getWidth() - mBgSize, getHeight() - mBgSize); // 畫圓 for (int i = 0; i < mPasswordNumber; i++) { int cx = i * mDivisionLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize; canvas.drawCircle(cx, getHeight() / 2, mOutRadius, mPaint); } }
2.畫實(shí)心內(nèi)圓背景
/** * 繪制背景內(nèi)圓 */ private void drawInRing(Canvas canvas) { mPaint.setColor(mDivisionLineColor); // 設(shè)置畫筆為實(shí)心 mPaint.setStyle(Paint.Style.FILL); // 畫圈圈 for (int i = 0; i < mPasswordNumber; i++) { int cx = i * mDivisionLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize; canvas.drawCircle(cx, getHeight() / 2, mPasswordRadius, mPaint); } } }
3.繪制輸入密碼的變化動(dòng)作
/** * 繪制隱藏的密碼 */ private void drawHidePassword(Canvas canvas) { int passwordLength = getText().length(); if (passwordLength > 6) passwordLength = 6; mPaint.setColor(mPasswordColor); // 畫實(shí)心內(nèi)圓 mPaint.setStyle(Paint.Style.FILL); for (int i = 0; i < passwordLength; i++) { int cx = i * mDivisionLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize; canvas.drawCircle(cx, getHeight() / 2, mPasswordRadius, mPaint); } //外圓顏色 mPaint.setColor(mPasswordColor); // 設(shè)置畫筆為空心 mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(mBgSize); RectF rectF = new RectF(mBgSize, mBgSize, getWidth() - mBgSize, getHeight() - mBgSize); // 畫空心外圓 for (int i = 0; i < passwordLength; i++) { int cx = i * mDivisionLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize; canvas.drawCircle(cx, getHeight() / 2, mOutRadius, mPaint); } }
4.重寫onDraw
int passwordWidth = getWidth() - (mPasswordNumber - 1) * mDivisionLineSize; mPasswordItemWidth = passwordWidth / mPasswordNumber; // 繪制背景外圓 drawOutRing(canvas); // 繪制背景內(nèi)圓 drawInRing(canvas); // 繪制密碼 drawHidePassword(canvas);
5.xml引用
<com***.PasswordView android:id="@+id/password" android:layout_width="240dp" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="10dp" android:background="@null"> </com***.PasswordView>
6.還可以設(shè)置些屬性
在sytle中設(shè)置,通過(guò)xml中的app:xxx引用。
<com.*.PasswordView android:id="@+id/password" android:layout_width="240dp" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="10dp" xmlns:app="http://schemas.android.com/apk/res-auto" app:bgColor="#ffffff" android:background="@null"> </com.*.PasswordView>
完整代碼
一些樣式,我設(shè)置了,結(jié)果直接沒(méi)用上
<declare-styleable name="PasswordView"> <!-- 密碼的個(gè)數(shù) --> <attr name="passwordNumber" format="integer"/> <!-- 密碼圓點(diǎn)的半徑 --> <attr name="passwordRadius" format="dimension"/> <!-- 密碼圓點(diǎn)的顏色 --> <attr name="passwordColor" format="color"/> <!-- 外圈顏色 --> <attr name="outRingColor" format="color"/> <!-- 外圓線條大小 --> <attr name="outRingLineSize" format="color"/> <!-- 背景邊框的顏色 --> <attr name="bgColor" format="color"/> <!-- 背景邊框的大小 --> <attr name="bgSize" format="dimension"/> <!-- 背景邊框的圓角大小 --> <attr name="bgCorner" format="dimension"/> </declare-styleable>
自定義Edittext
import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.RectF; import android.util.AttributeSet; import android.util.TypedValue; import android.view.inputmethod.EditorInfo; import android.widget.EditText; /** *自定義密碼輸入框 */ public class PasswordView extends EditText { // 畫筆 private Paint mPaint; // 一個(gè)密碼所占的寬度 private int mPasswordItemWidth; // 密碼的個(gè)數(shù)默認(rèn)為6位數(shù) private int mPasswordNumber = 6; // 背景圓顏色 private int mBgColor = Color.parseColor("#d1d2d6"); // 背景大小 private int mBgSize = 1; // 背景邊框圓角大小 private int mBgCorner = 0; // 外圓的顏色 private int outRingLineColor = mBgColor; // 外圓線條的大小 private int outRingLineSize = 1; // 密碼輸入的顏色 private int mPasswordColor = Color.parseColor("#cb3435"); // 密碼圓點(diǎn)的半徑大小 private int mPasswordRadius = 6; // 外圓半徑大小 private int mOutRadius = 25; public PasswordView(Context context) { this(context, null); } public PasswordView(Context context, AttributeSet attrs) { super(context, attrs); initPaint(); initAttributeSet(context, attrs); // 設(shè)置輸入模式是密碼 setInputType(EditorInfo.TYPE_TEXT_VARIATION_PASSWORD); // 不顯示光標(biāo) setCursorVisible(false); } /** * 初始化屬性 */ private void initAttributeSet(Context context, AttributeSet attrs) { TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PasswordView); // 獲取大小 outRingLineSize = (int) array.getDimension(R.styleable.PasswordView_outRingLineSize, dip2px(outRingLineSize)); mPasswordRadius = (int) array.getDimension(R.styleable.PasswordView_passwordRadius, dip2px(mPasswordRadius)); mBgSize = (int) array.getDimension(R.styleable.PasswordView_bgSize, dip2px(mBgSize)); mBgCorner = (int) array.getDimension(R.styleable.PasswordView_bgCorner, 0); // 獲取顏色 mBgColor = array.getColor(R.styleable.PasswordView_bgColor, mBgColor); outRingLineColor = array.getColor(R.styleable.PasswordView_outRingColor, outRingLineColor); mPasswordColor = array.getColor(R.styleable.PasswordView_passwordColor, mPasswordColor); array.recycle(); } /** * 初始化畫筆 */ private void initPaint() { mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setDither(true); } /** * dip 轉(zhuǎn) px */ private int dip2px(int dip) { return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dip, getResources().getDisplayMetrics()); } @Override protected void onDraw(Canvas canvas) { int passwordWidth = getWidth() - (mPasswordNumber - 1) * outRingLineSize; mPasswordItemWidth = passwordWidth / mPasswordNumber; // 繪制背景外圓 drawOutRing(canvas); // 繪制背景內(nèi)圓 drawInRing(canvas); // 繪制密碼 drawHidePassword(canvas); } @Override public void setText(CharSequence text, BufferType type) { super.setText(text, type); } /** * 繪制背景外圓 */ private void drawOutRing(Canvas canvas) { mPaint.setColor(mBgColor); // 設(shè)置畫筆為空心 mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(mBgSize); RectF rectF = new RectF(mBgSize, mBgSize, getWidth() - mBgSize, getHeight() - mBgSize); // 畫圓 for (int i = 0; i < mPasswordNumber; i++) { int cx = i * outRingLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize; canvas.drawCircle(cx, getHeight() / 2, mOutRadius, mPaint); } } /** * 繪制隱藏的密碼 */ private void drawHidePassword(Canvas canvas) { int passwordLength = getText().length(); if (passwordLength > 6) passwordLength = 6; mPaint.setColor(mPasswordColor); // 設(shè)置畫筆為實(shí)心 mPaint.setStyle(Paint.Style.FILL); for (int i = 0; i < passwordLength; i++) { int cx = i * outRingLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize; canvas.drawCircle(cx, getHeight() / 2, mPasswordRadius, mPaint); } //外圓 mPaint.setColor(mPasswordColor); // 設(shè)置畫筆為空心 mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(mBgSize); RectF rectF = new RectF(mBgSize, mBgSize, getWidth() - mBgSize, getHeight() - mBgSize); // 如果沒(méi)有設(shè)置圓角,就畫矩形 for (int i = 0; i < passwordLength; i++) { int cx = i * outRingLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize; canvas.drawCircle(cx, getHeight() / 2, mOutRadius, mPaint); } } /** * 繪制背景內(nèi)圓 */ private void drawInRing(Canvas canvas) { mPaint.setColor(outRingLineColor); // 設(shè)置畫筆為實(shí)心 mPaint.setStyle(Paint.Style.FILL); // 畫圈圈 for (int i = 0; i < mPasswordNumber; i++) { int cx = i * outRingLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize; canvas.drawCircle(cx, getHeight() / 2, mPasswordRadius, mPaint); } } }
總結(jié)
以上所述是小編給大家介紹的Android 自定義密碼輸入框?qū)崿F(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 5種方法完美解決android軟鍵盤擋住輸入框方法詳解
- Android高級(jí)xml布局之輸入框EditText設(shè)計(jì)
- Android文本輸入框(EditText)輸入密碼時(shí)顯示與隱藏
- Android實(shí)現(xiàn)動(dòng)態(tài)顯示或隱藏密碼輸入框的內(nèi)容
- 解決Android軟鍵盤彈出覆蓋h5頁(yè)面輸入框問(wèn)題
- Android軟鍵盤擋住輸入框的終極解決方案
- Android仿支付寶自定義密碼輸入框及安全鍵盤(密碼鍵盤)
- Android實(shí)現(xiàn)常見(jiàn)的驗(yàn)證碼輸入框?qū)嵗a
- Android UI設(shè)計(jì)系列之自定義EditText實(shí)現(xiàn)帶清除功能的輸入框(3)
- Android自定義九宮格輸入框
相關(guān)文章
Kotlin中ListView與RecyclerView的應(yīng)用講解
這篇文章主要介紹了Kotlin中ListView與RecyclerView的應(yīng)用講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09Flutter在項(xiàng)目中使用動(dòng)畫不使用包實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Flutter在項(xiàng)目中使用動(dòng)畫不使用包實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11Android 靜默方式實(shí)現(xiàn)批量安裝卸載應(yīng)用程序的深入分析
本篇文章是對(duì)Android 靜默方式實(shí)現(xiàn)批量安裝卸載應(yīng)用程序進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06Android自定義view利用PathEffect實(shí)現(xiàn)動(dòng)態(tài)效果
這篇文章主要為大家詳細(xì)介紹了Android自定義view利用PathEffect實(shí)現(xiàn)動(dòng)態(tài)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05android手機(jī)端與PC端使用adb forword通信
這篇文章主要介紹了android手機(jī)端與PC端使用adb forword通信的相關(guān)資料,需要的朋友可以參考下2017-04-04Android用ListView顯示SDCard文件列表的小例子
本文簡(jiǎn)單實(shí)現(xiàn)了用ListView顯示SDCard文件列表,目錄的回退等功能暫不討論,獲取文件列表,files即為所選擇目錄下的所有文件列表2013-11-11android關(guān)于按鈕點(diǎn)擊效果實(shí)現(xiàn)的方法
今天小編就為大家分享一篇關(guān)于android關(guān)于按鈕點(diǎn)擊效果實(shí)現(xiàn)的方法,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-03-03深入理解Android中的Handler異步通信機(jī)制
這篇文章主要介紹了Android中的Handler異步通信機(jī)制,文中舉了兩個(gè)例子介紹了Handler里面實(shí)用的API中的方法,需要的朋友可以參考下2016-03-03Android實(shí)現(xiàn)水平帶刻度的進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)水平帶刻度的進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04