【问题标题】:Grid layout extra space网格布局额外空间
【发布时间】:2017-11-22 23:58:47
【问题描述】:

我正在尝试制作一个 android 计算器应用程序,但是我被困在一件事上,使用网格布局时会出现一些额外的空间。

现在我知道我已经为布局高度和宽度使用了匹配父值,这可能是图像中额外间距的原因。

由于我是 android 新手,而且我对 android 的了解越来越多,谁能告诉我,我怎样才能在网格布局上均匀分布这些按钮?

代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.tilak.myfirstapplication.MainActivity">


    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintBottom_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <EditText
            android:id="@+id/editText3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:height="225dp"
            android:ems="10"
            android:layout_gravity="fill_horizontal"
            android:inputType="textMultiLine"
            tools:layout_editor_absoluteX="104dp"
            tools:layout_editor_absoluteY="207dp" />



        <GridLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:rowCount="5"
            android:columnCount="4"

            android:background="#ff0000"
            tools:layout_editor_absoluteX="8dp"
            tools:layout_editor_absoluteY="8dp">
            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"

                android:layout_row="0"
                android:layout_column="0"
                tools:layout_editor_absoluteX="136dp"
                tools:layout_editor_absoluteY="100dp" />

            <Button
                android:id="@+id/button5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"
                android:layout_row="0"
                android:layout_column="1"
                tools:layout_editor_absoluteX="116dp"
                tools:layout_editor_absoluteY="289dp" />


            <Button
                android:id="@+id/button6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"
                android:layout_row="0"
                android:layout_column="2"
                tools:layout_editor_absoluteX="129dp"
                tools:layout_editor_absoluteY="255dp" />



            <Button
                android:id="@+id/button7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"
                android:layout_row="0"
                android:layout_column="3"
                tools:layout_editor_absoluteX="41dp"
                tools:layout_editor_absoluteY="180dp" />

            <Button
                android:id="@+id/button8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"
                android:layout_row="1"
                android:layout_column="0"
                tools:layout_editor_absoluteX="64dp"
                tools:layout_editor_absoluteY="259dp" />



            <Button
                android:id="@+id/button9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="1"
                android:layout_column="1"
                android:text="Button" />

            <Button
                android:id="@+id/button10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"
                android:layout_row="1"
                android:layout_column="2"
                tools:layout_editor_absoluteX="129dp"
                tools:layout_editor_absoluteY="217dp" />

            <Button
                android:id="@+id/button11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="1"
                android:layout_column="3"
                android:text="Button"
                tools:layout_editor_absoluteX="129dp"
                tools:layout_editor_absoluteY="168dp" />


            <Button
                android:id="@+id/button12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="2"
                android:layout_column="0"
                android:text="Button" />

            <Button
                android:id="@+id/button13"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="2"
                android:layout_column="1"
                android:text="Button" />

            <Button
                android:id="@+id/button14"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="2"
                android:layout_column="2"
                android:text="Button" />
            <Button
                android:id="@+id/button15"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="2"
                android:layout_column="3"
                android:text="Button" />




            <Button
                android:id="@+id/button16"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="3"
                android:layout_column="0"
                android:text="Button" />


            <Button
                android:id="@+id/button17"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="3"
                android:layout_column="1"
                android:text="Button" />

            <Button
                android:id="@+id/button18"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="3"
                android:layout_column="2"
                android:text="Button" />


            <Button
                android:id="@+id/button19"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="3"
                android:layout_column="3"
                android:text="Button" />
            <Button
                android:id="@+id/button20"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="4"
                android:layout_column="0"
                android:text="Button" />
            <Button
                android:id="@+id/button21"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="4"
                android:layout_column="1"
                android:text="Button" />
            <Button
                android:id="@+id/button22"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="4"
                android:layout_column="2"
                android:text="Button" />
            <Button
                android:id="@+id/button23"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_row="4"
                android:layout_column="3"
                android:text="Button" />
        </GridLayout>
    </LinearLayout>


</android.support.constraint.ConstraintLayout>

【问题讨论】:

    标签: android


    【解决方案1】:

    我建议使用 weight 属性使子视图平均共享空间。 StackOverflow 上的另一篇文章有​​一个很好的答案,涵盖了这个主题:

    https://stackoverflow.com/a/30245753/2281718

    简而言之,只需将宽度设置为 0dp 并为所有孩子添加 android:layout_columnWeight="1"

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_columnWeight="1"
        ...
        />
    

    【讨论】:

    • 你能解释一下这段代码吗?它有效,但我仍然没有得到它。我会很感激。另外为什么 0dp 有帮助?
    • 很高兴它起作用了 :) weight 基本上只是一种划分可用空间的方法。因此,如果您的 GridLayout 与设备一样宽,并且您使用 weight=1 添加 2 个视图,那么它们将分别获得父宽度的一半。如果您有 3 个视图,那么每个视图将获得总宽度的三分之一。 0dp 部分是一种优化,我从来没有真正读过为什么它应该更好。就我个人而言,我只是使用它来快速查看视图大小将在运行时并基于可用空间来确定。
    • 它不是为了优化,基本上它让 android 知道它应该在哪个上工作,这里你使用了 width =0 ,所以它设置了宽度的权重。只是在某处阅读它,我想你明白了我想说的:)
    • 您想实现一个包含两个大小相同的列的表。每个表格行都是一个水平线性布局,有两个“表格单元格”(例如,TextViews),每个单元格的 layout_weight=.5。如果在“表格单元格”上指定 layout_width="wrap_content",则内容宽度将添加到由 layout_weight 计算的宽度上,表格单元格将大小不一,列将无法正确排列。所以你必须设置 layout_width=0dp 以便 android 只使用 layout_weight 来计算单元格的宽度
    • ^实际陈述
    【解决方案2】:

    像这样使用占位符。 这不是确切的 XML。

    <button 1/>
    <textview weight=1>
    <button 2/>
    <textview weight=1>
    <button 3/>
    <textview weight=1>
    <button 4/>
    

    【讨论】: