布局 - 两个按钮

时间:2017-03-12 19:35:22

标签: android android-layout

我对Android缺乏经验并且处理的布局应该有一个带有3个按钮的底部区域:

enter image description here

我设法差不多这样,除了取决于屏幕,底部按钮将相互重叠或太远。这些按钮应完全对齐在" APPLY"按钮,但我似乎无法正确使用。

这是我目前的代码:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="20dp">

    <RelativeLayout
        android:id="@+id/relapply"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <Button
            android:id="@+id/apply"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ripple_buttons_carousel"
            android:text="@string/apply_button"
            android:textSize="15sp"
            android:textColor="@android:color/white"
            android:width="320dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="bottom"
        android:layout_below="@id/relapply">

        <Button
            android:id="@+id/discard"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ripple_buttons_carousel"
            android:text="@string/discard_button"
            android:textSize="15sp"
            android:textColor="@android:color/white"
            android:layout_marginStart="30dp"
            android:width="154dp"
            android:layout_alignParentStart="true"/>

        <RelativeLayout
            android:layout_width="12dp"
            android:layout_height="30dp"
            android:layout_toLeftOf="@id/save">
        </RelativeLayout>

        <Button
            android:id="@+id/save"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ripple_buttons_carousel"
            android:text="@string/save_button"
            android:textSize="15sp"
            android:textColor="@android:color/white"
            android:layout_marginEnd="30dp"
            android:width="154dp"
            android:layout_alignParentEnd="true" />
    </RelativeLayout>

</RelativeLayout>

这是我的按钮所在的布局代码。然后,我所做的线性布局xml测试文件中的所有内容。关于如何改进这个的任何提示?

谢谢!

3 个答案:

答案 0 :(得分:1)

首先,您可以获得更多相对布局,远远超出您的需要。 您可以在此处尝试此布局(我删除了背景并硬编码了文本以用于演示目的)

  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp">

    <Button
        android:id="@+id/apply"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="Top Button"
        android:textColor="@android:color/white"
        android:textSize="15sp" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/apply"
        android:orientation="horizontal">

        <Button
            android:id="@+id/discard"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Bottom Left Button"
            android:textColor="@android:color/white"
            android:textSize="15sp" />

        <Button
            android:id="@+id/save"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Bottom Right Button"
            android:textColor="@android:color/white"
            android:textSize="15sp" />

    </LinearLayout>
</RelativeLayout>

您可以在外部相对布局上设置布局边距(例如android:layout_margin="8dp"

布局的工作方式如下: 在顶行中只有顶部的按钮。下面是一个水平线性布局,包含两个带

的按钮
 android:layout_width="0dp"
 android:layout_weight="1"

这可以确保两个按钮跨度相等(因为它们具有相同的宽度)。如果您希望整个布局具有特定宽度,只需将android:layout_width="match_parent"从相对布局设置为android:layout_width="320dp"

答案 1 :(得分:1)

您可以执行以下操作:

 <LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:background="@color/background_floating_material_dark">

    <Button
        android:id="@+id/apply"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/ripple_buttons_carousel"
        android:text="@string/apply_button"
        android:textSize="15sp"
        android:textColor="@android:color/white"
        android:layout_marginBottom="10dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="2">

        <Button
            android:id="@+id/discard"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@drawable/ripple_buttons_carousel"
            android:text="@string/discard_button"
            android:textSize="15sp"
            android:textColor="@android:color/white"
            android:layout_weight="0.9" />

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.2"></LinearLayout>

        <Button
            android:id="@+id/save"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@drawable/ripple_buttons_carousel"
            android:text="@string/save_button"
            android:textSize="15sp"
            android:textColor="@android:color/white"
            android:layout_weight="0.9" />

    </LinearLayout>
</LinearLayout>

输出接近这个:

enter image description here

答案 2 :(得分:0)

您还可以使用以下代码..... 这很简单。

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="5dp">

        <Button
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="Apply" />

        <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_marginTop="5dp"
             android:orientation="horizontal"
             android:weightSum="2">

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

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

        </LinearLayout>

     </LinearLayout>