GridLayout按钮大小不同

问题描述：

所以我正在做一个简单的游戏应用程序，它有五颜六色的按钮，其中的答案。一切工作正常，但我有一些GridLayout按钮的大小问题。我试图在其他帖子中搜索答案，但无法使按钮的大小均匀。它在仿真器上看起来很好，但不在我的设备上（API 21）。是的，我尝试将按钮宽度更改为“wrap_content”。GridLayout按钮大小不同

真实的设备： 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>

尝试阅读[GridLayout]（https://developer.android.com/reference/android/widget/GridLayout.html）上的文档。它看起来像'过量空间分布'部分，它讨论了灵活性和不灵活性，特别是'为了防止柱子拉伸，确保柱子中的一个部件没有定义重量或重力。' – AChez9

答

看你的布局，我看不出有什么问题。我没有确切的设备，但我无法重现此问题。

但是，解决该问题的一种方法是使用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取代你的整个布局，避免所有视图筑巢。但是你可以从这个开始。

也许其他答案也是正确的，但这是我使用的第一个答案，它解决了我的问题。谢谢：） – Adomas

答

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

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

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

<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>

而且还对不同的手机推出的时候不硬编码的高度，更好的用户界面体验。

答

您正在尝试使用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所述，以不同的方式来做到这一点。

GridLayout按钮大小不同

相关推荐