效果
自定義密碼輸入框，項目的一個界面需求，我把這個自定義的輸入框提取出來作為這次內容的題目。
輸入前:
輸入后：
輸入1個字符就紅一個圈圈，很簡單的效果。
思路
1.自定義EditText。
2.背景為一個外圓環(huán)加內實心圓。
3.edittext的長度變化時候重新繪制背景或者紅色環(huán)位置。
關鍵代碼
代碼其實也很簡單，順手拿資源的請到文末。
1.畫背景
/** * 繪制背景外圓 */ private void drawOutRing(Canvas canvas) { mPaint.setColor(mBgColor); // 設置畫筆為空心 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.畫實心內圓背景
/** * 繪制背景內圓 */ private void drawInRing(Canvas canvas) { mPaint.setColor(mDivisionLineColor); // 設置畫筆為實心 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.繪制輸入密碼的變化動作
/** * 繪制隱藏的密碼 */ private void drawHidePassword(Canvas canvas) { int passwordLength = getText().length(); if (passwordLength > 6) passwordLength = 6; mPaint.setColor(mPasswordColor); // 畫實心內圓 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); // 設置畫筆為空心 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); // 繪制背景內圓 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.還可以設置些屬性
在sytle中設置，通過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>
完整代碼
一些樣式，我設置了，結果直接沒用上
<declare-styleable name="PasswordView"> <!-- 密碼的個數 --> <attr name="passwordNumber" format="integer"/> <!-- 密碼圓點的半徑 --> <attr name="passwordRadius" format="dimension"/> <!-- 密碼圓點的顏色 --> <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; // 一個密碼所占的寬度 private int mPasswordItemWidth; // 密碼的個數默認為6位數 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"); // 密碼圓點的半徑大小 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); // 設置輸入模式是密碼 setInputType(EditorInfo.TYPE_TEXT_VARIATION_PASSWORD); // 不顯示光標 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 轉 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); // 繪制背景內圓 drawInRing(canvas); // 繪制密碼 drawHidePassword(canvas); } @Override public void setText(CharSequence text, BufferType type) { super.setText(text, type); } /** * 繪制背景外圓 */ private void drawOutRing(Canvas canvas) { mPaint.setColor(mBgColor); // 設置畫筆為空心 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); // 設置畫筆為實心 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); // 設置畫筆為空心 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 * outRingLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize; canvas.drawCircle(cx, getHeight() / 2, mOutRadius, mPaint); } } /** * 繪制背景內圓 */ private void drawInRing(Canvas canvas) { mPaint.setColor(outRingLineColor); // 設置畫筆為實心 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); } }}總結
以上所述是小編給大家介紹的Android 自定義密碼輸入框實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持！
新聞熱點
疑難解答
