手把手教你写一个自定义 ViewGroup
关键字：kotlin、custom、ViewGroup
custom view group 书写流程
1. override onLayout
首先，最直觉的做法，就是写下 public class CustomViewGroup extends ViewGroup {} 。对于 kotlin 呢，就是 class CustomViewGroup : ViewGroup {} 。然后，根据编译器的提示，我们去实现 onLayout 方法。那么这个 onLayout 的作用是什么呢？
简单翻阅源码，发现在 View 的源码下找到了答案：
public void layout(int l, int t, int r, int b) {
// ...
if (changed || (mPrivateFlags & PFLAG_LAYOUT_REQUIRED) == PFLAG_LAYOUT_REQUIRED) {
// ...
onLayout(changed, l, t, r, b);
// ...
}
// ...
这段代码告诉我们，onLayout 是在 layout 方法中调用的。从命名而角度来看，on 表示在什么什么时候。类似的，我们写自定义 view 的时候经常写的 onMeasure 也是在 measure 方法中调用的。那么聪明的读者，请你告诉我，我们写 activity 的时候写的 onCreate 方法，是不是也是在 Activity 的 create 中调用的呢？
哈哈，当然不是了（请放下你们手中的西瓜刀）。onCreate 是在 Activity 中的 performCreate 方法中调用的。不过，原理是类似的，onXxx 都是在实际做 xxx 的时候被调用。而这些个 xxx 方法基本都是 final 的。
书归正传。这个 onLayout 的用途是什么呢？onLayout 函数是在 layout 函数中调用的，自然就是负责处理布局相关的逻辑。看一下函数签名：
override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int)
四个参数 left、top、right、bottom 相当于给我们画了一个边界，我们就在这个画布上作画，不能超出。之后我们在 onLayout 中的逻辑就是，如何排布我们的 CustomViewGroup 的 children 了。这个需要根据业务来。如果仅仅为了测试的话，我们可以简单的让他们一个接一个排列不留空。
在我们写完了 onLayout 之后，运行项目。不出意外的话，我们是看不到任何东西的。为什么？因为我们还少了非常关键的一个环节：测量。
2. override onMeasure
编译器只告诉了我们，需要 override onLayout，但是没有告诉我们需要 overrid onMeasure。仔细想想，在显示生活中，如果我们想有一个 2d 的纸张来画子 view 的话，那么，我们只知道我的子 view 的排列方式还不够，必须要先告诉别人，我们的纸张的大小，这样我们才能作画。onMeasure 就做了向 CustomViewGroup 的 parent 描述我们需要的大小的工作。
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
val width = getSize(defaultSize = 300, measureSpec = widthMeasureSpec)
val height = getSize(defaultSize = 300, measureSpec = heightMeasureSpec)
measureChildren(widthMeasureSpec, heightMeasureSpec)
setMeasuredDimension(width, height)
}
其中，measureChildren(widthMeasureSpec, heightMeasureSpec) 完成了递归地 measure 子 view 的工作。最后一句 setMeasuredDimension(width, height) 非常重要，每一个 onMeasure 方法都要去显式地调用它。
3. 上代码
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
val width = getSize(defaultSize = 300, measureSpec = widthMeasureSpec)
val height = getSize(defaultSize = 300, measureSpec = heightMeasureSpec)
measureChildren(widthMeasureSpec, heightMeasureSpec)
setMeasuredDimension(width, height)
}
override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
var currentTop = 0
var currentLeft = 0
var currentRowHeight = 0
for (i in 0..childCount) {
val child = getChildAt(i) ?: continue
val childWidth = child.measuredWidth
val childHeight = child.measuredHeight
// child 的 width or height 超过了 parent 的 width 和 height，直接丢弃
if (childWidth > measuredWidth
|| childHeight > measuredHeight) {
continue
}
if (currentTop + childHeight > measuredHeight) {
continue
}
if (currentLeft + childWidth > measuredWidth) {
currentLeft = 0
currentTop += currentRowHeight
currentRowHeight = 0
}
if (currentLeft + childWidth <= measuredWidth
&& currentTop + childHeight <= measuredHeight) {
child.layout(currentLeft, currentTop, currentLeft + childWidth, currentTop + childHeight)
currentLeft += childWidth
if (childHeight > currentRowHeight) {
currentRowHeight = childHeight
}
}
}
}
private fun getSize(defaultSize: Int, measureSpec: Int): Int {
val size = MeasureSpec.getSize(measureSpec)
val mode = MeasureSpec.getMode(measureSpec)
when (mode) {
MeasureSpec.EXACTLY -> {
return size
}
MeasureSpec.AT_MOST -> {
return Math.min(size, defaultSize)
}
MeasureSpec.UNSPECIFIED -> {
return defaultSize
}
else -> {
return defaultSize
}
}
}
代码中，layout child 的关键的句子就是：
child.layout(currentLeft, currentTop, currentLeft + childWidth, currentTop + childHeight)
4. 小结
我们写 CustomViewGroup 的时候，需要一次做这几个事情：
- override onMeasure
- measureChildren(widthMeasureSpec, heightMeasureSpec)
- setMeasuredDimension(width, height)
- override onLayout
- 理清你需要的业务逻辑
child.layout(currentLeft, currentTop, currentLeft + childWidth, currentTop + childHeight)
