效果图：
截图.png
直接上代码：
/**
* Description: 密码 输入框
* Created by zouyulong on 2017/7/31.
*/
public class CustomPasswordInputView extends EditText {
private Context mContext;
/**
* 第一个密码实心圆的圆心坐标
*/
private float mFirstCircleX;
private float mFirstCircleY;
/**
* 当前输入的个数
*/
private int mCurInputCount = 0;
/**
* 实心圆的半径
*/
private int mCircleRadius = dip2px(getContext(), 5);
/**
* view的宽高
*/
private int mHeight;
private int mWidth;
/**
* 最大输入位数
*/
private int mMaxCount = 6;
/**
* 圆的颜色 默认BLACK
*/
private int mCircleColor = Color.BLACK;
/**
* 边线的颜色
*/
private int mStrokeColor = Color.BLACK;
/**
* 分割线的颜色
*/
private int mDevideLineColor = Color.BLACK;
/**
* 描边的画笔
*/
private Paint mStrokePaint;
/**
* 分割线开始的坐标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);
}
/**
* 设置画笔
*
* @param strokeWidth 画笔宽度
* @param style 画笔风格
* @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) {
//不删除的画会默认绘制输入的文字
// 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);
}
}
/**
* 画密码实心圆
*
* @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);
//保证光标始终在最后
if (selStart == selEnd) {
setSelection(getText().length());
}
}
/**
* 获取输入的密码
*
* @return
*/
public String getPasswordString() {
return getText().toString().trim();
}
/**
* 密码输入完成回调
*/
public interface OnPasswordCompleteListener {
void onComplete(String password);
}
public void setOnCompleteListener(OnPasswordCompleteListener mListener) {
this.mCompleteListener = mListener;
}
/**
* dp转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);
}
}
就不做讲解了，每一行代码都做了详细的注解，代码已经上传到了github上面。
