效果圖：
截圖.png
直接上代碼：
/**
* Description: 密碼 輸入框
* Created by zouyulong on 2017/7/31.
*/
public class CustomPasswordInputView extends EditText {
private Context mContext;
/**
* 第一個(gè)密碼實(shí)心圓的圓心坐標(biāo)
*/
private float mFirstCircleX;
private float mFirstCircleY;
/**
* 當(dāng)前輸入的個(gè)數(shù)
*/
private int mCurInputCount = 0;
/**
* 實(shí)心圓的半徑
*/
private int mCircleRadius = dip2px(getContext(), 5);
/**
* view的寬高
*/
private int mHeight;
private int mWidth;
/**
* 最大輸入位數(shù)
*/
private int mMaxCount = 6;
/**
* 圓的顏色 默認(rèn)BLACK
*/
private int mCircleColor = Color.BLACK;
/**
* 邊線的顏色
*/
private int mStrokeColor = Color.BLACK;
/**
* 分割線的顏色
*/
private int mDevideLineColor = Color.BLACK;
/**
* 描邊的畫筆
*/
private Paint mStrokePaint;
/**
* 分割線開始的坐標(biāo)x
*/
private int mDivideLineWStartX;
/**
* 分割線的寬度
*/
private int mDivideLineWidth = dip2px(getContext(), 0.5f);
/**
* 描邊的矩形
*/
private RectF mFrameRectF = new RectF();
/**
* 矩形邊框的圓角
*/
private int mRectAngle = 0;
/**
* 豎直分割線的畫筆
*/
private Paint mDivideLinePaint;
/**
* 圓的畫筆
*/
private Paint mCirclePaint;
/**
* 密碼輸入完成事件
*/
private OnPasswordCompleteListener mCompleteListener;
public CustomPasswordInputView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
getAtt(attrs);
initPaint();
this.setCursorVisible(false);
this.setFilters(new InputFilter[]{new InputFilter.LengthFilter(mMaxCount)});
}
private void getAtt(AttributeSet attrs) {
TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.CustomPasswordInputView);
mMaxCount = typedArray.getInt(R.styleable.CustomPasswordInputView_maxCount, mMaxCount);
mCircleColor = typedArray.getColor(R.styleable.CustomPasswordInputView_pwdcircleColor, mCircleColor);
mCircleRadius = typedArray.getDimensionPixelOffset(R.styleable.CustomPasswordInputView_pwdCircleRadius, mCircleRadius);
mStrokeColor = typedArray.getColor(R.styleable.CustomPasswordInputView_strokeColor, mStrokeColor);
mDevideLineColor = typedArray.getColor(R.styleable.CustomPasswordInputView_devideLineColor, mDevideLineColor);
mDivideLineWidth = typedArray.getDimensionPixelSize(R.styleable.CustomPasswordInputView_divideLineWidth, mDivideLineWidth);
mRectAngle = typedArray.getDimensionPixelOffset(R.styleable.CustomPasswordInputView_rectAngle, mRectAngle);
typedArray.recycle();
}
/**
* 初始化畫筆
*/
private void initPaint() {
mCirclePaint = getPaint(dip2px(getContext(), 5), Paint.Style.FILL, mCircleColor);
mStrokePaint = getPaint(dip2px(getContext(), 0.5f), Paint.Style.STROKE, mStrokeColor);
mDivideLinePaint = getPaint(mDivideLineWidth, Paint.Style.FILL, mStrokeColor);
}
/**
* 設(shè)置畫筆
*
* @param strokeWidth 畫筆寬度
* @param style 畫筆風(fēng)格
* @param color 畫筆顏色
* @return
*/
private Paint getPaint(int strokeWidth, Paint.Style style, int color) {
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setStrokeWidth(strokeWidth);
paint.setStyle(style);
paint.setColor(color);
paint.setAntiAlias(true);
return paint;
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mHeight = h;
mWidth = w;
mDivideLineWStartX = w / mMaxCount;
mFirstCircleX = w / mMaxCount / 2;
mFirstCircleY = h / 2;
mFrameRectF.set(0, 0, mWidth, mHeight);
}
@Override
protected void onDraw(Canvas canvas) {
//不刪除的畫會(huì)默認(rèn)繪制輸入的文字
// super.onDraw(canvas);
drawWeChatBorder(canvas);
drawPsdCircle(canvas);
}
/**
* 畫微信支付密碼的樣式
*
* @param canvas
*/
private void drawWeChatBorder(Canvas canvas) {
canvas.drawRoundRect(mFrameRectF, mRectAngle, mRectAngle, mStrokePaint);
for (int i = 0; i < mMaxCount - 1; i++) {
canvas.drawLine((i + 1) * mDivideLineWStartX,
0,
(i + 1) * mDivideLineWStartX,
mHeight,
mDivideLinePaint);
}
}
/**
* 畫密碼實(shí)心圓
*
* @param canvas
*/
private void drawPsdCircle(Canvas canvas) {
for (int i = 0; i < mCurInputCount; i++) {
canvas.drawCircle(mFirstCircleX + i * 2 * mFirstCircleX,
mFirstCircleY,
mCircleRadius,
mCirclePaint);
}
}
@Override
protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
super.onTextChanged(text, start, lengthBefore, lengthAfter);
mCurInputCount = text.toString().length();
if (mCurInputCount == mMaxCount && mCompleteListener !=null) {
mCompleteListener.onComplete(getPasswordString());
}
invalidate();
}
@Override
protected void onSelectionChanged(int selStart, int selEnd) {
super.onSelectionChanged(selStart, selEnd);
//保證光標(biāo)始終在最后
if (selStart == selEnd) {
setSelection(getText().length());
}
}
/**
* 獲取輸入的密碼
*
* @return
*/
public String getPasswordString() {
return getText().toString().trim();
}
/**
* 密碼輸入完成回調(diào)
*/
public interface OnPasswordCompleteListener {
void onComplete(String password);
}
public void setOnCompleteListener(OnPasswordCompleteListener mListener) {
this.mCompleteListener = mListener;
}
/**
* dp轉(zhuǎn)px 自定義事件注意使用dp為單位
* @param var0
* @param var1
* @return
*/
public static int dip2px(Context var0, float var1) {
float var2 = var0.getResources().getDisplayMetrics().density;
return (int)(var1 * var2 + 0.5F);
}
}
就不做講解了侮繁，每一行代碼都做了詳細(xì)的注解，代碼已經(jīng)上傳到了github上面如孝。
