java - GridLayout 呈现方式与预览方式不同

Question

在我的计算器应用程序中，我使用 GridLayout 来布置所有按钮。在 Android Studio 预览中它看起来像这样:

然而，当我在 Nexus 5x 模拟器上运行我的应用程序时，它看起来像这样:

这是我的布局文件的代码

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="net.abc.deskcalculator.MainActivity"

    android:layout_margin="8dp"
    android:id="@+id/grid"
    android:columnCount="7"
    android:layout_gravity="fill_horizontal">

    <TextView
        android:id="@+id/mode"
        android:layout_columnSpan="7"
        android:layout_column="0"
        android:layout_row="0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="RAD"/>

    <TextView
        android:id="@+id/window"
        android:layout_width="match_parent"
        android:layout_column="0"
        android:layout_columnSpan="7"
        android:layout_rowSpan="2"
        android:layout_row="1"
        android:text=""
        android:minLines="2"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:fontFamily="serif-monospace"
        android:background="@drawable/window_border"/>

    <Button
        style="@style/calcBtnApperance"
        android:id="@+id/bkspc"
        android:text="@string/bkspc"/>
    <Button
        style="@style/calcBtnApperance"
        android:id="@+id/clr"
        android:text="@string/clr"/>
    <Button
        style="@style/calcBtnApperance"
        android:text="@string/switchDegRadGrad"/>
    <Button
        style="@style/calcBtnApperance"
        android:id="@+id/lparen"
        android:text="@string/lparen"/>
    <Button
        style="@style/calcBtnApperance"
        android:id="@+id/rparen"
        android:text="@string/rparen"/>
    <Button
        style="@style/calcBtnApperance"
        android:text="floor"/>
    <Button
        style="@style/calcBtnApperance"
        android:text="ceil"/>
    <Button
        style="@style/calcBtnApperance"
        android:text="√"/>
    <Button
        style="@style/calcBtnApperance"
        android:text="log"/>
    <Button
        style="@style/calcBtnApperance"
        android:text="ln"/>
    <Button
        style="@style/calcBtnApperance"
        android:id="@+id/dig7"/>
    <Button
        style="@style/calcBtnApperance"
        android:id="@+id/dig8"/>
    <Button
        style="@style/calcBtnApperance"
        android:id="@+id/dig9"/>
    <Button
        style="@style/calcBtnApperance"
        android:id="@+id/opDiv"
        android:text="@string/opDiv"
        />
    <Button
        style="@style/calcBtnApperance"
        android:text="x²"/>
    <Button
        style="@style/calcBtnApperance"
        android:text="EE"/>
    <Button
        style="@style/calcBtnApperance"
        android:text="exp"/>
    <Button
        style="@style/calcBtnApperance"
        android:id="@+id/dig4"/>
    <Button
        style="@style/calcBtnApperance"
        android:id="@+id/dig5"/>
    <Button
        style="@style/calcBtnApperance"
        android:id="@+id/dig6"/>
    <Button
        style="@style/calcBtnApperance"
        android:id="@+id/opMul"
        android:text="@string/opMul"
        />
    <Button
        style="@style/calcBtnApperance"
        android:text="π"/>
    <Button
        style="@style/calcBtnApperance"
        android:text="a^b"/>
    <Button
        style="@style/calcBtnApperance"
        android:text="cbrt"/>
    <Button
        style="@style/calcBtnApperance"
        android:id="@+id/dig1"/>
    <Button
        style="@style/calcBtnApperance"

        android:id="@+id/dig2"/>
    <Button
        style="@style/calcBtnApperance"

        android:id="@+id/dig3"/>
    <Button
        style="@style/calcBtnApperance"

        android:id="@+id/opSub"
        android:text="@string/opSub"
        />
    <Button
        style="@style/calcBtnApperance"

        android:text="sin"/>
    <Button
        style="@style/calcBtnApperance"

        android:text="cos"/>
    <Button
        style="@style/calcBtnApperance"

        android:text="tan"/>
    <Button
        style="@style/calcBtnApperance"

        android:text="@string/decpt"/>
    <Button
        style="@style/calcBtnApperance"

        android:id="@+id/dig0"/>
    <Button
        style="@style/calcBtnApperance"
        android:id="@+id/neg"
        android:text="@string/neg"/>
    <Button
        style="@style/calcBtnApperance"

        android:text="@string/opAdd"
        android:id="@+id/opAdd"/>
    <Button
        style="@style/calcBtnApperance"

        android:text="asin"/>
    <Button
        style="@style/calcBtnApperance"

        android:text="acos"/>
    <Button
        style="@style/calcBtnApperance"

        android:text="atan"/>
    <Button
        style="@style/calcBtnApperance"

        android:id="@+id/varAns"
        android:text="@string/varAns"/>
    <Button
        style="@style/calcBtnApperance"

        android:text="@string/equals"
        android:layout_columnSpan="3"
        android:layout_gravity="fill_horizontal"
        android:id="@+id/equals"/>
</GridLayout>

样式.XML

<style name="calcBtnApperance">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">#fd3d3d3d</item>
    <item name="android:textStyle">normal</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:minWidth">49dp</item>
    <item name="android:layout_gravity">center_horizontal</item>
</style>

(我知道这段代码是重复的，但为了以防万一，我发布了完整的代码。)

如何让最后一列之前没有那么大的差距？

此外，如何在每次添加新列时使表格的每个单元格变窄，而不必在每次添加新列时都调整 android:minWidth 属性？如果我没有设置该属性，那么按钮将一直越过屏幕的末尾。

我认为这两个是同一个问题的症状。

我的 Min SDK 是 17

编辑:数字是以编程方式填写的，这就是为什么您在 Android Studio 预览中看不到它们的原因。

Answer 1

改变你的 GridLayout 属性。

android:layout_width="wrap_content"
android:layout_height="wrap_content"

并将你的 GridLayout 放入 LinearView 并添加 gravity 和 orientation 属性

android:orientation="vertical"
android:gravity="center_horizontal"

但是，我认为这种设计如果在较小的设备上进行测试，一些按钮会超出屏幕