如何将 GridLayout 拉伸到其父级？

Question

我正在尝试拉伸计算器的键盘（这是一个内部带有按钮的 GridLayout）。它是一个 5*4(列*行).

我给 GridLayout android:layout_height="match_parent" 和 android:layout_width="match_parent" 使其尺寸填充可用 space。然后
我相应地将列和行索引分配给具有 android:layout_column 和 android:layout_row 的单元格。

我得到以下结果：

1080x1920

单元格采用统一的宽度和高度，但没有拉伸到足以填满整个网格。所以我在网上搜索并看到我可以为每个单元格分配相同的权重，并且布局计算出一个均匀的宽度和高度值来填充整个网格。

（附带问题：在这种情况下，android 如何确定这些单元格的大小？为什么它没有使它们 larger/smaller 比这里的大小？）

所以我补充：

android:layout_weight="1" 和 android:layout_height="1" 到每个按钮

我得到这个结果：

1080x1920

太棒了。看起来它正在按预期工作..直到我将分辨率更改为其他内容：

480x800

或者如果我保持相同的 1080x1920 分辨率但将顶部的最小高度强制设置为 280dp（279dp 可以正常工作）

我该如何解决这个问题？我打算 API 级别 21，无论如何我都想强制 GridLayout 填充可用的 space。我更喜欢挤压按钮（甚至将其内容剪裁/不可见），而不是从屏幕上弹出。到此结束的是 XML:

main.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/root">
<!--Top section (screen + few keys)-->
    <LinearLayout
        android:style="@style/CalculatorScreenStyle"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/top">
        <Space
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="280dp"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="40sp"
            android:hint="Enter a number here"/>
    </LinearLayout>
<!-- Keyboard layout -->
    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/keyboard"
        android:columnCount="4"
        android:rowCount="5">
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:text="C"
            android:id="@+id/clearButton"
            android:layout_column="0"
            android:layout_row="0" />
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:text="Button"
            android:id="@+id/button15"
            android:layout_column="1"
            android:layout_row="0" />
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:text="%"
            android:layout_column="2"
            android:layout_row="0"
            android:id="@+id/percentButton" />
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:id="@+id/divideButton"
            android:layout_column="3"
            android:layout_row="0"
            android:text="÷" />
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:text="7"
            android:layout_column="0"
            android:layout_row="1"
            android:id="@+id/sevenNumButton" />
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:text="8"
            android:layout_column="1"
            android:layout_row="1"
            android:id="@+id/eightNumButton" />
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:text="9"
            android:layout_column="2"
            android:layout_row="1"
            android:id="@+id/nineNumButton" />
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:text="+"
            android:layout_column="3"
            android:layout_row="1"
            android:id="@+id/plusButton" />
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:text="4"
            android:layout_column="0"
            android:layout_row="2"
            android:id="@+id/fourNumButton" />
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:text="5"
            android:layout_column="1"
            android:layout_row="2"
            android:id="@+id/fiveNumButton" />
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:text="6"
            android:layout_column="2"
            android:layout_row="2"
            android:id="@+id/sixNumButton" />
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:text="x"
            android:layout_column="3"
            android:layout_row="2"
            android:id="@+id/multiplyButton" />
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:text="1"
            android:layout_column="0"
            android:layout_row="3"
            android:id="@+id/oneNumButton" />
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:text="2"
            android:layout_column="1"
            android:layout_row="3"
            android:id="@+id/twoNumButton" />
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:text="3"
            android:layout_column="2"
            android:layout_row="3"
            android:id="@+id/threeNumButton" />
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:text="-"
            android:layout_column="3"
            android:layout_row="3"
            android:id="@+id/minusButton" />
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:text="+/-"
            android:layout_column="0"
            android:layout_row="4"
            android:id="@+id/signButton" />
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:text="0"
            android:layout_column="1"
            android:layout_row="4"
            android:id="@+id/zeroNumButton" />
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:text="."
            android:layout_column="2"
            android:layout_row="4"
            android:id="@+id/periodButton" />
        <Button
            android:style="@style/CalculatorButtonStyle"
            android:text="="
            android:layout_column="3"
            android:layout_row="4"
            android:id="@+id/equalsButton" />
    </GridLayout>
</LinearLayout>

styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="CalculatorButtonStyle" >
    <item name="android:textSize">22sp</item>
    <item name="android:layout_columnWeight">1</item>
    <item name="android:layout_rowWeight">1</item>
    <item name="android:background">#9E5EC2</item>
  </style>
  <style name="CalculatorScreenStyle">
    <item name="android:background">#ED59E8</item>
  </style>
</resources>

编辑：作为临时解决方案，我使用垂直 LinearLayout 水平 LinearLayouts 并且我为所有 Buttons 赋予相同的权重。它工作正常，但我想知道如果我必须自己模拟它的工作方式，GridLayout 有什么用..

Answer 1

当android API level < 21时，效果不佳。

所以我们可以在应用gradle文件中添加依赖：

implementation 'androidx.gridlayout:gridlayout:1.0.0'

如果您仍未迁移到 androidx（您应该迁移），则使用：

implementation 'com.android.support:gridlayout-v7:28.0.0'

然后更改您的代码。

在您的 XML 代码中使用 androidx.gridlayout.widget.GridLayout（或 android.support.v7.widget.GridLayout，如果不是 androidx）。

