ViewGroup 赋能：随心构建规定行数、item 居中的流式布局

Android

2023-11-12 22:22:52

前言

流式布局作为一种常见的布局方式，因其灵活性强、适应性佳等优点，在 Android 开发中广受欢迎。它能够根据子元素的尺寸自动调整布局，充分利用屏幕空间，呈现出更美观的 UI 界面。

剖析难题：规定行数与 item 居中的实现

然而，在实际开发中，我们经常会遇到这样的难题：如何规定流式布局的行数，并实现 item 在每行内的居中显示？传统的流式布局算法往往难以满足这些需求，需要我们另辟蹊径，寻求更优的解决方案。

解决方案：打造定制流式布局

为了解决这些难题，本文将介绍一种使用 ViewGroup 实现的流式布局方案，它能够轻松满足规定行数和 item 居中的需求，助力你构建更具个性化的 UI 界面。

关键步骤：逐一拆解实现过程

构建定制 ViewGroup

第一步，我们需要创建一个自定义 ViewGroup，它将作为流式布局的容器。这个 ViewGroup 负责管理子元素的布局，并根据既定的规则进行排列。
测量子元素尺寸

在 onMeasure 方法中，我们需要测量每个子元素的尺寸，以便为其分配适当的空间。这里需要注意的是，我们需要考虑子元素的内边距和外边距，以确保其能够正确显示。
确定每行 item 的数量

接下来，我们需要确定每行可以容纳多少个 item。这取决于容器的宽度、子元素的宽度以及子元素之间的间距。我们可以通过计算的方式来确定每行的 item 数量。
排列子元素位置

在 onLayout 方法中，我们需要根据计算出的每行 item 数量，将子元素排列在适当的位置。这里需要注意的是，我们需要考虑子元素之间的间距，以确保其能够均匀分布在每行中。
item 居中显示

为了实现 item 在每行内的居中显示，我们需要在 onLayout 方法中对子元素的 left 和 right 属性进行调整。我们可以使用容器的宽度和子元素的宽度来计算子元素居中的位置，并将其设置为子元素的 left 和 right 属性。

代码实现：逐行剖析关键代码

public class CustomFlowLayout extends ViewGroup {

    private int lineWidth;
    private int lineHeight;
    private int horizontalSpacing;
    private int verticalSpacing;

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 测量子元素尺寸
        measureChildren(widthMeasureSpec, heightMeasureSpec);

        // 计算容器的宽度和高度
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);

        // 计算每行可以容纳的 item 数量
        int lineWidth = 0;
        int lineHeight = 0;
        int itemCount = getChildCount();
        for (int i = 0; i < itemCount; i++) {
            View child = getChildAt(i);
            int childWidth = child.getMeasuredWidth();
            int childHeight = child.getMeasuredHeight();
            if (lineWidth + childWidth + horizontalSpacing > width) {
                lineWidth = 0;
                lineHeight += lineHeight + verticalSpacing;
            }
            lineWidth += childWidth + horizontalSpacing;
            lineHeight = Math.max(lineHeight, childHeight);
        }

        // 设置容器的宽度和高度
        setMeasuredDimension(width, lineHeight + verticalSpacing);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        // 将子元素排列在适当的位置
        int lineWidth = 0;
        int lineHeight = 0;
        int itemCount = getChildCount();
        for (int i = 0; i < itemCount; i++) {
            View child = getChildAt(i);
            int childWidth = child.getMeasuredWidth();
            int childHeight = child.getMeasuredHeight();
            if (lineWidth + childWidth + horizontalSpacing > r) {
                lineWidth = 0;
                lineHeight += lineHeight + verticalSpacing;
            }
            int left = lineWidth;
            int top = lineHeight;
            int right = left + childWidth;
            int bottom = top + childHeight;
            child.layout(left, top, right, bottom);
            lineWidth += childWidth + horizontalSpacing;
            lineHeight = Math.max(lineHeight, childHeight);
        }
    }
}