自定义View--自定义输入框
前言
无论做什么应用，总是有需要输入框的地方，总的来说，输入框都不是单独存在的，一般会需要标题、输入框（一般需要自定义边框/下划线/光标颜色长度等）、左右图标，密码类型的输入框还可能需要密码可见按钮，如果自己写布局，布局文件会比较臃肿，使用也不方便（因为你需要单独控制text、hint、icon、title等等对应的view）。为了解决这个问题，于是想到写一个输入框控件
先附上github地址，不想看我多bb的直接用起来就是
https://github.com/NotSeriousCoder/FormInputView
控件长这样
自定义输入框
思路
输入框类型
一般在表单里面，用到的输入框类型如下：
- 普通文本，啥都能输入
- 单行文本框
- 数字文本框
- 密码输入框（文本/纯数字）
- 点击选择框（即无法手动输入，一般是收到回调之后弹一个窗口，用户选择）
布局
想清楚类型，就可以开始思考布局（就是上面效果图那个样子啦）。总的来说，最外层一个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);
如果这样画，很可能这条线有一半会在视线之外
