GridLayout 和行/列跨度问题答案

【问题标题】：GridLayout and Row/Column Span WoeGridLayout 和行/列跨度问题
【发布时间】：2012-08-08 11:14:55
【问题描述】：

Android Developers Blog post introducing GridLayout 显示了 span 如何影响自动索引分配的图表：

我正在尝试使用GridLayout 来实际实现它。这是我目前所拥有的：

<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.commonsware.android.gridlayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    app:orientation="horizontal"
    app:columnCount="8">

    <Button
        app:layout_columnSpan="2"
        app:layout_rowSpan="2"
        android:layout_gravity="fill_horizontal"
        android:text="@string/string_1"/>

  <Button
    app:layout_columnSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="@string/string_2"/>

  <Button
    app:layout_rowSpan="4"
    android:text="@string/string_3"/>

  <Button
    app:layout_columnSpan="3"
    app:layout_rowSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="@string/string_4"/>

  <Button
    app:layout_columnSpan="3"
    android:layout_gravity="fill_horizontal"
    android:text="@string/string_5"/>

  <Button
    app:layout_columnSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="@string/string_6"/>

  <android.support.v7.widget.Space
    app:layout_column="0"
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

  <android.support.v7.widget.Space
    android:layout_width="36dp"
    />

</android.support.v7.widget.GridLayout>

我必须引入<Space> 元素以确保每列都有最小宽度，否则我会得到一堆零宽度的列。

但是，即使有他们，我也明白：

值得注意的是：

尽管有android:layout_gravity="fill_horizontal"，但我的具有列跨度的小部件不会填充跨度列
尽管有 android:layout_rowSpan 值，但没有任何内容跨越行

任何人都可以使用GridLayout 复制博客文章中的图表吗？

谢谢！

【问题讨论】：

我猜你也会问问题:)

标签： android android-gridlayout

【解决方案1】：

感觉很老套，但我设法通过添加超出所需的额外列和行来获得正确的外观。然后我在每一行中用空格填充额外的列，定义一个高度，并在每个列中用一个空格填充额外的行，定义一个宽度。为了获得额外的灵活性，我想这些空间大小可以在代码中设置以提供类似于权重的东西。我尝试添加屏幕截图，但我没有必要的声誉。

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnCount="9"
android:orientation="horizontal"
android:rowCount="8" >

<Button
    android:layout_columnSpan="2"
    android:layout_gravity="fill"
    android:layout_rowSpan="2"
    android:text="1" />

<Button
    android:layout_columnSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="2" />

<Button
    android:layout_gravity="fill_vertical"
    android:layout_rowSpan="4"
    android:text="3" />

<Button
    android:layout_columnSpan="3"
    android:layout_gravity="fill"
    android:layout_rowSpan="2"
    android:text="4" />

<Button
    android:layout_columnSpan="3"
    android:layout_gravity="fill_horizontal"
    android:text="5" />

<Button
    android:layout_columnSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="6" />

<Space
    android:layout_width="36dp"
    android:layout_column="0"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="1"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="2"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="3"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="4"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="5"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="6"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="7"
    android:layout_row="7" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="0" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="1" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="2" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="3" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="4" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="5" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="6" />

</GridLayout>

【讨论】：

好吧，恕我直言，这比迄今为止提出的其他解决方案越来越少 hacky —— 至少在这里，硬连线的大小在 Space 元素中。我为未来的读者添加了截图。谢谢！
为什么rowCount 设置为8？我们需要 4 行（最大的 rowSpan 的大小）加上 Space 的额外行，所以应该是 5。我错过了什么？
我刚刚使用了原始问题中图片的行数和列数（它本身来自 Android 开发者博客文章）。然后，我在行数和列数上加了 1，为外部边框空间腾出空间。它应该也适用于 5 行。
我发现这个解决方案只适用于<Gridlayout> 而不是<android.support.v7.widget.GridLayout>
如何动态设置 row_span 和 column span...它会起作用吗？

