自定义View之——验证码输入框（逐行注释

以下为源码

package com.zmk.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.os.Build;
import android.os.Bundle;
import android.os.Parcelable;
import android.text.InputType;
import android.util.AttributeSet;
import android.util.Log;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;
import android.view.inputmethod.EditorInfo;
import android.view.inputmethod.InputConnection;
import android.view.inputmethod.InputMethodManager;

import androidx.annotation.Nullable;
import androidx.annotation.RequiresApi;

import com.example.common.MyLog;

import java.util.ArrayList;
import java.util.List;
import java.util.Timer;
import java.util.TimerTask;

public class EditTextInputView extends View {

    //对外提供提交方法
    private OnEnterClickListener onEnterClickListener;

    //字符数量，>>>对外开放
    private int textLengh = 6;
    //框框/下划线宽度，根据手机宽度计算出来，受限于rectMaxWidth
    private int rectWidth;
    //框框/下划线间距，根据框框宽度计算出来
    private int rectMargin;
    //框框间宽比
    private float rectMarginWidthRatio = 0.2f;
    //全框框宽与(屏幕-横杠长度宽)比
    private float rectWidthWidthRatio = 0.85f;
    //框框宽高比
    private float rectAspectRatio = 0.72f;
    //框框高度，根据宽高比和宽度计算出来
    private int rectHeight;
    //文字大小，根据框框宽度和文字大小与框框宽度比计算
    private int textSize;
    //文字大小与框框宽度比
    private float textSizeRectWidthRatio = 0.75f;
    //横杠宽度，根据宽度和横杠宽度与宽度比计算
    private int lineWidth;
    //横杠宽度与宽度比
    private float lineWidthWidthRatio = 0.4f;
    //横杠高度，根据横杠宽度计算
    private int lineHeight;
    //横杠高度与横杠宽度比
    private float lineHeightLineWidthRatio = 0.15f;

    //圆角大小，根据宽度和圆角半径与宽比计算
    private int radius;
    //宽与圆角半径比
    private float widthRadiusRatio = 0.2f;
    //框框/下划线粗细
    private int rectStroke = 3;

    //文字/游标颜色，>>>对外开放
    private int textColor = Color.BLACK;
    //文字显示，>>>对外开放
    private boolean textVisable = true;
    //横杠显示，>>>对外开放
    private boolean lineVisable = false;

    //框框风格
    private final int STYLE_RECT = 0;
    //下划线风格
    private final int STYLE_UNDERLINE = 1;
    //背景风格，>>>对外开放
    private int style = STYLE_RECT;

    //游标消失时间，毫秒
    private int cursorDisappearanceTime = 600;
    //游标长度，根据框框高度和游标长度与框框高度比计算
    private int cursorHeight;
    //游标长度与框框高度比
    private float cursorHeightRectHeighRatio = 0.55f;
    //游标直径，根据游标长度和游标长度与游标直径比计算
    private int cursorWidth;
    //游标直径和游标长度比
    private float cursorWidthcursorHeightRatio = 0.1f;
    //游标显示
    private boolean cursorVisible = true;

    //最大框框宽度
    private int rectMaxWidth = 130;

    //父控件宽度
    private int width;
    //父控件高度
    private int height;

    //框框/下划线画笔
    private Paint rectPaint;
    //横杠画笔
    private Paint linePaint;
    //框框/下划线颜色，>>>对外开放
    private int rectColor = Color.BLACK;
    //框框/下划线选中时颜色，>>>对外开放
    private int rectSelectColor = Color.BLUE;
    //游标画笔
    private Paint cursorPaint;
    //文字画笔
    private Paint textPaint;

    //矩形列表
    private List<Rect> rects;
    //焦点下标
    private int rectIndex = -1;

    //计时器
    private Timer timer;
    //计时任务
    private TimerTask timerTask;

    //字符数组
    private List<String> texts;

    private InputMethodManager inputManager;
    private boolean isFoucus;

