Code
2024-11-10 06:00:00

GridLayout(不是GridView)如何均匀地拉伸所有子元素

我想有一个2x2网格内的按钮。这只是ICS，所以我试图使用新的GridLayout给定。

这是我的布局的XML:

 <?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/favorites_grid"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00ff00"
    android:rowCount="2"
    android:columnCount="2">
  <Button
      android:text="Cell 0"
      android:layout_row="0"
      android:layout_column="0"
      android:textSize="14dip" />
  <Button
      android:text="Cell 1"
      android:layout_row="0"
      android:layout_column="1"
      android:textSize="14dip" />

  <Button
      android:text="Cell 2"
      android:layout_row="1"
      android:layout_column="0"
      android:textSize="14dip" />
  <Button
      android:text="Cell 3"
      android:layout_row="1"
      android:layout_column="1"
      android:textSize="14dip" />
</GridLayout>

问题是我的视图没有为每一行均匀地拉伸。这导致GridLayout的右侧有很多额外的空间。

我尝试设置layout_gravity="fill_horizontal"，但这只适用于该行的最后一个视图。这意味着单元格1会一直延伸，为单元格0提供足够的空间。

如何解决这个问题?

当前回答

我只是在网格视图中做了简单的网格布局，并在想为什么我以前没有这样做。它很容易实现。(我在示例中使用自定义包装器CSView，但只是将其更改为View)。Ops要求只适用于GridView，所以我把它贴在这里作为答案。为了使拉伸均匀，以numColumns:auto_fit android:numColumns=2为例。

用法:

CSGridLayout(this, R.id.sound_store_grid, SubscriptionUpgradeStoreDialogItem(this),
            PresetUpgradeStoreDialogItem(this), MidiUpgradeStoreDialogItem(this))

实现:

class CSGridLayout(parent: CSActivityView<*>,
                   viewId: Int,
                   vararg items: CSView<*>) : CSView<GridView>(parent, viewId) {

    private val items = list(items)
    private var adapter = Adapter()

    init {
        view.adapter = adapter
        adapter.notifyDataSetChanged()
    }

    inner class Adapter : BaseAdapter() {
        override fun getCount() = items.size
        override fun getViewTypeCount() = 1
        override fun isEnabled(position: Int) = true
        override fun getItem(position: Int) = items[position]
        override fun getItemViewType(position: Int) = 0
        override fun getItemId(position: Int) = position.toLong()
        override fun getView(position: Int, toReuseView: View?, parent: ViewGroup) =
            items[position].view
    }
}
2021-12-01 17:00:19

其他回答

关于网格布局的一些技巧。

Default Grid layout works best on min SDK 21+ . GridLayout's height/width should be either fixed or match_parent .It is because Grid layout calculates the height/width of its child, and having the variable height of its own could cause issues in calculation of the exact height. Grid layout ignores the margins on children by default, so we should be using android:useDefaultMargins="true" if we want children to control their margins. To make a dynamic, auto-stretching group of views with Grid layout, either: the parent would be controlling both: the max height of the total group and number of elements in each row or the parent would be controlling the number of columns in each row,and the children will be controlling the total height.

第一个场景的优点是我们可以在组中添加任意数量的孩子，他们都将很好地均匀伸展。缺点是我们得到的是一个固定规模的群体。而内容较大的儿童也占据了固定的空间。

第二个场景的优点是我们可以添加更多的子节点，由子节点决定组的高度。在父元素的顶部附加一个嵌套的滚动视图将使整个元素列表可滚动。 缺点是，儿童控制组的高度和变量高度，可能会导致整个视图看起来混乱。

如果我们稍微调整一下，这两种情况都可以发挥它们的优点，它们的缺点可以被最小化。

第一个场景的例子:

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="2"
        android:useDefaultMargins="true">

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnSpan="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_marginHorizontal="8dp"
            android:layout_marginVertical="8dp"
            android:background="@color/black" />

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnSpan="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"

            android:layout_marginHorizontal="8dp"
            android:layout_marginVertical="8dp"
            android:background="@color/black" />

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnSpan="2"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"

            android:layout_marginHorizontal="8dp"
            android:layout_marginVertical="8dp"
            android:background="@color/black" />

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnSpan="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_marginHorizontal="8dp"
            android:layout_marginVertical="8dp"
            android:background="@color/black" />

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnSpan="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"

            android:layout_marginHorizontal="8dp"
            android:layout_marginVertical="8dp"
            android:background="@color/black" />

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnSpan="2"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"

            android:layout_marginHorizontal="8dp"
            android:layout_marginVertical="8dp"
            android:background="@color/black" />

     
        <!--        
        add more elements here with same attributes and they will fit on their own!
        -->

    </GridLayout>

输出:

