Android 验证码输入框周边添加进度条效果

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();
        }
    } ;