布局与按钮,平均填充屏幕大小

时间:2014-05-12 17:56:08

标签: android android-layout android-tablelayout

我想创建一个由8个按钮组成的布局(四行,连续两行)。

我希望按钮按比例填充屏幕大小 - 相等的边距,以便它非常适合差异屏幕尺寸。

这就是我现在所拥有的:

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<RelativeLayout
    android:id="@+id/test_1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:layout_marginLeft="10dp" >

    <Button
        android:id="@+id/concession_btn"
        android:layout_width="150dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/mybutton" />

    <Button
        android:layout_width="150dip"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/concession_btn"
        android:text="test2"
        android:layout_weight="1"
        android:background="@drawable/mybutton" />

    <Button
        android:id="@+id/test_2"
        android:layout_width="150dip"
        android:layout_below="@+id/concession_btn"
        android:layout_height="wrap_content"
        android:text="test3"
        android:layout_weight="1" 
        android:background="@drawable/mybutton"/>

    <Button
        android:layout_width="150dip"
        android:layout_toRightOf="@+id/test_2"
        android:layout_below="@+id/concession_btn"
        android:layout_height="wrap_content"
        android:text="test4"
        android:layout_weight="1"
        android:background="@drawable/mybutton" />
    <Button
        android:id="@+id/test_3"
        android:layout_width="150dip"
        android:layout_below="@+id/test_2"
        android:layout_height="wrap_content"
        android:text="test3"
        android:layout_weight="1" 
        android:background="@drawable/mybutton"/>

    <Button
        android:layout_width="150dip"
        android:layout_toRightOf="@+id/test_3"
        android:layout_below="@+id/test_2"
        android:layout_height="wrap_content"
        android:text="test4"
        android:layout_weight="1"
        android:background="@drawable/mybutton" />
    <Button
        android:id="@+id/test_4"
        android:layout_width="150dip"
        android:layout_below="@+id/test_3"
        android:layout_height="wrap_content"
        android:text="test3"
        android:layout_weight="1" 
        android:background="@drawable/mybutton"/>

    <Button
        android:layout_width="150dip"
        android:layout_toRightOf="@+id/test_4"
        android:layout_below="@+id/test_3"
        android:layout_height="wrap_content"
        android:text="test4"
        android:layout_weight="1"
        android:background="@drawable/mybutton" />
</RelativeLayout>

这给了我八个按钮 - 连续四行四行,但是我的xml使用了修复边距,所以它不适合不同的屏幕尺寸。

非常感谢帮助!

4 个答案:

答案 0 :(得分:2)

// try this way,hope this will help you...

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/concession_btn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="test1"
            android:background="@drawable/mybutton" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="test2"
            android:layout_weight="1"
            android:background="@drawable/mybutton" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/test_2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="test3"
            android:layout_weight="1"
            android:background="@drawable/mybutton"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="test4"
            android:layout_weight="1"
            android:background="@drawable/mybutton" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/test_3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="test5"
            android:layout_weight="1"
            android:background="@drawable/mybutton"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="test6"
            android:layout_weight="1"
            android:background="@drawable/mybutton" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/test_4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="test7"
            android:layout_weight="1"
            android:background="@drawable/mybutton"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="test8"
            android:layout_weight="1"
            android:background="@drawable/mybutton" />
    </LinearLayout>
</LinearLayout>

答案 1 :(得分:2)

这是你的布局朋友。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="1" >

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:text="test" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:text="test" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="1" >

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:text="test" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:text="test" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="1" >

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:text="test" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:text="test" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="1" >

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:text="test" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:text="test" />
    </LinearLayout>

</LinearLayout>

答案 2 :(得分:1)

尝试在每个分割的布局中划分布局和插入按钮。

线性布局划分为两个相等的线性布局

<LinearLayout android:orientation="horizontal" android:layout_height="fill_parent" android:layout_width="fill_parent">
  <LinearLayout android:layout_weight="1" android:layout_height="fill_parent" android:layout_width="fill_parent">
     //Your button here
  </LinearLayout>
  <LinearLayout android:layout_weight="1" android:layout_height="fill_parent" android:layout_width="fill_parent">
     //Your button here
  </LinearLayout>
</LinearLayout>

上面的代码会将一行分成两行。同样粘贴上面的代码3次,得到4行,每行2列......

请务必将上述代码放在LinearLayout android:orientation="vertical"

将按钮放在内部布局中。之后,按钮的定位将会响应..

答案 3 :(得分:0)

对于按钮,插入重量为1和0dp高度和宽度的View元素可以完成这项工作。这是代码片段:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp">
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button 1" />

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 2"
            android:layout_weight="1"/>
        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1"/>
    </LinearLayout>
    <View
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 3"
            android:layout_weight="1"/>
        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 4"
            android:layout_weight="1"/>
        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1"/>
    </LinearLayout>
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1"/>


</LinearLayout>

输出看起来像这样:

Equally distributed buttons