手写自定义View—流式布局

视频：价值100w+Android项目实战大全：手把手实战，自定义View
原文： https://juejin.cn/post/6969132819855441934

View的生命周期

先onMeasure()测量 、 再onLayout()布局 、最后onDraw()绘制。

在onMeasure()度量时，会先去度量儿子（先走儿子的生命周期），想确认儿子的大小才能确认自己的大小。

image.png

自定义View分成两类：

• 自定义View

一般继承自View，SurfaceView或其他的View。
onMeasure()--> onDraw()都会执行，onLayout()看需求

• 自定义ViewGroup

继承自ViewGroup或各种Layout
onMeasure()--> onLayout()都会执行， onDraw()看需求

自定义View包含什么

布局： onlayout onmeausre/ Layout：viewGroup
显示： onDraw ：view： canvas paint matrix clip rect animation path（贝塞尔） line text绘制 frameWork： 交互： onTouchEvent ：组合的viewGroup

LayoutParams与MeasureSpec

LayoutParams

LayoutParams(布局参数)，也就是xml里定义的

image.png image.png
获取
image.png

MeasureSpec

MeasureSpec是一个（32位）的int值，高两位表示父容器对 view 的布局上的限制（Mode），低30位表示view的Size

image.png
image.png
1.unspecified--无限制
2.exactly -- 确定的大小
3.at_most -- 最大不超过 image.png

实现流式布局

1.继承ViewGroup

image.png

2.自定义ViewGroup需要实现onMeasure()度量和onLayout()

image.png 3.标准开局，要度量自己的大小得先度量儿子的大小，所以遍历儿子View，去view.measure（） image.png

4.儿子的宽高是根据父亲给他的MeasureSpec的Mode + 上自己的LayoutParams算出来的，也就是上面的那个表格。如父亲给的是exactly（确定的大小），儿子又是android:layout_width="10dp"，两个都是确定的，那就是10dp

image.png

5.取到儿子的宽高

image.png

6.儿子的宽高拿到了，那就是计算每行的宽度（并且取最大行宽度）。计算总的高度

image.png

7.for循环跑完了，这样每个孩子都度量完了，也知道了最大的宽高，就可以度量自己的宽高了

image.png

8.但是自己的宽高并不只受儿子的影响，还跟父亲给的Mode相关

image.png

到此onMeasure（）度量完了，接下来开始布局onLayout（）

9.因为度量的时候，已经确定了每一行存哪几个View，把他存到数组里，这样布局的时候简单很多

image.png

10.布局onLayout()重要的就是确定上下左右。
所谓的上下左右就是距离父亲总边框的左上角的位置

image.png

所以第一个view的左就是0，右就是 左+view的宽度。（计算时考虑view直接的margin就行）
第二个view就是 第一个View的右+第二个view的左....依次类推（用掉的宽高）

image.png

补充

view.getMeasuredWidth()与view.getWidth()

取宽高的时候为啥是view.getMeasuredWidth()。
view.getMeasuredWidth()度量之后这个就有值，但是view.getWidth()得view绘制完成
所以有的时候用view.getWidth()取值的时候是0，但是刷新一下或者下一个绘制时又有值了。

image.png

view的Visibility别忘了

是不是隐藏的情况得考虑

image.png