自定义View-(2)必须搞懂绘制时用到的每个参数
- 这一篇主要是对View的onDraw方法中对各种绘制参数的选择，进行细节的学习。
主要会涉及以下几个内容：- 1.获取尺寸参数时，父类在onLayout()中对于子View的布局尺寸的干涉
- 2.getWidth() ,getMeasureWidth()本质上的区别和如何选择
- 3.绘制文字时，文字居中位置的算法
- 我们最终实现一个类似于TextView的SloganView,效果图：
带边框，文本居中.png
上面我们看到这个View带边框，中间文本居中，这样一个View会很方便我们做验证。
开始之前，这里提一下自定义View的实现步骤。
→确认自定义属性
→在res/attrs 文件中声明 自定义属性
→在View的构造器中获取自定义属性并保存
→在onMeasure中确认AT_MOST模式时的View的测量大小
→在onDraw中根据保存的自定义属性和获取的View尺寸进行绘制
- 下面我们来看看实现中的细节
1.构造器中Dimension值的获取
（具体获取所有属性直接参照TextView的源码即可，如果你懒你怎么告别伸手党）
获取自定义的Dimension参数和默认值的设置，经常会用到下面三个方法：
getDimension()
看完源码具体计算，再加以我蹩脚的英语理解为 合成一个像素值,直接舍去小数
getDimensionPixelOffset()
和上面一样返回一个像素值，但是对小数会进行四舍五入 差别不大
getDimensionPixelSize()
在TypedArray和Resources中都有这三个函数，功能类似，TypedArray中的函数是获取自定义属性的，Resources中的函数是获取android预置属性的
注：Resources 最里面还是用的TypedArray 来查找和获取 Res 属性值的。
2.onMeasure根据测量模式进行处理
设置宽高默认值
//默认尺寸大小 单位
pxprivate int normalWidth = 260;
private int normalHeight = 140;
将上面的两个默认值作为AT_MOST模式的测量参数进行赋值，对这里有疑问的同学可以看我的上一篇文字自定义View-(1)先搞懂测量的所有细节,再回来这里你就清楚了。
private int mWidthSize;
private int mHeightSize;
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
L.printD(TAG, "onMeasure");
L.printD(TAG,"getMeasuredWidth="+getMeasuredWidth());
L.printD(TAG,"getMeasuredHeight="+getMeasuredHeight());
mWidthSize = MeasureSpec.getSize(widthMeasureSpec);
mHeightSize = MeasureSpec.getSize(heightMeasureSpec);
int widMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
if (widMode == MeasureSpec.AT_MOST) {
mWidthSize = normalWidth;
}
if (heightMode == MeasureSpec.AT_MOST) {
mHeightSize = normalHeight;
}
setMeasuredDimension(mWidthSize, mHeightSize);
}
3.onDraw根据属性和尺寸参数进行绘制
可以看到再逻辑代码中有很多的打印日志，是稍后我们验证的时候需要用到的。
个人非常喜欢用日志，无论是输入输出日志，逻辑转折或者交互的开始结束，我觉得打上日志，检查时清晰快捷，错误疏漏一目了然。工作开发中几乎没用过debug,如果需要用到debug那我一定是被逼上绝路了。
当然你最好自己写个日志打印类，提供开启关闭，也减少代码量。不然整个项目的日志没有关闭，会增加不必要的缓存和降低代码执行效率。
我们先为View绘制一个边框,使用自定是属性对画笔进行设置
paint = new Paint();
paint.setColor(strokeColor);
paint.setStrokeWidth(strokeWidth);
paint.setStyle(Paint.Style.STROKE);
Canvas为我们提供了一个直接可以绘制矩形的方法
public void drawRect(float left, float top, float right, float bottom, @NonNull Paint paint)
用个四个参数来确定绘制起点和绘制大小，前两个我们在不考虑有偏移量时一般都是0，0 就是从屏幕左上角那个点。
后面两个用来计算绘制大小的参数我们有两个选择，就是上文我们提到的getWidth()和getMeasureWidth(),那我们该如何选择呢？他们的实际效果又是什么样呢？
第一遍进去看完源码我得到如下解释（如果你想知道为什么，那就去查源码）
getWidth()返回mRight - mLeft,他们是在layout()中调用setFrame()赋值.
计算的是View在父窗口内被显示的尺寸，对padding、margin及其他布局参数处理。
最后保存为子View布局大小参数，确定子View显示尺寸大小。
getMeasureWidth() 则是在setMeasuredDimension()调用后赋值，用于确认View绘制的实际大小。
在layout()中 我们还会发现 onMeasure 比 onLayout先调用（有疑问请直接进View的Layout()方法中查看）。
根据上面的理解我们只能知道，getWidth获取的是View再屏幕上显示的宽度，getHeight同理。
两中方式获取的尺寸存在本质上是不同的，但是如果单纯在onDraw中用日志输出，会发现他们总是相等的，view的显示尺寸总是等于绘制尺寸，这里我外层是LinearLayout，他在layout方法中将测量大小直接赋值给了布局尺寸（点进源码一看便知），这里我们反向验证。如何让getWidth() 和getMeasureWidth()获取的值不相等?
为了更直观的了解 ，我们写一个父布局容器来重写onLayout方法，对子类的布局大小进行设置，最后日志输出两种方法的返回值。
- 自定义一个布局容器 CustomViewGroup
代码如下：
public class CustomViewGroup1 extends ViewGroup {
...
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
measureChildren(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int count = getChildCount();
//我们这里什么都不做，就强行设置子View的宽高为 300，300
for(int i = 0;i<count;i++){
View childView = getChildAt(i);
L.printD(TAG,"childView - me width=="+childView.getMeasuredWidth());
L.printD(TAG,"cheildView - me Height = "+childView.getMeasuredHeight());
childView.layout(0,0,300,300);
}
}
在xml中使用我们的布局容器
...
<com.zsw.testmodel.ui.act.customview.CustomViewGroup1
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/testmodelblue"
android:id="@+id/customViewGroup1">
<com.zsw.testmodel.ui.act.customview.CustomView1
android:layout_width="wrap_content"
android:layout_height="wrap_content"
custom:cv1_text="D-B-A-A"
custom:cv1_textColor="@color/red"
custom:cv1_strokeColor="@color/red"
custom:cv1_textSize="30sp"
custom:cv1_strokeWidth="5dp"
android:id="@+id/customView1" />
</com.zsw.testmodel.ui.act.customview.CustomViewGroup1>
...
android studio 给我们提供了很好的自定义view xml预览 我们看看UI最终的绘制效果
自定义布局容器.png
为了区分我给View加了背景颜色
深蓝色是我们的CustomViewGroup
灰色区是CustomView显示区域
红色边框是我们在CustomView上绘制的图形区域
可以看到红色边框比View小很多，当然如果我们在onMeasure中将默认值normalWidth 改为大于300 ，红色边框的绘制区域会超出View
再看看日志打印
//父类测量子类传入onMeasure的尺寸
CustomView1-->>onMeasure
CustomView1-->>getMeasuredWidth=1280
CustomView1-->>getMeasuredHeight=2108
父类 onLayout方法中获取子类自己重写测量后的尺寸，并设置布局尺寸为300，300
CustomViewGroup1-->>childView - me width==260
CustomViewGroup1-->>cheildView - me Height = 140
CustomView1-->>onLayout
CustomView1-->>onDraw----
//最终用于绘制的布局尺寸和测量尺寸
CustomView1-->>getWidth=300
CustomView1-->>getHeight=300
CustomView1-->>getMeasuredWidth=260
CustomView1-->>getMeasuredHeight=140
由此，得知这里绘制应该使用getMeasureWidth()获取的尺寸来计算，保证图形和文字能够完整绘制出来。如果getWidth 小于 getMeasureWidth()的大小，那么应该是xml中我们给的布局尺寸不够。
举个小例子，在xml中写了一个TextView 字体很大，行数很多，屏幕上只显示了半行字。
- 回到我们绘制矩形的步骤，使用Measure的尺寸来绘制：
canvas.drawRect( 0, 0 , getMeasuredWidth() , getMeasuredHeight(), paint);
上面边框我们已经搞定，接下来开始绘制文字
canvas为我们提供了快速绘制文字的方法
public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint)
还提供了一个获取text文本大小的方法
public void getTextBounds(String text, int start, int end, Rect bounds)
注释是这样解释的
* @param text 绘制的文本
* @param x x轴绘制起点坐标
* @param y 基准线baseline的起点坐标(下面会解释baseline是什么)
* @param paint 画笔
这里的X起点很好计算，(getMeasuredWidth()-rect.width())/2 左右边距相同即水平居中。
首先要记住： baseline 是基准线！基准线！下面的验证都是围绕它来进行的。
可以理解为在单独绘制文字时,根据局部文本尺寸建立新的坐标系 baseLineY = 0;
下面是对中心y坐标的计算，我也是翻了很多老司机的博客，最后根据自己实际测试代码来学习的.
这里给上最一篇我认为分析【字体绘制位置的计算】的最清晰的博客 http://blog.csdn.net/wan778899/article/details/51460849
当然你也可以像笔者一样把FontMetrics中的几个边界线绘制一遍，再推敲计算公式
上面边线的绘制是参照TextView源码中的BoringLayout中对文字绘制的算法。
你也可以直接参考下图
text绘制边界.png
图片地址：http://blog.csdn.net/u014702653/article/details/51985821
最后我得到的算法如下：
先取得View绘制高度的一半，减去文本得top到view的边距，再下降文本高度得一半 得到baseline
int baseLine = getMeasuredHeight()/2 - ~(fontMetrics.bottom - fontMetrics.top)+rect.height()/2;
- 可以看到上面做了非常多的验证和分析，最终我们得到正确的baseline的值，下面绘制Text
paint.reset();
paint.setColor(textColor);
paint.setTextSize(textSize);
bounds = new Rect();
paint.getTextBounds(text,0,text.length(),bounds);
Paint.FontMetricsInt fontMetrics = new Paint.FontMetricsInt();
int baseLine = getMeasuredHeight()/2 - ~(fontMetrics.bottom - fontMetrics.top)+bounds.height()/2;
canvas.drawText(text,(getMeasuredWidth()-bounds.width())/2,baseLine,paint);
最终的效果图：
SloganView.png
惯例附上源码地址：
https://github.com/HarkBen/RainBowLibrary/blob/master/simpleDemo/src/main/java/com/zsw/testmodel/ui/act/customview/SloganView1.java
这一段自定义View的学习就暂时结束了，我们来总结一下，梳理一下重要内容。
- 1.onMeasure，View绘制尺寸测量
- 2.onLayout，父类对子类显示尺寸的设置
- 3.onDraw,根据对尺寸的选择 + 属性的获取，进行绘制
- 4.有关文本绘制时，对文本位置的计算
到这里，有关自定义为最重要的三个方法，onMeasure,onLayout,onDraw的深度分析和学习就结束了。
如果能对大家有所帮助那我真的是太高兴了，，同处开源大环境下，我也是看着知名博主们的文章长大的，哈哈。如果有疑问或者是发现笔者本文的纰漏和错误，欢迎大家在下方评论。
