1.需求:
验证码输入框,中间灰色竖线分割。输入信息变化之后再输入框的下方绘制蓝色线条。
当四个字符输入之后,边框实现贪食蛇的滚动效果以达到当前正在进行验证码的校验功能。
2.思路
自定义View 添加四个EditText 关联字符变化监听,字符变化是绘制底部横线
当四个字符都输入完之后,以左边界为界限,每个5毫秒绘制一条线段。这样能达到贪食蛇滚动效果。
3.代码(基本思路实现)
public class InputView extends LinearLayout { List<View> listViews = new ArrayList<>(); private Context context; private int width; private int height; public InputView(Context context) { super(context); addChild(context); } public InputView(Context context, AttributeSet attrs) { super(context, attrs); addChild(context); } public InputView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); addChild(context); } public int position =0; public void addChild(Context context){ this.setOrientation(HORIZONTAL); this.context = context; for (int i = 0; i < 3; i++) { EditText bean = new EditText(context); this.addView(bean); LayoutParams layoutParams = new LinearLayout.LayoutParams(0,LayoutParams.MATCH_PARENT,1); bean.setLayoutParams(layoutParams); bean.setTag(i); // bean.setText(i+""); bean.setBackground(null); bean.setTextColor(Color.parseColor("#ff0000")); bean.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void afterTextChanged(Editable editable) { int tag = (int)bean.getTag(); drawButtom(tag); isCanDraw = true; } }); // listViews.add(bean); if (i!=2){ View view = new View(context); this.addView(view); view.setBackgroundColor(Color.parseColor("#f0f0f0")); view.setLayoutParams(new LinearLayout.LayoutParams(2,LayoutParams.MATCH_PARENT)); // listViews.add(view); } } } boolean isDrawButtom = false; int bDrawtoPosition =0; public void drawButtom(int position){ this.isDrawButtom = true; bDrawtoPosition = position; invalidate(); if (position==2){ isDrawButtom = false; y=height; } } public boolean isCanDraw = false; private float x=0,y; private float lastBx,lastBy; @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); width = getWidth(); height = getHeight(); Paint paint = new Paint(); paint.setColor(Color.parseColor("#00ff00")); paint.setStrokeWidth(10); if (isCanDraw){ if (isDrawButtom){ canvas.drawLine(0,height-2,lastBx+(width/3.0f),height-2,paint); lastBx+=(width/3.0f); Log.d("debug_drawbtn","x:"+lastBx+"y:"+lastBy); }else { canvas.drawLine(0,height-2,width,height-2,paint); if (x==0&&y>0){ canvas.drawLine(0,height,0,y-10,paint); y-=10; Log.d("debug_drawleft","x:"+x+"y:"+y); if (y<=0){ y=0; x=0; } }else if (y==0){ canvas.drawLine(0,height,0,0,paint); canvas.drawLine(0,0,x+10,y,paint); Log.d("debug_drawtop","x:"+x+"y:"+y); x+=10; if (x+10>=width){ x=width; y=1; } }else if (x==width){ canvas.drawLine(0,height,0,0,paint); canvas.drawLine(0,0,width,0,paint); canvas.drawLine(width,0,width,y+10,paint); Log.d("debug_drawright","x:"+x+"y:"+y); y+=10; if (y>=height){ y=height; x=width-1; } }else if (y==height){ canvas.drawLine(0,height,0,0,paint); canvas.drawLine(0,0,width,0,paint); canvas.drawLine(width,0,width,height,paint); Log.d("debug_drawright","x:"+x+"y:"+y); x-=10; if (x<=0){ y=height; x=0; } } handler.sendMessageDelayed(new Message(),5); } } } Handler handler = new Handler(){ @Override public void handleMessage(Message msg) { invalidate(); } } ;