自定义Wiew 绘制带下划线的EditText

前言

写博客 就是学习总结的时候，把我们平时以为很懂的知识点记录下来，有时候真的需要毅力，有时候下笔无神，对知识的理解不够。

最近项目里有一个ui 需求，如图

相信对大家都很简单，我说一下做的思路和问题，最nb的技术也是从简单做起的码。

代码

先写一个继承 EditText 的class ，在构造函数中 初始化 线的Paint,以及输入文字的Paint

        linePaint = new Paint();
        linePaint.setColor(Color.parseColor("#212121"));//设置下划线颜色
        linePaint.setStrokeWidth(DisplayUtil.dip2px(context, 1f));

        InputPaint= new Paint(ANTI_ALIAS_FLAG);
        InputPaint.setStyle(Paint.Style.FILL);
        InputPaint.setColor(Color.parseColor("#212121"));
        InputPaint.setTextSize(DisplayUtil.sp2px(context, 24f));

        jiangeWidth = DisplayUtil.dip2px(context, 10f);//短线间隔
        jiangeHeight = DisplayUtil.dip2px(context, 15f);//文字与线距离

在 onDraw 方法中绘制

        int width = getWidth();
        int height = getHeight();
        int textWidth = (width - jiangeWidth * 3) / 4;

        //下划线
        for (int i = 0; i < passwordLength; i++) {
            paramCanvas.drawLine(textWidth * i + jiangeWidth * i, height, textWidth * (i + 1) + jiangeWidth * i, height, linePaint);
        }
        // 验证码
        if (TextUtils.isEmpty(text)) {
            return;
        }
        String substring = "";
        for (int i = 0; i < textLength; i++) {
            substring = text.substring(i, i + 1);
            paramCanvas.drawText(substring, textWidth * i + jiangeWidth * i + textWidth * 1 / 3, height - jiangeHeight, InputPaint);
            //paramCanvas.save();
        }

重写 onTextChanged 方法，监听文字变化。

        this.text = text.toString();
        this.textLength = text.toString().length();

使用

 <com.example.android.view.InputEditText
        android:id="@+id/passwordInputView"
        android:hint="请输入收到的验证码"
        android:layout_centerHorizontal="true"
        android:layout_width="200dp"
        android:paddingTop="10dp"
        android:layout_height="wrap_content"
        android:textSize="24dp"
        android:background="@null"
        android:gravity="center_horizontal"
        android:lineSpacingMultiplier="1.3"
        android:inputType="textMultiLine"
        android:maxLength="4"

        />

补充：
1 文字的绘制
/**
* text:要绘制的文字
* x：绘制原点x坐标
* y：绘制原点y坐标
* paint:用来做画的画笔
*/
public void drawText(String text, float x, float y, Paint paint)

(x,y) 文字的左下角，而非左上角，y 基线位置。

2 如果动态监听输入的字符，并设置事件

   private IWatchLetterNum iWatchLetterNum;
   public void setIWatchLetterNum(IWatchLetterNum iWatchLetterNum) {
        this.iWatchLetterNum = iWatchLetterNum;
    }


    public interface IWatchLetterNum {
        void is4Letter(Boolean b, String text);//是否 有4个字符
    }

在onTextChanged 中添加 监听。

 if (null != iWatchLetterNum) {
                if (this.textLength >= 4) {//设置回调
                    iWatchLetterNum.is4Letter(true, text.toString());
                } else {
                    iWatchLetterNum.is4Letter(false, text.toString());
                }

            }

java 中注册事件

InputView.setIWatchLetterNum(new InputEditText.IWatchLetterNum() {
            @Override
            public void is4Letter(Boolean b,String text) {
                if(b){
                    InputView.setLinePaintColor(Color.parseColor("#DADADA"));
                    Log.e(TAG, "录入的字符is4Letter: " + text);
                }else {
                    InputView.setLinePaintColor(Color.parseColor("#212121"));
                    Log.e(TAG, "录入的字符 is4Letter: " + b);
                }
            }
        });

问题

如果有监听，就会一直draw,不管文字有没有变化，还没明白，有解决方案的希望告知一下。