【Android】自定义 View 系列-ViewGroup

自定义 ViewGroup 其实也不复杂，但是要对子 View 的margin属性支持，就还需要花点经历。

下面自己写了一个自定义的 FlowLayout，支持了本身的 padding 属性的同时，也支持子 View 的 margin 属性。基本注释都已尽可能详尽地写在代码中。

先上效果图

兄弟们，上代码

import android.content.Context
import android.graphics.Rect
import android.util.AttributeSet
import android.view.ViewGroup
import androidx.core.view.children
import kotlin.math.max

/**
 *
 * @Author: QCoder
 * @CreateDate: 2021/12/6
 * @Description: 流式布局，当一行放不下后，换行放
 * 支持了本身的 Padding 属性，以及子 View 的 margin 属性
 * @Email: [email protected]
 */
class QFlowLayout(context: Context, attrs: AttributeSet) : ViewGroup(context, attrs) {

    //通过矩阵记录每个子 View margin 后的具体位置
    private val childrenBounds = mutableListOf<Rect>()
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        //获取 QFlowLayout 的宽高的期望值 (XSize) 和 测量模式（XMode），其中 X 代表宽或高，下面同义。
        val widthMode = MeasureSpec.getMode(widthMeasureSpec)
        val widthSize = MeasureSpec.getSize(widthMeasureSpec)
        val heightMode = MeasureSpec.getMode(heightMeasureSpec)
        val heightSize = MeasureSpec.getSize(heightMeasureSpec)

        // QFlowLayout 的实际宽度
        var selfWidth = 0
        // QFlowLayout 的实际高度
        var selfHeight = 0
        //当行的宽度（当行已有宽度，由子 View 和 margin，padding 属性累加起来的）
        var currentLineWidth = 0
        //当行的高度
        var currentLineHeight = 0

        //遍历测量子 View
        for (child in children) {
            //判断，若 visibility == GONE ，即不可见又不占位置的时候，跳过测量
            if (child.visibility == GONE) continue
            //测量子 View。child 当前的子 View；XMeasureSpec 是QFlowLayout 对子 View 的期望
            measureChild(child, widthMeasureSpec, heightMeasureSpec)

            //获取到子 View 的 layout属性。
            val lp = child.layoutParams as MarginLayoutParams
            val childWidth = child.measuredWidth + lp.leftMargin + lp.rightMargin
            val childHeight = child.measuredHeight + lp.topMargin + lp.bottomMargin
            //判断是否需要换行，true 需要换行；false 不需要换行
            if (currentLineWidth + childWidth > widthSize - paddingLeft - paddingRight) {

                //将当前宽度和原先的宽度对比后，重置宽度为当前子 View 宽度
                selfWidth = max(selfWidth, currentLineWidth)
                currentLineWidth = childWidth


                selfHeight += currentLineHeight
                currentLineHeight = childHeight
                childrenBounds.add(
                    //因为需要换行，所以当前的子 View 是在新的一行，那么
                    // left 左边界 = 当前子View 的 leftMargin + QFlowLayout 的 paddingLeft
                    // top 上边界 = 累计的高度 selfHeight + 当前子View 的 topMargin + QFlowLayout 的 paddingTop
                    // right 右边界 = 当前子View 的宽度 + left
                    // bottom 下边界 = top + 当前子View 的高度
                    Rect(
                        lp.leftMargin + paddingLeft, //left
                        selfHeight + lp.topMargin + paddingTop, //top
                        child.measuredWidth + lp.leftMargin + paddingLeft, //right
                        selfHeight + lp.topMargin + paddingTop + child.measuredHeight //bottom
                    )
                )
            } else {
                //因为不需要换行，所以当前的子 View 在当行的接轨上去，那么
                // left 左边界 = 当行宽度 currentLineWidth + 当前子View 的 leftMargin + QFlowLayout 的 paddingLeft
                // top 上边界 = 累计的高度 selfHeight + 当前子View 的 topMargin + QFlowLayout 的 paddingTop
                // right 右边界 = 当行宽度 currentLineWidth + left
                // bottom 下边界 = top + 当前子View 的高度
                childrenBounds.add(
                    Rect(
                        currentLineWidth + lp.leftMargin + paddingLeft,//left
                        selfHeight + lp.topMargin + paddingTop,//top
                        child.measuredWidth + currentLineWidth + lp.leftMargin + paddingLeft, //right
                        selfHeight + lp.topMargin + paddingTop + child.measuredHeight//bottom
                    )
                )

                //不需要换行，所以当前行的宽度 = 原来的宽度 + 当前子 View 的宽度
                currentLineWidth += childWidth
                //行的高度，我们只需要知道最高的那就行
                currentLineHeight = max(currentLineHeight, childHeight)
            }

        }
        selfWidth = max(selfWidth, currentLineWidth) + paddingRight + paddingLeft
        selfHeight += currentLineHeight + paddingTop + paddingBottom
        setMeasuredDimension(
            if (widthMode == MeasureSpec.EXACTLY) widthSize else selfWidth,
            if (heightMode == MeasureSpec.EXACTLY) heightSize else selfHeight
        )
    }

    override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
        for ((index, child) in children.withIndex()) {
            val childBounds = childrenBounds[index]
            child.layout(
                childBounds.left,
                childBounds.top,
                childBounds.right,
                childBounds.bottom
            )
        }
    }

    override fun generateLayoutParams(attrs: AttributeSet?): LayoutParams {
        return MarginLayoutParams(context, attrs)
    }

    override fun generateLayoutParams(p: LayoutParams): LayoutParams {
        return MarginLayoutParams(p)
    }

    override fun generateDefaultLayoutParams(): LayoutParams {
        return MarginLayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
    }

}

最后，附上一个最近我整理的有关自定义 View 的知识网络结构图

链接：https://pan.baidu.com/s/1COTMibrJtANax7cXYL_eeA
提取码：tbok