如何将 GridLayout 拉伸到其父级？

Question

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

1. 我给GridLayoutandroid:layout_height="match_parent"和android:layout_width="match_parent"以使其尺寸填满可用空间。那么
2. 我相应地将列和行索引分配给具有android:layout_column 和android:layout_row 的单元格。

我得到以下结果：

1080x1920

单元格具有统一的宽度和高度，但不会拉伸到足以填满整个网格。所以我在网上搜索，发现我可以为每个单元格分配相同的权重，布局计算出一个统一的宽度和高度值，填充整个网格。

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

所以我补充：

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

我得到这个结果：

1080x1920

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

480x800

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

我该如何解决这个问题？我打算使用 API 级别 21，并且无论如何我都想强制 GridLayout 填充可用空间。我更喜欢按钮被挤压（甚至它们的内容被剪裁/不可见）而不是从屏幕上射出。在这里完成的是 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

所以我们可以在app 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>

注意

新的属性是：

• app:layout_columnWeight
• app:layout_rowWeight
• app:layout_rowSpan
• app:layout_columnSpan