GridLayout 按钮大小不同

Question

所以我正在做一个简单的游戏应用程序，其中包含带有答案的彩色按钮。一切正常，但我对 GridLayout 中的按钮大小有一些问题。我尝试在其他帖子中搜索答案，但无法使按钮大小均匀。它在模拟器上看起来不错，但在我的设备上却不行（API 21）。是的，我尝试将按钮宽度更改为“wrap_content”。

真实设备： https://i.stack.imgur.com/mtC25.jpg

模拟器： https://i.stack.imgur.com/sXTAG.png

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible"
tools:context="com.example.adam.braintrainer.MainActivity">

<Button
    android:id="@+id/goButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="false"
    android:layout_alignParentStart="false"
    android:layout_alignParentTop="false"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="@android:color/holo_blue_dark"
    android:onClick="goButton"
    android:padding="30dp"
    android:text="START!"
    android:textSize="36sp"
    android:visibility="visible"
    tools:gravity="center_vertical|center_horizontal|center" />

<RelativeLayout
    android:id="@+id/allStuff"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:visibility="invisible">


    <TextView
        android:id="@+id/answer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:text="Correct"
        android:textSize="20sp"
        android:visibility="invisible" />

    <Button
        android:id="@+id/again"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="65dp"
        android:onClick="playAgain"
        android:padding="10dp"
        android:text="PLAY AGAIN"
        android:visibility="invisible" />

    <TextView
        android:id="@+id/timer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_margin="15dp"
        android:background="@android:color/holo_orange_light"
        android:padding="15dp"
        android:text="30s"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/score"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_margin="15dp"
        android:background="@color/colorAccent"
        android:padding="15dp"
        android:text="0/0"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/suma"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/timer"
        android:layout_alignBottom="@+id/timer"
        android:layout_centerHorizontal="true"
        android:text="10+13"
        android:textSize="30dp" />

    <GridLayout
        android:id="@+id/gridLayout"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_alignBottom="@+id/again"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:columnCount="2"
        android:rowCount="2">


        <Button
            android:id="@+id/button4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_rowWeight="1"
            android:background="@color/colorPrimary"
            android:onClick="pressed"
            android:tag="0"
            android:text="Button"
            android:textSize="20sp" />

        <Button
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_rowWeight="1"
            android:background="@android:color/holo_blue_dark"
            android:onClick="pressed"
            android:tag="1"
            android:text="Button"
            android:textSize="20sp" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_rowWeight="1"
            android:background="@android:color/holo_green_light"
            android:onClick="pressed"
            android:tag="2"
            android:text="Button"
            android:textSize="20sp" />

        <Button
            android:id="@+id/button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_rowWeight="1"
            android:background="@android:color/holo_red_light"
            android:onClick="pressed"
            android:tag="3"
            android:text="Button"
            android:textSize="20sp" />
    </GridLayout>

</RelativeLayout>

Answer 1

查看您的布局，我没有发现任何问题。我没有您的确切设备，但无法重现该问题。

但是，解决此问题的一种方法是使用 ConstraintLayout 而不是 GridLayout。这还有一个额外的好处，即允许您在没有 weight（GridLayout 仅在 API 21+ 上支持）的情况下获得大小均匀的按钮。

这是一个ConstraintLayout，它的作用与您的网格相同：

    <android.support.constraint.ConstraintLayout
        android:id="@+id/gridLayout"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignBottom="@+id/again">

        <Button
            android:id="@+id/button4"
            android:tag="0"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:textSize="20sp"
            android:text="Button"
            android:background="@color/colorPrimary"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/button3"
            app:layout_constraintBottom_toTopOf="@+id/button2"/>

        <Button
            android:id="@+id/button3"
            android:tag="1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:textSize="20sp"
            android:text="Button"
            android:background="@android:color/holo_blue_dark"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toRightOf="@+id/button4"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/button"/>

        <Button
            android:id="@+id/button2"
            android:tag="2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:textSize="20sp"
            android:text="Button"
            android:background="@android:color/holo_green_light"
            app:layout_constraintTop_toBottomOf="@+id/button4"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/button"
            app:layout_constraintBottom_toBottomOf="parent"/>

        <Button
            android:id="@+id/button"
            android:tag="3"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:textSize="20sp"
            android:text="Button"
            android:background="@android:color/holo_red_light"
            app:layout_constraintTop_toBottomOf="@+id/button3"
            app:layout_constraintLeft_toRightOf="@+id/button2"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>

    </android.support.constraint.ConstraintLayout>

如果您想真正深入了解它，您可以将整个布局替换为单个顶级ConstraintLayout，并避免所有视图嵌套。但是你可以从这个开始。

Answer 2

从您发布的图片来看，四个按钮似乎显示了一些静态数据。

删除视图中不必要的属性。

您可以简单地使用表格布局来显示按钮并在布局中拉伸按钮。 下面是修改后的按钮代码：

 <TableLayout
        android:id="@+id/gridLayout"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_alignBottom="@+id/again"
        android:columnCount="2"
        android:rowCount="2"
        android:stretchColumns="*"
        >

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

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@color/colorPrimary"
            android:onClick="pressed"
            android:tag="0"
            android:text="Button"
            android:textSize="20sp" />

        <Button
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_blue_dark"
            android:onClick="pressed"
            android:tag="1"
            android:text="Button"
            android:textSize="20sp" />
        </TableRow>

        <TableRow

            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">
        <Button
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_green_light"
            android:onClick="pressed"
            android:tag="2"
            android:text="Button"
            android:textSize="20sp" />

        <Button
            android:id="@+id/button"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
             android:background="@android:color/holo_red_light"
           android:onClick="pressed"
            android:tag="3"
            android:text="Button"
            android:textSize="20sp" />
        </TableRow>
    </TableLayout>

并且也不要硬编码高度，以便在不同手机上启动时获得更好的 UI 体验。

Answer 3

您正在尝试使用 API 21 中引入的 GridLayout 权重，但它们似乎不适用于您的 API 21 设备或我的 API 21 模拟器。它们确实适用于我的 API 24 设备和模拟器。

支持库似乎对GridLayout 有更好的实现——至少有一个按预期使用权重，但您必须对代码进行一些细微的更改。这是我想出的：

首先，将GridLayout 的支持库添加到您的 gradle 文件中：

    compile 'com.android.support:gridlayout-v7:25.4.0'

根据其他要求，您可能需要不同的版本。

这是我从您的文件中简化的工作 XML 文件。你会注意到 v7 支持GridLayout:

<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/gridLayout"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    app:columnCount="2"
    app:rowCount="2">

    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:tag="0"
        android:text="Button"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_gravity="fill"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_blue_dark"
        android:tag="1"
        android:text="Button"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_gravity="fill"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_green_light"
        android:tag="2"
        android:text="Button"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_gravity="fill"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_red_light"
        android:tag="3"
        android:text="Button"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_gravity="fill"
        app:layout_rowWeight="1" />
</android.support.v7.widget.GridLayout>

这是它的样子：

如您所见，GridLayout 的支持库实现适用于您的布局。但是，我认为您可能会得到很好的服务，就像 OP 提到的那样，通过寻找一种不同的方式来做到这一点。