    public EditTextInputView(Context context) {
        super(context);
        init();
    }

    public EditTextInputView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public EditTextInputView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    //初始化
    private void init() {
        //重写onCreateInputConnection方法必须，使具备输入焦点
        setFocusableInTouchMode(true);
        //获取Mannager，能用来打开软键盘
        inputManager = (InputMethodManager) getContext().getSystemService(Context.INPUT_METHOD_SERVICE);

        setOnKeyListener(new OnKeyListener() {
            @Override
            public boolean onKey(View view, int keyCode, KeyEvent keyEvent) {
                //获取事件类型
                int action = keyEvent.getAction();
                if (action == KeyEvent.ACTION_DOWN) {
                    //按下事件
                    if (keyCode == KeyEvent.KEYCODE_DEL) {
                        //删除键
                        //删除最后一个字符
                        removeLastText();
                        return true;
                    } else if (keyCode >= KeyEvent.KEYCODE_0 && keyCode <= KeyEvent.KEYCODE_9) {
                        //数字键
                        //在第一个空位添加字符
                        addText(String.valueOf(keyCode - 7));
                        //当输入后充满输入框
                        if (texts.size() >= textLengh) {
                            //隐藏软键盘
                            inputManager.hideSoftInputFromWindow(EditTextInputView.this.getWindowToken(), 0);
                        }
                        return true;
                    } else if (keyCode == KeyEvent.KEYCODE_ENTER) {
                        //Enter键
                        return true;
                    }
                } else if (action == KeyEvent.ACTION_UP) {
                    //抬起事件
                    if (keyCode == KeyEvent.KEYCODE_ENTER) {
                        //Enter键
                        //提交方法，含对外接口
                        commit();
                        return true;
                    }
                }
                return false;
            }
        });

        //框框画笔
        rectPaint = new Paint();
        rectPaint.setColor(rectColor);
        rectPaint.setStyle(Paint.Style.STROKE);//空心
        rectPaint.setStrokeWidth(rectStroke);
        //横杠画笔
        linePaint = new Paint();
        linePaint.setColor(rectColor);
        //游标画笔
        cursorPaint = new Paint();
        cursorPaint.setColor(textColor);
        //文字画笔
        textPaint = new Paint();
        textPaint.setColor(textColor);

        //矩形列表
        rects = new ArrayList<>();

        //创建计时器任务
        timerTask = new TimerTask() {
            @Override
            public void run() {
                //改变游标的显示状态
                cursorVisible = !cursorVisible;
                postInvalidate();
            }
        };
        //创建计时器
        timer = new Timer();

        //初始化字符集合
        texts = new ArrayList<>();

        //默认 Enter键点击监听事件
        onEnterClickListener = new OnEnterClickListener() {
            @Override
            public void onClick() {
                //收起软键盘
                inputManager.hideSoftInputFromWindow(EditTextInputView.this.getWindowToken(), 0);
            }
        };

        //当字符长度为奇数时，或使用下划线样式时，不显示不计算横杠
        if (textLengh % 2 != 0 || style == STYLE_UNDERLINE) {
            lineVisable = false;
        }
        //在极端情况下的健壮性
        if (textLengh > 6) {
            textLengh = 6;
        }
    }

    //带参初始化
    private void init(Context context, AttributeSet attrs) {
        //获取xml文件中的自定义属性列表
        TypedArray typedArray = context.getResources().obtainAttributes(attrs, R.styleable.EditTextInputView);
        //加载文字最大长度
        textLengh = typedArray.getInteger(R.styleable.EditTextInputView_text_lengh, textLengh);
        //加载文字颜色
        textColor = typedArray.getColor(R.styleable.EditTextInputView_text_color, textColor);
        //加载文字显示模式
        textVisable = typedArray.getBoolean(R.styleable.EditTextInputView_text_visable, textVisable);
        //加载横杠显示模式
        lineVisable = typedArray.getBoolean(R.styleable.EditTextInputView_line_visable, lineVisable);
        //加载样式
        style = typedArray.getInt(R.styleable.EditTextInputView_style, style);
        //加载背景颜色
        rectColor = typedArray.getColor(R.styleable.EditTextInputView_background_color, rectColor);
        //加载选中背景颜色
        rectSelectColor = typedArray.getColor(R.styleable.EditTextInputView_backgroud_select_color, rectSelectColor);
        //复用无参初始化
        init();
    }