【解决方案2】：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:columnCount="8"
        android:rowCount="7" >

        <TextView
            android:layout_width="50dip"
            android:layout_height="50dip"
            android:layout_columnSpan="2"
            android:layout_rowSpan="2"
            android:background="#a30000"
            android:gravity="center"
            android:text="1"
            android:textColor="@android:color/white"
            android:textSize="20dip" />

        <TextView
            android:layout_width="50dip"
            android:layout_height="25dip"
            android:layout_columnSpan="2"
            android:layout_rowSpan="1"
            android:background="#0c00a3"
            android:gravity="center"
            android:text="2"
            android:textColor="@android:color/white"
            android:textSize="20dip" />

        <TextView
            android:layout_width="25dip"
            android:layout_height="100dip"
            android:layout_columnSpan="1"
            android:layout_rowSpan="4"
            android:background="#00a313"
            android:gravity="center"
            android:text="3"
            android:textColor="@android:color/white"
            android:textSize="20dip" />

        <TextView
            android:layout_width="75dip"
            android:layout_height="50dip"
            android:layout_columnSpan="3"
            android:layout_rowSpan="2"
            android:background="#a29100"
            android:gravity="center"
            android:text="4"
            android:textColor="@android:color/white"
            android:textSize="20dip" />

        <TextView
            android:layout_width="75dip"
            android:layout_height="25dip"
            android:layout_columnSpan="3"
            android:layout_rowSpan="1"
            android:background="#a500ab"
            android:gravity="center"
            android:text="5"
            android:textColor="@android:color/white"
            android:textSize="20dip" />

        <TextView
            android:layout_width="50dip"
            android:layout_height="25dip"
            android:layout_columnSpan="2"
            android:layout_rowSpan="1"
            android:background="#00a9ab"
            android:gravity="center"
            android:text="6"
            android:textColor="@android:color/white"
            android:textSize="20dip" />
    </GridLayout>

</RelativeLayout>

【讨论】：

谢谢！有趣的是，如果我从 Android Support 包切换到GridLayout，布局会中断，表明两者不完全兼容。另外，我真的希望有一种方法可以做到这一点，它不涉及小部件的硬接线尺寸。我会让这个滚动一下，看看还有什么其他答案（如果有的话），但如果没有更好的答案，我会接受你的。再次感谢！
"如果我从 Android Support 包切换到 GridLayout，布局会中断" -- 实际上，这是我的错，没有将所需的 android: 属性转换为 app: 属性，使用backport 的 XML 命名空间。它确实适用于 backport。
我找到了一种让它们中的一些动态调整大小的方法，但只有在相邻视图已经定义了列或行的全宽时才可以。我认为它们不像权重那样工作并且根据定义的跨度平均分配空间。它并不完美，但它非常适合我当前项目中的需求。
嗯，您的示例更像是 AbsoluteLayout 的方法与用于 RelativeLayout 的方法混合，不是吗？这既不是动态的也不是可移植的。为什么你需要一个 GridLayout 呢？无论如何，GridLayout 是，恕我直言，要么损坏，要么未完成......
@Bondax 这个实现清楚地定义了网格项的高度、宽度、列宽和列跨度。当为网格定义不同的宽度（屏幕宽度）时，网格布局将使您的网格项目在有限的空间内浮动。这是一个项目的要求，这完美地解决了这个问题。

【解决方案3】：

您必须在列上同时设置 layout_gravity 和 layout_columntWeight

<android.support.v7.widget.GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView android:text="سوم شخص"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        />

    <TextView android:text="دوم شخص"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        />

    <TextView android:text="اول شخص"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        />
 </android.support.v7.widget.GridLayout>

【讨论】：

【解决方案4】：

Android Support V7 GridLayout 库通过适应权重原则使多余的空间分配变得容易。要使柱子拉伸，请确保其中的组件定义了重量或重力。要防止柱子拉伸，请确保柱子中的一个组件未定义重量或重力。请记住为此库添加依赖项。在 build.gradle 中添加 com.android.support:gridlayout-v7:25.0.1。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:columnCount="2"
app:rowCount="2">

<TextView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="First"
    app:layout_columnWeight="1"
    app:layout_rowWeight="1" />

<TextView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="Second"
    app:layout_columnWeight="1"
    app:layout_rowWeight="1" />

<TextView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    android:text="Third"
    app:layout_columnWeight="1"
    app:layout_rowWeight="1" />

<TextView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"        
    app:layout_columnWeight="1"
    app:layout_rowWeight="1"
    android:text="fourth"/>

</android.support.v7.widget.GridLayout>

【讨论】：

【解决方案5】：

从 API 21 开始，GridLayout 现在支持类似于 LinearLayout 的权重。详情请看以下链接：

https://stackoverflow.com/a/31089200/1296944

【讨论】：