GridLayout按钮大小不同

时间:2017-10-10 18:43:28

标签: android grid-layout

所以我正在做一个简单的游戏应用程序,它有彩色按钮,里面有答案。一切正常,但我在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>

3 个答案:

答案 0 :(得分:0)

看看你的布局,我没有看到任何问题。我没有你的确切设备,但我无法重现这个问题。

但是,解决问题的一种方法是使用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替换整个布局,并避免所有视图嵌套。但你可以从这开始。

答案 1 :(得分:0)

根据您发布的图像,四个按钮似乎显示一些静态数据。

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

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

 <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体验。

答案 2 :(得分:0)

您正在尝试使用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>

这是它的样子:

enter image description here

如您所见,GridLayout的支持库实现适用于您的布局。不过,我认为你可能会得到很好的服务,看看OP提到的另一种方式。