    //测量
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //获取默认测量宽度
        width = MeasureSpec.getSize(widthMeasureSpec);
        //获取默认测量高度
        height = MeasureSpec.getSize(heightMeasureSpec);
        //获取宽度模式
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        //获取高度模式
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        //声明包裹内容宽度
        int widthMeasure;
        //声明包裹内容高度
        int heightMeasure;
        //根据是否需要绘制横杠，计算包裹内容宽度
        if (lineVisable) {
            widthMeasure = (int) (rectMaxWidth * textLengh + rectMaxWidth * rectMarginWidthRatio * (textLengh - 1));
        } else {
            widthMeasure = (int) (rectMaxWidth * textLengh + rectMaxWidth * rectMarginWidthRatio * (textLengh - 1)) + lineWidth;
        }
        //在极端情况下的健壮性
        if (textLengh <= 0) {
            widthMeasure = rectMaxWidth;
        }
        //设置高度，末尾的数字为修正属性，没有特殊意义
        heightMeasure = (int) (rectMaxWidth / rectAspectRatio) + 10;
        if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {
            //当纵横都是包裹自身
            setMeasuredDimension(widthMeasure, heightMeasure);
        } else if (widthMode == MeasureSpec.AT_MOST) {
            //当宽度为包裹自身
            setMeasuredDimension(widthMeasure, height);
        } else if (heightMode == MeasureSpec.AT_MOST) {
            //当高度为包裹自身
            setMeasuredDimension(width, heightMeasure);
        } else {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }

        //重新测量父容器的宽与高
        width = getMeasuredWidth();
        height = getMeasuredHeight();

        //根据横杠显示状态测量框框宽度
        if (lineVisable) {
            //获得框框宽和间隔宽之和
            rectWidth = (int) ((width - lineWidth) / (float) textLengh);
            //最终框框宽度值
            rectWidth = (int) (rectWidth / (float) (1 + rectMarginWidthRatio));
        } else {
            rectWidth = (int) (width / (float) textLengh);
            rectWidth = (int) (rectWidth / (1 + rectMarginWidthRatio));
        }

        //如果宽度不合适，即计算出的框框宽度大于最大宽度，则使用最大宽度
        if (rectWidth > rectMaxWidth) {
            rectWidth = rectMaxWidth;
        }

        //根据框框宽度与宽高比计算出【框框高度】
        rectHeight = (int) (rectWidth / rectAspectRatio);

        //如果高度不合适，即计算出的框框高度大于父控件高度，再重新根据高度测量【框框宽度】
        if (rectHeight > height) {
            rectHeight = height;
            rectWidth = (int) (rectHeight * rectAspectRatio);
            rectMargin = (int) (rectWidth * rectMarginWidthRatio);
        }

