Android原生组件GridLayout单元格尺寸异常问题排查

你的问题核心是React Native逐个添加子View时，Android原生GridLayout没有在所有子View加载完成后重新计算自身尺寸，导致初始布局只适配了第一个子View的大小，后续子View超出边界。结合你“列宽自适应内容”的需求，可通过以下步骤修复：

1. 修正子View的布局参数 #

默认的GridLayout.LayoutParams未明确设置宽高，导致子View尺寸计算逻辑异常。需给每个子View指定WRAP_CONTENT的宽高，同时保留行列位置配置。

2. 强制GridLayout重新布局 #

每次添加子View后主动触发requestLayout()，让GridLayout重新计算自身尺寸，适配新添加的子View。

3. 重写onMeasure方法，确保整体尺寸计算正确 #

GridLayout默认测量逻辑无法适配RN分批添加子View的流程，手动重写测量方法，遍历所有子View计算列宽和行高，最终确定GridLayout的整体尺寸。

修改后的TableView.java代码 #

package com.mackenziehnc.table;

import android.content.Context;
import android.view.View;
import android.widget.GridLayout;
import android.view.ViewGroup.LayoutParams;

public class TableView extends GridLayout {

  public TableView(Context context) {
    super(context);
    this.setColumnCount(2);
  }

  @Override
  public void addView(View child, int index) {
    GridLayout.LayoutParams params = new GridLayout.LayoutParams();
    params.rowSpec = GridLayout.spec(index / getColumnCount());
    params.columnSpec = GridLayout.spec(index % getColumnCount());
    // 明确设置宽高为WRAP_CONTENT
    params.width = LayoutParams.WRAP_CONTENT;
    params.height = LayoutParams.WRAP_CONTENT;
    child.setLayoutParams(params);
    super.addView(child, index);
    // 添加后触发重新布局
    requestLayout();
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int columnCount = getColumnCount();
    int childCount = getChildCount();
    if (childCount == 0) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        return;
    }

    // 计算每列的最大宽度、每行的最大高度
    int[] columnMaxWidths = new int[columnCount];
    int[] rowMaxHeights = new int[(childCount + columnCount - 1) / columnCount];

    for (int i = 0; i < childCount; i++) {
        View child = getChildAt(i);
        // 测量子View的尺寸
        measureChild(child, widthMeasureSpec, heightMeasureSpec);
        int colIndex = i % columnCount;
        int rowIndex = i / columnCount;
        columnMaxWidths[colIndex] = Math.max(columnMaxWidths[colIndex], child.getMeasuredWidth());
        rowMaxHeights[rowIndex] = Math.max(rowMaxHeights[rowIndex], child.getMeasuredHeight());
    }

    // 计算整体宽高（包含padding）
    int totalWidth = getPaddingLeft() + getPaddingRight();
    for (int width : columnMaxWidths) {
        totalWidth += width;
    }

    int totalHeight = getPaddingTop() + getPaddingBottom();
    for (int height : rowMaxHeights) {
        totalHeight += height;
    }

    // 处理父View的尺寸约束
    int finalWidth = resolveSize(totalWidth, widthMeasureSpec);
    int finalHeight = resolveSize(totalHeight, heightMeasureSpec);

    setMeasuredDimension(finalWidth, finalHeight);
  }
}

效果说明 #

• 每列宽度会自动适配该列最宽的子View内容，行高同理适配每行最高的子View，完全满足“列自适应内容”的需求。
• 无需设置weight，避免了强制拉伸导致的尺寸过大问题。

内容的提问来源于stack exchange，提问作者MacKenzie