网格布局和行/列跨度灾难

Android 开发者博客文章介绍 GridLayout展示了这个关于跨度如何影响自动索引分配的图表:

automatic index allocation

我正在尝试使用 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>元素来确保每个列都有一个最小宽度，否则，就会有一大堆零宽度的列。

However, even with them, I get this:

sample GridLayout

值得注意的是:

  • 尽管有 android:layout_gravity="fill_horizontal"，但是具有列跨度的小部件并不填充跨列

  • Despite the android:layout_rowSpan values, nothing spans rows

有人能用 GridLayout复制博客文章中的图表吗？

谢谢！

173179 次浏览
小开 
<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>

ScreenShot

小开
最佳答案

这看起来相当古怪，但我设法通过添加超出所需的额外列和行来获得正确的外观。然后，我在每行中用一个定义高度的 Space 填充额外的列，并在每个 coll 中用一个定义宽度的 Space 填充额外的行。为了获得额外的灵活性，我想可以在代码中设置这些 Space 大小，以提供类似于权重的东西。我试图添加一个截图，但我没有必要的声誉。

<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>

screenshot

小开

从 API 21开始，GridLayout 现在支持类似 LinearLayout 的权重:

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

小开

您必须在列上同时设置 layaGravity 和 layacolumntweight

<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>
小开

Android Support V7 GridLayout library makes excess space distribution easy by accommodating the principle of weight. To make a column stretch, make sure the components inside it define a weight or a gravity. To prevent a column from stretching, ensure that one of the components in the column does not define a weight or a gravity. Remember to add dependency for this library. Add Support: gridlay-v7:25.0.1 in build.gradle.

<?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>

提交答案