自定义View--自定义输入框

前言

无论做什么应用，总是有需要输入框的地方，总的来说，输入框都不是单独存在的，一般会需要标题、输入框（一般需要自定义边框/下划线/光标颜色长度等）、左右图标，密码类型的输入框还可能需要密码可见按钮，如果自己写布局，布局文件会比较臃肿，使用也不方便（因为你需要单独控制text、hint、icon、title等等对应的view）。为了解决这个问题，于是想到写一个输入框控件

先附上github地址，不想看我多bb的直接用起来就是
https://github.com/NotSeriousCoder/FormInputView

控件长这样

自定义输入框

思路

输入框类型

一般在表单里面，用到的输入框类型如下：

1. 普通文本，啥都能输入
2. 单行文本框
3. 数字文本框
4. 密码输入框（文本/纯数字）
5. 点击选择框（即无法手动输入，一般是收到回调之后弹一个窗口，用户选择）

布局

想清楚类型，就可以开始思考布局（就是上面效果图那个样子啦）。总的来说，最外层一个FrameLayout，最外层是边框，里面一个LinearLayout用来放图标和输入框。其他都好说，关键的地方，在于边框的绘制，由于要做成颜色可变，而且要要给title的位置留白，那么就不能使用固定图片来做background，要手动绘制。

实现

1.需要仿写一部分EditText的常用方法（因为不是直接继承EditText），比如setText(text)、setHint(hint)之类，另外要提供getEditText()
2.通过onMeasure()计算内部控件的宽度（要留出左右边框的位置），高度则保持自适应即可（上下边框位置由padding控制）
3.绘制边框及title
4.控制内部子控件的摆放位置，防止内部子控件放置在视野之外

具体实现

这里只讲重点，也就是视图的测量、布局、绘制，其他都是些简单的内容，不赘述。
View的生成流程，我们可利用的，就是
测量--onMeasure(int widthMeasureSpec, int heightMeasureSpec)
布局--onLayout(boolean changed, int left, int top, int right, int bottom)
绘制--onDraw(Canvas canvas)

想深入学习，可以看这篇文章（郭霖大神，想必学Android的都不陌生吧）
Android LayoutInflater原理分析，带你一步步深入了解View

测量--onMeasure

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setupPadding();
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setupRadius();

        //子控件的宽度=父控件的宽度-2*边框笔触宽度
        //这样就不会踩线
        int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(
                (int) (MeasureSpec.getSize(widthMeasureSpec) - 2.2 * Math.max(borderWidth, radius)),
                MeasureSpec.EXACTLY
        );
        //给每个子控件设置上
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            child.measure(
                    childWidthMeasureSpec,
                    heightMeasureSpec
            );
        }
        setupIconSize();
    }

首先，是设置上下Padding，给上下边框+title留出位置，因为没有去细究padding的设置是否会对子控件的测量产生影响（其实我觉得会），所以保险起见，我选择在测量前先设置
padding存在两种情况
  1.文字高度>边框笔触宽度
  2.文字高度<边框笔触宽度
  取较大值为topPadding， bottomPadding则固定是边框的笔触宽度即可
然后设置子控件宽度，没啥好讲，看代码即可

布局--onLayout

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            //左右将需要的空间空出来（宽度取边框笔触宽度和边框弧度的较大值）
            left = (int) (1.1 * Math.max(borderWidth, radius));
            right = (int) (getMeasuredWidth() - 1.1 * Math.max(borderWidth, radius));
            top = getPaddingTop();
            bottom = top + child.getMeasuredHeight();

            child.layout(
                    left,
                    top,
                    right,
                    bottom
            );
        }
    }

这里需要注意，并不会因为我们设置了paddingTop和paddingBottom，onLayout的top和bottom值就按照padding过后的值给过来，所以我们要自己计算

绘制--onDraw

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //设置空心，因为要画空心圆角矩形
        paint.setStyle(Paint.Style.STROKE);
        //设置笔画粗细度
        paint.setStrokeWidth(borderWidth);
        paint.setColor(borderColor);
        //开启抗锯齿
        paint.setAntiAlias(true);
        canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));

        /**
         * 因为绘画的时候，设定的xy点是笔触的中点
         * 所以left right bottom都需要+-笔触宽度的一半(borderWidth / 2)，保证画出来的边框不会有一边在视线以外并且贴边
         * top是例外，因为有文字，所以要getPaddingTop()/2
         */
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            canvas.drawRoundRect(borderWidth / 2, getPaddingTop() / 2, getMeasuredWidth() - borderWidth / 2, getMeasuredHeight() - borderWidth / 2, radius, radius, paint);
        } else {
            canvas.drawRoundRect(new RectF(borderWidth / 2, getPaddingTop() / 2, getMeasuredWidth() - borderWidth / 2, getMeasuredHeight() - borderWidth / 2), radius, radius, paint);
        }

        if (!TextUtils.isEmpty(title)) {
            titleRect = Utils.getTextSize(textSizeTitle, title);
            /**
             * 画一条线（颜色{@link #getBgColor()}），作为空白处用来画title
             * 线的起始点X值：笔触宽度+弧度值+用户自定义标题偏移量
             */
            int lineStartX = borderWidth + radius + titleOffset;
            //线的终点X值，则需要计算文字宽度来决定
            int lineEndX = lineStartX;
            //这里计算的是控件剩余可用于绘制的宽度，如果根本没地方了，直接结束绘制
            int availableWidth = getMeasuredWidth() - borderWidth - radius - lineStartX;
            if (availableWidth <= 0) {
                return;
            }
            int textWidth = titleRect.width();
            //如果标题过宽，则裁剪标题
            //-8dp是因为需要预留空白，防止标题和边框过于靠近
            if (textWidth > availableWidth - UnitConverter.dip2px(getContext(), 8)) {
                title = getSuitableText(title, textSizeTitle, availableWidth - UnitConverter.dip2px(getContext(), 6));
                titleRect = Utils.getTextSize(textSizeTitle, title);
                textWidth = titleRect.width();
            }
            if (textWidth * 0.2f > UnitConverter.dip2px(getContext(), 4)) {
                lineEndX += textWidth + UnitConverter.dip2px(getContext(), 4);
            } else {
                lineEndX += textWidth * 1.2f;
            }
            //标题起始点X值=空白线起始值X +( 空白线长度 - 标题长度 )/2
            //( 空白线长度 - 标题长度 )/2 就是留白的长度
            int textStartX = lineStartX + (lineEndX - lineStartX - textWidth) / 2;

            paint.setStyle(Paint.Style.FILL);
            paint.setStrokeWidth(borderWidth);
            paint.setColor(getBgColor());
            canvas.drawLine(lineStartX, getPaddingTop() / 2, lineEndX, getPaddingTop() / 2, paint);

            paint.setTextSize(textSizeTitle);
            paint.setColor(textColorTitle);
            Paint.FontMetricsInt fm = paint.getFontMetricsInt();
            //文字的绘制，并不是以字高的中点为(x,y)，而是以baseLine为准，所以位置并不好算，这里也是瞎蒙
            canvas.drawText(title, textStartX, ((fm.bottom - fm.ascent) / 3 + getPaddingTop() / 2), paint);
        }
    }

这里有一点需要注意，由于画笔的笔触是有宽度的（比如10dp这么宽），那么你在绘制图形的时候就要注意，startY并不是笔触的最上方位置，比如说：

canvas.drawLine(lineStartX, 0, lineEndX, 0, paint);

如果这样画，很可能这条线有一半会在视线之外

本来想讲一下绘制的思路，但是好像没啥必要。。。看代码就差不多了，就这样，有问题评论区交流