<androidx.gridlayout.widget.GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/keyboard"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:columnCount="4"
    app:rowCount="5">

    <Button
        android:id="@+id/clearButton"
        style="@style/CalculatorButtonStyle"
        android:text="C"
        app:layout_column="0"
        app:layout_columnWeight="1"
        app:layout_row="0"
        app:layout_rowWeight="1"/>

    <Button
        android:id="@+id/button15"
        style="@style/CalculatorButtonStyle"
        android:text="Button"
        app:layout_column="1"
        app:layout_columnWeight="1"
        app:layout_row="0"
        app:layout_rowWeight="1"/>

    <Button
        android:id="@+id/percentButton"
        style="@style/CalculatorButtonStyle"
        android:text="%"
        app:layout_column="2"
        app:layout_columnWeight="1"
        app:layout_row="0"
        app:layout_rowWeight="1"/>

    <Button
        android:id="@+id/divideButton"
        style="@style/CalculatorButtonStyle"
        android:text="÷"
        app:layout_column="3"
        app:layout_columnWeight="1"
        app:layout_row="0"
        app:layout_rowWeight="1"/>

    <Button
        android:id="@+id/sevenNumButton"
        style="@style/CalculatorButtonStyle"
        android:text="7"
        app:layout_column="0"
        app:layout_columnWeight="1"
        app:layout_row="1"
        app:layout_rowWeight="1"/>

    <Button
        android:id="@+id/eightNumButton"
        style="@style/CalculatorButtonStyle"
        android:text="8"
        app:layout_column="1"
        app:layout_columnWeight="1"
        app:layout_row="1"
        app:layout_rowWeight="1"/>

    <Button
        android:id="@+id/nineNumButton"
        style="@style/CalculatorButtonStyle"
        android:text="9"
        app:layout_column="2"
        app:layout_columnWeight="1"
        app:layout_row="1"
        app:layout_rowWeight="1"/>

    <Button
        android:id="@+id/plusButton"
        style="@style/CalculatorButtonStyle"
        android:text="+"
        app:layout_column="3"
        app:layout_columnWeight="1"
        app:layout_row="1"
        app:layout_rowWeight="1"/>

    <Button
        android:id="@+id/fourNumButton"
        style="@style/CalculatorButtonStyle"
        android:text="4"
        app:layout_column="0"
        app:layout_columnWeight="1"
        app:layout_row="2"
        app:layout_rowWeight="1"/>

    <Button
        android:id="@+id/fiveNumButton"
        style="@style/CalculatorButtonStyle"
        android:text="5"
        app:layout_column="1"
        app:layout_columnWeight="1"
        app:layout_row="2"
        app:layout_rowWeight="1"/>

    <Button
        android:id="@+id/sixNumButton"
        style="@style/CalculatorButtonStyle"
        android:text="6"
        app:layout_column="2"
        app:layout_columnWeight="1"
        app:layout_row="2"
        app:layout_rowWeight="1"/>

    <Button
        android:id="@+id/multiplyButton"
        style="@style/CalculatorButtonStyle"
        android:text="x"
        app:layout_column="3"
        app:layout_columnWeight="1"
        app:layout_row="2"
        app:layout_rowWeight="1"/>

    <Button
        android:id="@+id/oneNumButton"
        style="@style/CalculatorButtonStyle"
        android:text="1"
        app:layout_column="0"
        app:layout_columnWeight="1"
        app:layout_row="3"
        app:layout_rowWeight="1"/>

    <Button
        android:id="@+id/twoNumButton"
        style="@style/CalculatorButtonStyle"
        android:text="2"
        app:layout_column="1"
        app:layout_columnWeight="1"
        app:layout_row="3"
        app:layout_rowWeight="1"/>

    <Button
        android:id="@+id/threeNumButton"
        style="@style/CalculatorButtonStyle"
        android:text="3"
        app:layout_column="2"
        app:layout_columnWeight="1"
        app:layout_row="3"
        app:layout_rowWeight="1"/>

    <Button
        android:id="@+id/minusButton"
        style="@style/CalculatorButtonStyle"
        android:text="-"
        app:layout_column="3"
        app:layout_columnWeight="1"
        app:layout_row="3"
        app:layout_rowWeight="1"/>

    <Button
        android:id="@+id/signButton"
        style="@style/CalculatorButtonStyle"
        android:text="+/-"
        app:layout_column="0"
        app:layout_columnWeight="1"
        app:layout_row="4"
        app:layout_rowWeight="1"/>

    <Button
        android:id="@+id/zeroNumButton"
        style="@style/CalculatorButtonStyle"
        android:text="0"
        app:layout_column="1"
        app:layout_columnWeight="1"
        app:layout_row="4"
        app:layout_rowWeight="1"/>

    <Button
        android:id="@+id/periodButton"
        style="@style/CalculatorButtonStyle"
        android:text="."
        app:layout_column="2"
        app:layout_columnWeight="1"
        app:layout_row="4"
        app:layout_rowWeight="1"/>

    <Button
        android:id="@+id/equalsButton"
        style="@style/CalculatorButtonStyle"
        android:text="="
        app:layout_column="3"
        app:layout_columnWeight="1"
        app:layout_row="4"
        app:layout_rowWeight="1"/>
</androidx.gridlayout.v7.widget.GridLayout>

备注

新属性是：

应用程序：layout_columnWeight
应用程序：layout_rowWeight
应用程序：layout_rowSpan
应用程序：layout_columnSpan

如何将 GridLayout 拉伸到其父级？

How do I stretch a GridLayout to its parent?

android

android-gridlayout

main.axml

styles.xml