手把手教你写一个自定义 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 的时候，需要一次做这几个事情：

1. override onMeasure
   1. measureChildren(widthMeasureSpec, heightMeasureSpec)
   2. setMeasuredDimension(width, height)
2. override onLayout
   1. 理清你需要的业务逻辑
   2. child.layout(currentLeft, currentTop, currentLeft + childWidth, currentTop + childHeight)