1.效果如下
306347510301723728.png
2.实现方式
继承EditText,绘制矩形边框,绘制内部5条线, 绘制中间圆点。
3.代码如下
public class MyEditTest extends AppCompatEditText {
private static final String TAG = "MyEditTest";
private int width;
private int height;
private int divideLineWStartX;
private int firstCircleW;
private int maxCount=6;
private int inputLength;
private Paint pLine;
private Paint pCircle;
private Context context;
public MyEditTest(Context context) {
this(context,null);
}
public MyEditTest(Context context, AttributeSet attrs) {
super(context, attrs);
this.context=context;
this.setBackgroundColor(Color.TRANSPARENT);//========================>>1
this.setCursorVisible(false);//========================================>>2
initPaint();
}
private void initPaint(){
pLine=new Paint();
pLine.setColor(Color.parseColor("#666666"));
pLine.setAntiAlias(true);
pLine.setStyle(Paint.Style.STROKE);
pCircle=new Paint();
pCircle.setColor(Color.parseColor("#333333"));
pCircle.setAntiAlias(true);
pCircle.setStyle(Paint.Style.FILL);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
height=h;
width=w;
//第一条竖线 x位置
divideLineWStartX = w / maxCount;
//第一个圆x 位置
firstCircleW=divideLineWStartX/2;
}
@Override
protected void onDraw(Canvas canvas) {
// super.onDraw(canvas);=======================================>>3
drawRect(canvas);
drawLine(canvas);
drawCircle(canvas);
}
private void drawLine(Canvas canvas) {
// 通过循环画出每个分割线
for (int i = 0; i < maxCount - 1; i++) {
canvas.drawLine((i + 1) * divideLineWStartX,
0,
(i + 1) * divideLineWStartX,
height,
pLine);
}
}
private void drawCircle(Canvas canvas) {
for (int i = 0; i < inputLength; i++) {
canvas.drawCircle(firstCircleW + i * 2 * firstCircleW,
height/2,
dp2px(context,5),
pCircle);
}
}
private void drawRect(Canvas canvas) {
canvas.drawRoundRect(new RectF(0,0,width,height),dp2px(context,2),dp2px(context,2),pLine);
}
@Override
protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
super.onTextChanged(text, start, lengthBefore, lengthAfter);
inputLength=text.length();
if (inputLength>=6){
this.setEnabled(false);
backData.onDataBack(text.toString());
}
invalidate();
}
public void setBackData(OnBackData backData) {
this.backData = backData;
}
/**
* 根据手机的分辨率从 dp 的单位 转成为 px(像素)
*/
public static int dp2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
private OnBackData backData;
public interface OnBackData{
/**
* 6位数字密码
* @param pwd
*/
void onDataBack(String pwd);
}
}
4.绘制矩形边框、绘制内部5竖条线倒挺容易,在绘制圆点时,需要重写“onTextChanged”方法,在里面判断输入字符的长度,根据字符的长度,绘制圆点的个数。
@Override
protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
super.onTextChanged(text, start, lengthBefore, lengthAfter);
inputLength=text.length();
if (inputLength>=6){
this.setEnabled(false);
backData.onDataBack(text.toString());
}
invalidate();
}
5.注意“1”处,去掉edittext自带的红色背景线,“2”处去掉不断闪烁的焦点指示图标,“3”处“ super.onDraw(canvas);”如果不注释掉,会绘制原本输入的字符。