三个按钮排成一行 -> 调整大小以适合父宽度答案

【问题标题】：Three buttons in line -> resize to fit parent width三个按钮排成一行 -> 调整大小以适合父宽度
【发布时间】：2011-11-29 20:46:20
【问题描述】：

我有这个布局

线性布局
- 滚动视图
  - 相对布局
    - 9x 按钮

在这样的视图中（3x3 网格）

+---------+  
| o  o  o |  
| o  o  o |  
| o  o  o |
+---------+

每个按钮都有它的背景，没有文字，背景是这样的：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/menu_btn1_hover" android:state_pressed="true"/>
    <item android:drawable="@drawable/menu_btn1"/>
</selector>

我应该如何说明布局，所以按钮总是每行 3 个，并且会调整大小以适应视图？

【问题讨论】：

看起来是使用 TableLayout 的完美场所。
LinearLayout 之上 ScrollView 中的 TableLayout ?
TableLayout in ScrollView 而不是我宁愿说的RelativeLayout。
@TillHelgeHelwig 把它放在一个答案中，所以我可以偶尔接受它
只接受下面的一个。它基本上说明了一切。 ;)

标签： android layout

【解决方案1】：

试试这个！

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
    <LinearLayout android:id="@+id/LinearLayout02" android:layout_height="wrap_content" android:layout_width="match_parent">
        <Button android:id="@+id/Button04" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
        <Button android:id="@+id/Button05" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
        <Button android:id="@+id/Button06" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
    </LinearLayout>
    <LinearLayout android:id="@+id/LinearLayout01" android:layout_height="wrap_content" android:layout_width="match_parent">
        <Button android:id="@+id/Button01" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
        <Button android:id="@+id/Button02" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
        <Button android:id="@+id/Button03" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
    </LinearLayout>
    <LinearLayout android:id="@+id/linearLayout1" android:layout_height="wrap_content" android:layout_width="match_parent">
        <Button android:id="@+id/button1" android:text="Button" android:layout_weight="1" android:layout_height="wrap_content" android:layout_width="0dp"></Button>
        <Button android:id="@+id/button2" android:text="Button" android:layout_weight="1" android:layout_height="wrap_content" android:layout_width="0dp"></Button>
        <Button android:id="@+id/button3" android:text="Button" android:layout_weight="1" android:layout_height="wrap_content" android:layout_width="0dp"></Button>
    </LinearLayout>

</LinearLayout>

屏幕截图：

更新：

如果你使用相同的 layout_height 和 layout_width 制作 LinearLayout (android:id="@+id/wrapper" (LOOK CODE BELOW)) 你会得到你想要的

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/wrapper"
        android:layout_width="300dp" android:weightSum="1"
        android:orientation="vertical" android:layout_height="300dp">
        <LinearLayout android:id="@+id/LinearLayout02" android:layout_width="match_parent" android:layout_weight="0.33" android:layout_height="0dp">
            <Button android:id="@+id/Button04" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="fill_parent"></Button>
            <Button android:id="@+id/Button05" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="fill_parent"></Button>
            <Button android:id="@+id/Button06" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="fill_parent"></Button>
        </LinearLayout>
        <LinearLayout android:id="@+id/LinearLayout01" android:layout_width="match_parent" android:layout_weight="0.33" android:layout_height="0dp">
            <Button android:id="@+id/Button01" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="fill_parent"></Button>
            <Button android:id="@+id/Button02" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="fill_parent"></Button>
            <Button android:id="@+id/Button03" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="fill_parent"></Button>
        </LinearLayout>
        <LinearLayout android:id="@+id/linearLayout1" android:layout_width="match_parent" android:layout_weight="0.33" android:layout_height="0dp">
            <Button android:id="@+id/button1" android:text="Button" android:layout_weight="1" android:layout_width="0dp" android:layout_height="fill_parent"></Button>
            <Button android:id="@+id/button2" android:text="Button" android:layout_weight="1" android:layout_width="0dp" android:layout_height="fill_parent"></Button>
            <Button android:id="@+id/button3" android:text="Button" android:layout_weight="1" android:layout_width="0dp" android:layout_height="fill_parent"></Button>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

请看截图。在第二个屏幕截图中，带有 android:id="@+id/wrapper" 的 LinearLayout 具有相同的宽度和高度，并且等于 300dp

请试一试！希望对你有帮助！！

【讨论】：

它与 Kasper 的回答有同样的问题。按钮在水平方向上调整大小，但在垂直方向上仍然保持相同的高度。需要以与宽度相同的比例拉伸它们
对，你做到了，抱歉这么晚才接受答案:)）谢谢
谢谢亲爱的。您的解决方案非常简单和智能！

【解决方案2】：

如果您将其替换为您提到的RelativeLayout，这应该可以解决问题。您需要做的只是 id 和样式：

<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_weight="1" />
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_weight="1" />
        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_weight="1" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_weight="1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_weight="1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_weight="1" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_weight="1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_weight="1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_weight="1" />
    </LinearLayout>
</LinearLayout>

【讨论】：

工作得几乎完美，但我的按钮是方形的，它们的宽度总和（3 x 宽度）比屏幕长。使用layout_weight我可以自动拉伸它们以适应宽度，但高度没有调整。
如果ScrollView 的高度是固定的，您可以将我发布的布局中的所有android:layout_height 更改为fill_parent，它们也会在高度上拉伸。我的意思是所有这些，包括外部LinearLayout中的那个。
滚动视图在两个维度上都是 fill_parent。和 android:layout_height 仅在 LinearLayout 或两者（布局和按钮）上？
在LinearLayout 和Buttons 上。
不工作，检查代码，如果它是你推荐的，请。 pastebin.com/wU8nKWWr

【解决方案3】：

您可以使用填充屏幕的TableLayout 并将其嵌套在ScrollView 中。然后您可以通过编程方式在TableRow 中增加 3 个视图并将其添加到 TableLayout，这样您每行将获得 3 个视图。重复 3 次，你就得到了你想要的。

请注意，如果您以编程方式执行此操作，则可以非常轻松地更改按钮的顺序

祝你好运，方舟

【讨论】：