        //根据框框宽度计算出【框框间隔】
        rectMargin = (int) (rectWidth * rectMarginWidthRatio);
        //根据框框宽度计算出【圆角半径】
        radius = (int) (rectWidth * widthRadiusRatio);
        //根据框框宽度计算出【横杠宽度】
        lineWidth = (int) (rectWidth * lineWidthWidthRatio);
        //根据横杠宽度计算出【横杠高度】
        lineHeight = (int) (lineWidth * lineHeightLineWidthRatio);
        //根据框框高度计算出【游标长度】
        cursorHeight = (int) (rectHeight * cursorHeightRectHeighRatio);
        //根据游标长度计算出【游标宽度】
        cursorWidth = (int) (cursorHeight * cursorWidthcursorHeightRatio);
        //为游标画笔设置宽度
        cursorPaint.setStrokeWidth(cursorWidth);
        //根据框框宽度计算出【文字大小】
        textSize = (int) (rectWidth * textSizeRectWidthRatio);
        //为文字画笔设置文字大小
        textPaint.setTextSize(textSize);
    }

    //绘制
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int middleX;
        int middleY;
        //每一个子背景的绘制属性
        int left;
        int top;
        int right;
        int bottom;

        //中心点的坐标
        middleX = width / 2;
        middleY = height / 2;

        top = middleY - rectHeight / 2;
        bottom = middleY + rectHeight / 2;

        //绘制文字，将会影响 rectIndex
        for (int i = 0; i < texts.size(); i++) {
            String s = texts.get(i);
            //解决文字居中问题
            Paint.FontMetrics fm = textPaint.getFontMetrics();
            int textX = rects.get(i).left + rectWidth / 2 - textSize / 4;
            int textY = (int) (middleY - (fm.descent - (-fm.ascent + fm.descent) / 2));
            //根据文字是否显示，来显示具体文字或显示 *
            if (textVisable) {
                canvas.drawText(s, textX, textY, textPaint);
            } else {
                canvas.drawText("*", textX, textY, textPaint);
            }
            //游标永远指向最后一个文字的下一个位置
            rectIndex = i + 1;
        }
        //处理最后一个字符被删除，上述循环无法执行的情况
        if (texts.size() == 0 && rectIndex != -1) {
            rectIndex = 0;
        }

        //如果View失焦，将游标下标改为-1，以隐藏游标
        if (!isFoucus){
            rectIndex = -1;
        }

        //绘制框框/下划线，会受到 rectIndex影响
        //循环次数为字符数量
        for (int i = 0; i < textLengh; i++) {
            if (textLengh % 2 == 0) {
                //字符长度为偶数
                if (lineVisable) {
                    //有横杠
                    left = i < textLengh / 2 ?
                            middleX - rectWidth * (textLengh / 2 - i) - rectMargin * (textLengh / 2 - i) + rectMargin / 2 - lineWidth / 2 :
                            middleX + rectWidth * (i - textLengh / 2) + rectMargin * (i - (textLengh / 2 - 1)) - rectMargin / 2 + lineWidth / 2;
                    right = i < textLengh / 2 ?
                            middleX - rectWidth * ((textLengh / 2 - 1) - i) - rectMargin * (textLengh / 2 - i) + rectMargin / 2 - lineWidth / 2 :
                            middleX + rectWidth * (i - (textLengh / 2 - 1)) + rectMargin * (i - (textLengh / 2 - 1)) - rectMargin / 2 + lineWidth / 2;
                } else {
                    //没有横杠
                    left = i < textLengh / 2 ?
                            middleX - rectWidth * (textLengh / 2 - i) - rectMargin * (textLengh / 2 - i) + rectMargin / 2 :
                            middleX + rectWidth * (i - textLengh / 2) + rectMargin * (i - (textLengh / 2 - 1)) - rectMargin / 2;
                    right = i < textLengh / 2 ?
                            middleX - rectWidth * ((textLengh / 2 - 1) - i) - rectMargin * (textLengh / 2 - i) + rectMargin / 2 :
                            middleX + rectWidth * (i - (textLengh / 2 - 1)) + rectMargin * (i - (textLengh / 2 - 1)) - rectMargin / 2;
                }
            } else {
                //字符长度为奇数
                left = i < textLengh / 2 + 1 ?
                        middleX - rectWidth * (textLengh / 2 - i) - rectMargin * (textLengh / 2 - i) - rectWidth / 2 :
                        middleX + rectWidth * (i - (textLengh / 2 + 1)) + rectMargin * (i - textLengh / 2) + rectWidth / 2;
                right = i < textLengh / 2 ?
                        middleX - rectWidth * ((textLengh / 2 - 1) - i) - rectMargin * (textLengh / 2 - i) - rectWidth / 2 :
                        middleX + rectWidth * (i - textLengh / 2) + rectMargin * (i - textLengh / 2) + rectWidth / 2;
            }
            //将游标所在位置的背景，绘制成选中颜色
            if (rectIndex == i) {
                //改变画笔颜色
                rectPaint.setColor(rectSelectColor);
            }
            switch (style) {
                case STYLE_RECT:
                    canvas.drawRoundRect(left, top, right, bottom, radius, radius, rectPaint);
                    break;
                case STYLE_UNDERLINE:
                    canvas.drawLine(left, bottom - rectStroke / 2, right, bottom - rectStroke / 2, rectPaint);
                    break;
                default:
                    canvas.drawRoundRect(left, top, right, bottom, radius, radius, rectPaint);
                    break;
            }
            if (rectIndex == i) {
                //复原画笔颜色
                rectPaint.setColor(rectColor);
            }

            //第一次循环的时候，存储每一个背景的坐标
            if (i == rects.size()) {
                rects.add(new Rect(left, top, right, bottom));
            }
        }

        //显示横杠时
        if (lineVisable) {
            //绘制横杠
            canvas.drawRect(middleX - lineWidth / 2, middleY - lineHeight / 2, middleX + lineWidth / 2, middleY + lineHeight / 2, linePaint);
        }

        //绘制游标，并处理下标为-1和下标大于长度的问题，将会受到 rectIndex影响
        if (cursorVisible && rectIndex < textLengh && rectIndex >= 0) {
            int startX = rects.get(rectIndex).left + rectWidth / 2;
            int startY = middleY - cursorHeight / 2;
            int stopY = middleY + cursorHeight / 2;
            //绘制游标
            canvas.drawLine(startX, startY, startX, stopY, cursorPaint);
        }
    }

    //触摸事件
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float eventX = event.getX();
        float eventY = event.getY();
        //按键抬起时事件
        if (event.getAction() == KeyEvent.ACTION_UP) {
            for (int i = 0; i < rects.size(); i++) {
                Rect rect = rects.get(i);
                if (eventX > rect.left && eventX < rect.right && eventY > rect.top && eventY < rect.bottom) {
                    Log.i("zmklog", "onTouchEvent: " + "请求弹出软键盘");
                    requestFocus();
                    inputManager.showSoftInput(this, 0);
                    //游标下标归零，将会在绘制文字时自动修正
                    rectIndex = 0;
                    invalidate();
                    break;
                }
            }
        }
        return true;
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        //启动游标闪烁Timer
        timer.schedule(timerTask, 0, cursorDisappearanceTime);
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        //关闭Timer
        timer.cancel();
    }

    @Override
    public void onWindowFocusChanged(boolean hasWindowFocus) {
        super.onWindowFocusChanged(hasWindowFocus);
        //当页面失焦，隐藏软键盘
        if (!hasWindowFocus) {
            inputManager.hideSoftInputFromWindow(this.getWindowToken(), 0);
        }
    }

    @Override
    protected void onFocusChanged(boolean gainFocus, int direction, @Nullable Rect previouslyFocusedRect) {
        super.onFocusChanged(gainFocus, direction, previouslyFocusedRect);
        if (gainFocus) {
            isFoucus = true;
        }else {
            //当该View失焦
            isFoucus = false;
            invalidate();
        }
    }

    @Override
    public InputConnection onCreateInputConnection(EditorInfo outAttrs) {
        //限制输入内容仅为数字？
        outAttrs.inputType = InputType.TYPE_CLASS_NUMBER;
        return super.onCreateInputConnection(outAttrs);
    }

    @Deprecated
    private void showRect(int positon) {
        rectIndex = positon;
        cursorVisible = true;
        invalidate();
    }

    private void addText(String str) {
        //限制字符长度添加
        if (texts.size() < textLengh) {
            texts.add(rectIndex, str);
            invalidate();
        }
    }

    private void removeLastText() {
        //删除最后一个字符
        if (texts.size() > 0) {
            texts.remove(texts.size() - 1);
            invalidate();
        }
    }

    //删除所有字符
    public void delectText(){
        texts.clear();
    }

    //获取所有字符
    public String getText() {
        StringBuffer stringBuffer = new StringBuffer();
        for (int i = 0; i < texts.size(); i++) {
            stringBuffer.append(texts.get(i));
        }
        return stringBuffer.toString();
    }

    //导入字符
    public void setText(String str) {
        for (int i = 0; i < str.length() && i < textLengh; i++) {
            texts.add(String.valueOf(str.charAt(i)));
        }
        invalidate();
    }

    public void setOnEnterClickListener(OnEnterClickListener onEnterClickListener) {
        this.onEnterClickListener = onEnterClickListener;
    }

    //提交
    private void commit() {
        onEnterClickListener.onClick();
    }

    //保存状态，其实并不需要
    @Nullable
    @Override
    protected Parcelable onSaveInstanceState() {
        Bundle bundle = new Bundle();
        bundle.putParcelable("superState", super.onSaveInstanceState());
        bundle.putString("texts", getText());
        return bundle;
    }

    //复用状态，其实并不需要
    @Override
    protected void onRestoreInstanceState(Parcelable state) {
        if (state instanceof Bundle) {
            Bundle bundle = (Bundle) state;
            if (texts.size() == 0) {
                setText(bundle.getString("texts", ""));
            }
            state = bundle.getParcelable("superState");
        }
        super.onRestoreInstanceState(state);
    }

    //帮助文档
    public void helpLog() {
        String msg = "helpLog：" +
                "\n1.最多支持6位字符输入" +
                "\n2.仅支持数字输入" +
                "\n3.对外开放的属性有：text_lengh字符长度、text_color字符颜色、text_visable是否显示具体数字、line_visable是否显示中间横杠、style圆角框/下划线两种样式、background_color背景颜色、backgroud_select_color选中时背景颜色" +
                "\n4.其中style属性的值有：STYLE_RECT 0 方框、STYLE_UNDERLINE 1 下划线" +
                "\n5.对外开放的接口有：setOnEnterClickListener() Enter键点击事件监听器" +
                "\n6.获取和填充字符：setText()、getText()，清空字符：delectText()" +
                "\n7.该View可以随宽高任意适配大小";
        MyLog.i("zmklog", msg);
    }
}

