玩转Android自定义 ViewGroup，逐层剖析ViewGroup设计原理

Android

2024-01-12 02:04:52

自定义 ViewGroup：掌握流式布局的奥秘

在 Android 界面布局中，自定义 ViewGroup 就像一块神奇的拼图，赋予开发者灵活定制布局的能力。本次旅程，我们将深入探究自定义 ViewGroup 的奥秘，以一个流式布局为例，揭开其运作原理的面纱。

了解 ViewGroup 的运作机制

ViewGroup，作为 Android 布局系统的核心，扮演着管理子 View 布局和大小的容器角色。它遵循以下三个关键步骤执行任务：

测量阶段： 测量自身和子 View 的大小，确定所需空间。
布局阶段： 根据测量结果，确定子 View 的准确位置。
绘制阶段： 将子 View 渲染到屏幕上。

自定义 FlowLayout

我们以一个自定义的流式布局为例，它具有以下特点：

流式排列： 子 View 水平排列，直到达到可用空间的边界，再换行继续排列。
支持填充： 布局自身支持填充属性，为子 View 提供边距。

代码详解

1. 测量阶段

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);

    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);

    // 测量自身大小
    setMeasuredDimension(
        widthMode == MeasureSpec.EXACTLY ? widthSize : 0,
        heightMode == MeasureSpec.EXACTLY ? heightSize : 0
    );

    // 测量子 View 大小
    measureChildViews(widthSize, heightSize);
}

private void measureChildViews(int widthSize, int heightSize) {
    int availableWidth = widthSize - getPaddingLeft() - getPaddingRight();
    int availableHeight = heightSize - getPaddingTop() - getPaddingBottom();

    int left = getPaddingLeft();
    int top = getPaddingTop();

    // 循环测量子 View
    for (int i = 0; i < getChildCount(); i++) {
        View child = getChildAt(i);
        if (child.getVisibility() != GONE) {
            // 测量子 View 大小
            measureChild(child, widthSize, heightSize);

            // 获取子 View 测量后的宽度和高度
            int childWidth = child.getMeasuredWidth();
            int childHeight = child.getMeasuredHeight();

            // 判断是否需要换行
            if (left + childWidth > availableWidth) {
                left = getPaddingLeft();
                top += childHeight;
            }

            // 设置子 View 的布局位置
            child.layout(left, top, left + childWidth, top + childHeight);

            // 更新 left 和 top 值
            left += childWidth;
            top += childHeight;
        }
    }
}

2. 布局阶段

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    // 子 View 布局已在测量阶段完成，无需额外处理
}

进阶思考

1. 支持边距

@Override
protected void measureChild(View child, int parentWidthMeasureSpec, int parentHeightMeasureSpec) {
    LayoutParams lp = child.getLayoutParams();

    int childWidthMeasureSpec = getChildMeasureSpec(parentWidthMeasureSpec,
        getPaddingLeft() + getPaddingRight() + lp.leftMargin + lp.rightMargin,
        lp.width);
    int childHeightMeasureSpec = getChildMeasureSpec(parentHeightMeasureSpec,
        getPaddingTop() + getPaddingBottom() + lp.topMargin + lp.bottomMargin,
        lp.height);

    child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
}

2. 自定义 View 的宝藏图

             ______
            /\  /\
    =======/  \/  \=======
    |      \/      \      |
    |              |      |
    |              |      |
    |              |      |
    |              |      |
    |              |      |
    =======|      |/=======
            \|  /|
             \/  \/

结论

自定义 ViewGroup 的魅力在于，它赋予开发者根据特定需求操纵子 View 大小和位置的能力。通过剖析流式布局，我们领悟了 ViewGroup 的设计精髓。掌握这些原理，你也能打造出独具特色的自定义 ViewGroup，为 Android 界面布局注入更多活力！

常见问题解答

1. 自定义 ViewGroup 有哪些好处？

自定义 ViewGroup 提供了灵活性，可根据特定需求定制布局，实现独特且复杂的 UI 设计。

2. 测量阶段和布局阶段的区别是什么？

测量阶段确定 ViewGroup 和其子 View 的大小，而布局阶段则根据测量结果确定子 View 的确切位置。

3. 如何支持子 View 的边距？

通过修改 measureChild 方法，将边距值添加到子 View 的测量规范中。

4. 为什么了解 ViewGroup 的运作机制很重要？

深入理解 ViewGroup 的工作原理，有助于优化性能、减少布局错误并创建更健壮的界面。

5. 自定义 ViewGroup 有什么需要注意的事项？