美文网首页
自定义View--自定义输入框

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

作者: 小斌_bingor | 来源:发表于2018-11-13 17:27 被阅读0次

前言

无论做什么应用,总是有需要输入框的地方,总的来说,输入框都不是单独存在的,一般会需要标题、输入框(一般需要自定义边框/下划线/光标颜色长度等)、左右图标,密码类型的输入框还可能需要密码可见按钮,如果自己写布局,布局文件会比较臃肿,使用也不方便(因为你需要单独控制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);

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

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

相关文章

网友评论

      本文标题:自定义View--自定义输入框

      本文链接:https://www.haomeiwen.com/subject/pfslfqtx.html