Android 自定義密碼輸入框?qū)崿F(xiàn)代碼
更新時間：2018年03月12日 11:01:09 作者：cgrass
最近做個項目自定義密碼輸入框功能，下面小編把實現(xiàn)思路分享到腳本之家平臺，需要的朋友參考下吧
效果
自定義密碼輸入框，項目的一個界面需求，我把這個自定義的輸入框提取出來作為這次內(nèi)容的題目。
輸入前:
輸入后：
輸入1個字符就紅一個圈圈，很簡單的效果。
思路
1.自定義EditText。
2.背景為一個外圓環(huán)加內(nèi)實心圓。
3.edittext的長度變化時候重新繪制背景或者紅色環(huán)位置。
關(guān)鍵代碼
代碼其實也很簡單，順手拿資源的請到文末。
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.畫實心內(nèi)圓背景
/**
* 繪制背景內(nèi)圓
*/
private void drawInRing(Canvas canvas) {
mPaint.setColor(mDivisionLineColor);
// 設(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.繪制輸入密碼的變化動作
/**
* 繪制隱藏的密碼
*/
private void drawHidePassword(Canvas canvas) {
int passwordLength = getText().length();
if (passwordLength > 6) passwordLength = 6;
mPaint.setColor(mPasswordColor);
// 畫實心內(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è)置，通過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é)果直接沒用上
<declare-styleable name="PasswordView">
<!-- 密碼的個數(shù) -->
<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;
// 密碼的個數(shù)默認為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");
// 密碼圓點的半徑大小
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è)置畫筆為實心
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);
// 如果沒有設(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è)置畫筆為實心
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)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- 5種方法完美解決android軟鍵盤擋住輸入框方法詳解
- Android高級xml布局之輸入框EditText設(shè)計
- Android文本輸入框(EditText)輸入密碼時顯示與隱藏
- Android實現(xiàn)動態(tài)顯示或隱藏密碼輸入框的內(nèi)容
- 解決Android軟鍵盤彈出覆蓋h5頁面輸入框問題
- Android軟鍵盤擋住輸入框的終極解決方案
- Android仿支付寶自定義密碼輸入框及安全鍵盤(密碼鍵盤)
- Android實現(xiàn)常見的驗證碼輸入框?qū)嵗a
- Android UI設(shè)計系列之自定義EditText實現(xiàn)帶清除功能的輸入框(3)
- Android自定義九宮格輸入框
相關(guān)文章
Kotlin中ListView與RecyclerView的應(yīng)用講解
這篇文章主要介紹了Kotlin中ListView與RecyclerView的應(yīng)用講解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要為大家介紹了Flutter在項目中使用動畫不使用包實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
Android 靜默方式實現(xiàn)批量安裝卸載應(yīng)用程序的深入分析
本篇文章是對Android 靜默方式實現(xiàn)批量安裝卸載應(yīng)用程序進行了詳細的分析介紹，需要的朋友參考下2013-06-06
Android自定義view利用PathEffect實現(xiàn)動態(tài)效果
這篇文章主要為大家詳細介紹了Android自定義view利用PathEffect實現(xiàn)動態(tài)效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了android手機端與PC端使用adb forword通信的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了Android仿微信通訊錄滑動快速定位功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
Android用ListView顯示SDCard文件列表的小例子
本文簡單實現(xiàn)了用ListView顯示SDCard文件列表，目錄的回退等功能暫不討論，獲取文件列表，files即為所選擇目錄下的所有文件列表2013-11-11
android關(guān)于按鈕點擊效果實現(xiàn)的方法
今天小編就為大家分享一篇關(guān)于android關(guān)于按鈕點擊效果實現(xiàn)的方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-03-03
這篇文章主要介紹了Android中的Handler異步通信機制,文中舉了兩個例子介紹了Handler里面實用的API中的方法,需要的朋友可以參考下2016-03-03
這篇文章主要為大家詳細介紹了Android實現(xiàn)水平帶刻度的進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04