1.效果如下
306347510301723728.png
2.實(shí)現(xiàn)方式
繼承EditText,繪制矩形邊框瞻润,繪制內(nèi)部5條線店乐, 繪制中間圓點(diǎn)喉童。
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;
//第一個(gè)圓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) {
// 通過循環(huán)畫出每個(gè)分割線
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;
}
/**
* 根據(jù)手機(jī)的分辨率從 dp 的單位 轉(zhuǎn)成為 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位數(shù)字密碼
* @param pwd
*/
void onDataBack(String pwd);
}
}
4.繪制矩形邊框撇寞、繪制內(nèi)部5豎條線倒挺容易,在繪制圓點(diǎn)時(shí)堂氯,需要重寫“onTextChanged”方法蔑担,在里面判斷輸入字符的長(zhǎng)度,根據(jù)字符的長(zhǎng)度咽白,繪制圓點(diǎn)的個(gè)數(shù)啤握。
@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”處去掉不斷閃爍的焦點(diǎn)指示圖標(biāo)排抬,“3”處“ super.onDraw(canvas);”如果不注釋掉,會(huì)繪制原本輸入的字符授段。