第二个场景:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="HardcodedText"
    >

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="2"
        android:orientation="horizontal"
        android:useDefaultMargins="true"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_columnSpan="1"
            android:text="this is a text"
            android:textColor="@color/white"
            android:layout_gravity="center"
            android:layout_margin="8dp"
            android:background="@color/black"
            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnSpan="1"
            android:layout_gravity="fill_horizontal"
            android:text="this is something cool. this should be taking more space but it is also controlling the total height of row"
            android:textColor="@color/white"
            android:gravity="center"
            android:layout_margin="8dp"
            android:background="@color/black"
            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnSpan="1"
            android:layout_gravity="fill_horizontal"
            android:text="once the width is determined by any child, the whole column shall take the same height"
            android:textColor="@color/white"
            android:gravity="center"
            android:layout_margin="8dp"
            android:background="@color/black"
            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnSpan="1"
            android:layout_gravity="fill"
            android:text="this column can only control how they shall look by layout gravity. this should look like column 0,0 but its  taking full row height/width"
            android:textColor="@color/white"
            android:gravity="center"
            android:layout_margin="8dp"
            android:background="@color/black"
            />

        <!--

        -->



    </GridLayout>

</FrameLayout>

outpus:

2021-08-22 12:51:53

更新:API 21支持权重。详见保罗的回答。

使用GridLayout时有一些限制，下面的引用摘自文档。

GridLayout不支持权重原则，因为 以权重定义。一般来说，因此不可能 配置GridLayout将多余的空间分布在非平凡中 多行或多列之间的比例…为了完全控制 超过多余的空间分布在行或列;使用线性布局 子视图来保存关联单元格组中的组件。

下面是一个使用LinearLayout子视图的小例子。(我使用空间视图占用未使用的区域，并将按钮推到所需的位置。)

<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="1"
>
    <TextView
        android:text="2x2 button grid"
        android:textSize="32dip"
        android:layout_gravity="center_horizontal" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" android:orientation="horizontal">
        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 1" />
        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:text="Button 2" />
        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
    >
        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 3" />
        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:text="Button 4" />
        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>
</GridLayout>
2012-04-05 17:54:43

这是一个相当老的问题，但显然很多人都感兴趣。对于像这样的4个按钮的简单布局，似乎tableelayout是实现预期结果的最简单方法。

下面的一些示例代码显示了一个表的前两行，该表有6列，横跨其父字段的宽度。每个单元格中的LinearLayout和ImageView用于允许在单元格中“打开和关闭”图像，同时保持单元格的颜色。

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="1,2,3,4,5,6"
    android:background="@drawable/vertical_radio_button_background"
    android:padding="2dp">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/brown"
            android:tag="13"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:layout_margin="1dp"
            android:layout_column="1"
            android:background="@color/brown">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:src="@drawable/selected_check"
                android:visibility="invisible"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/maraschino"
            android:tag="9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:layout_margin="1dp"
            android:layout_column="2"
            android:background="@color/maraschino">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:src="@drawable/selected_check"
                android:visibility="invisible"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/cayenne"
            android:tag="22"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:layout_margin="1dp"
            android:layout_column="3"
            android:background="@color/cayenne">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:src="@drawable/selected_check"
                android:visibility="invisible"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/maroon"
            android:tag="18"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:layout_margin="1dp"
            android:layout_column="4"
            android:background="@color/maroon">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:src="@drawable/selected_check"
                android:visibility="invisible"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/plum"
            android:tag="3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:layout_margin="1dp"
            android:layout_column="5"
            android:background="@color/plum">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:src="@drawable/selected_check"
                android:visibility="invisible"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/eggplant"
            android:tag="15"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:layout_margin="1dp"
            android:layout_column="6"
            android:background="@color/eggplant">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:src="@drawable/selected_check"
                android:visibility="invisible"/>
        </LinearLayout>
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/plum2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:layout_margin="1dp"
            android:layout_column="1"
            android:background="@color/plum">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:src="@drawable/selected_check"
                android:visibility="invisible"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/lavender"
            android:tag="14"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:layout_margin="1dp"
            android:layout_column="2"
            android:background="@color/lavender">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:src="@drawable/selected_check"
                android:visibility="invisible"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/carnation"
            android:tag="16"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:layout_margin="1dp"
            android:layout_column="3"
            android:background="@color/carnation">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:src="@drawable/selected_check"
                android:visibility="invisible"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/light_pink"
            android:tag="23"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:layout_margin="1dp"
            android:layout_column="4"
            android:background="@color/light_pink">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:src="@drawable/selected_check"
                android:visibility="invisible"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/strawberry"
            android:tag="10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:layout_margin="1dp"
            android:layout_column="5"
            android:background="@color/strawberry">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:src="@drawable/selected_check"
                android:visibility="invisible"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/magenta"
            android:tag="20"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:layout_margin="1dp"
            android:layout_column="6"
            android:background="@color/magenta">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:src="@drawable/selected_check"
                android:visibility="invisible"/>
        </LinearLayout>
    </TableRow>
</TableLayout>
2014-12-08 18:24:45

你可以动态设置每个子节点的宽度:

GridLayout.LayoutParams params = (GridLayout.LayoutParams) child.getLayoutParams();
    params.width = (parent.getWidth()/parent.getColumnCount()) -params.rightMargin - params.leftMargin;
    child.setLayoutParams(params);
2012-06-26 15:07:08

尝试将以下内容添加到GridLayout规范中。这应该可以工作。

android:useDefaultMargins="true"
2012-06-28 12:31:13

推荐文章

aliyun

最新文章

标签

2025 code 京ICP备15047053号-1