行中的三个按钮 - >调整大小以适合父宽度

时间:2011-11-28 14:01:19

标签: android layout

我有这个布局

  • 线性布局
    • 滚动视图
      • 相对布局
        • 9x Button

在这样的视图中(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个,并且会调整大小以使它们适合视图?

3 个答案:

答案 0 :(得分:12)

试试这个!

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

截图:

enter image description here

更新:

如果你使用相同的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

enter image description here enter image description here

请试试吧!希望对你有帮助!!

答案 1 :(得分:2)

如果用你提到的RelativeLayout替换它,这应该可以解决问题。你需要做的就是ids和风格:

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

答案 2 :(得分:1)

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

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

祝你好运, Arkde