效果
自定義密碼輸入框又跛，項目的一個界面需求流酬，我把這個自定義的輸入框提取出來作為這次內(nèi)容的題目蓉驹。
輸入前:
image.png
輸入后：
image.png
輸入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);
// 不顯示光標
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é)束
有事請留言。