接口代码

package com.zmk.widget;

public interface OnEnterClickListener {
    void onClick();
}

MyLog代码

package com.example.common;

import android.util.Log;

public class MyLog {

    public static final String name_NORMAL = "normal_tag";

    public static void i(String msg){
        Log.i(name_NORMAL,   msg);
    }

    public static void i(String name,String msg){
        Log.i(name_NORMAL+"-"+name,   msg);
    }

    public static void d(String msg){
        Log.d(name_NORMAL,   msg);
    }

    public static void d(String name,String msg){
        Log.d(name_NORMAL+"-"+name,  msg);
    }

    public static void e(String msg){
        Log.e(name_NORMAL,   msg);
    }
    public static void e(String name,String msg){
        Log.e(name_NORMAL+"-"+name,   msg);
    }

    public static void w(String msg){
        Log.w(name_NORMAL,   msg);
    }
    public static void w(String name,String msg){
        Log.w(name_NORMAL+"-"+name,   msg);
    }
}

values.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="EditTextInputView">
        <attr name="text_lengh" format="integer"/>
        <attr name="text_color" format="color"/>
        <attr name="text_visable" format="boolean"/>
        <attr name="line_visable" format="boolean"/>
        <attr name="style" format="integer">
            <enum name="STYLE_RECT" value="0"/>
            <enum name="STYLE_UNDERLINE" value="1"/>
        </attr>
        <attr name="background_color" format="color"/>
        <attr name="backgroud_select_color" format="color"/>
    </declare-styleable>
</resources>