如何在Android中实现这种布局？

如何使用

RelativeLayout

在

Android

中获得此布局？不管我怎么做，最上面的两个按钮都不会按预期显示。下面我提供了我想要的、我尝试的和我尝试的输出的屏幕截图。有人能帮我吗？谢谢

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f5f5f5"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:text="Button" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/button1"
        android:text="Button" />

</RelativeLayout>

更新：

非常感谢您的帮助。

试试以下方法：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f5f5f5"
tools:context=".MainActivity" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="2"
    android:id="@+id/topButtons">

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button1" 
    android:layout_weight="1"/>

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button2"
    android:layout_weight="1"/>

</LinearLayout>

<Button
    android:id="@+id/button3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/topButtons"
    android:layout_above="@+id/button4"
    android:text="Button3" />

<Button
    android:id="@+id/button4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Button4"
    android:layout_alignParentBottom="true"/>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    tools:context=".MainActivity" >

    <LinearLayout
        android:id="@+id/topLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="1"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:gravity="center"
            android:textColor="#ffffff"
            android:background="#ff6a2b"
            android:text="Button 1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:layout_marginLeft="1dp"
            android:gravity="center"
            android:textColor="#ffffff"
            android:background="#ff6a2b"
            android:text="Button 2" />

    </LinearLayout>

    <Button
        android:id="@+id/button4"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:textColor="#ffffff"
        android:background="#14b8ff"
        android:text="Button 4" />

    <Button
        android:id="@+id/button3"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@+id/button4"
        android:layout_below="@+id/topLayout"
        android:gravity="center"
        android:textColor="#ffffff"
        android:background="#000000"
        android:text="Button 3" />

</RelativeLayout>

试试这个：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f5f5f5"
tools:context=".MainActivity" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="2"
    android:id="@+id/topButtons">

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button1" 
    android:layout_weight="1"/>

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button2"
    android:layout_weight="1"/>

</LinearLayout>

<Button
    android:id="@+id/button3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/topButtons"
    android:layout_above="@+id/button4"
    android:text="Button3" />

<Button
    android:id="@+id/button4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Button4"
    android:layout_alignParentBottom="true"/>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    tools:context=".MainActivity" >

    <LinearLayout
        android:id="@+id/topLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="1"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:gravity="center"
            android:textColor="#ffffff"
            android:background="#ff6a2b"
            android:text="Button 1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:layout_marginLeft="1dp"
            android:gravity="center"
            android:textColor="#ffffff"
            android:background="#ff6a2b"
            android:text="Button 2" />

    </LinearLayout>

    <Button
        android:id="@+id/button4"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:textColor="#ffffff"
        android:background="#14b8ff"
        android:text="Button 4" />

    <Button
        android:id="@+id/button3"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@+id/button4"
        android:layout_below="@+id/topLayout"
        android:gravity="center"
        android:textColor="#ffffff"
        android:background="#000000"
        android:text="Button 3" />

</RelativeLayout>

---

祝您好运。

您也可以使用不可见视图来实现相同的效果，而无需使用其他布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f5f5f5"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Button"
        android:layout_toStartOf="@+id/alignment" />

    <View
        android:id="@+id/alignment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:visibility="invisible" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Button"
        android:layout_toEndOf="@+id/alignment" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:text="Button" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/button1"
        android:text="Button" />

</RelativeLayout>

---

我建议使用线性布局！！ 因为看起来你需要把按钮1和2放在最上面，把按钮4放在最下面，让按钮3占据所有剩余的空间。 为此，请检查以下布局重量的使用：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#f5f5f5"
    tools:context=".MainActivity" >

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

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="Button" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="Button" />

    </LinearLayout>

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="Button" />

    <Button
        android:id="@+id/button4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content
        android:text="Button" />

</LinearLayout>

以下是解决方案：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f5f5f5"
android:orientation="vertical"
tools:context=".MainActivity" >

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:orientation="horizontal">


  <Button
    android:id="@+id/button1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:text="Button1" />

  <Button
    android:id="@+id/button2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_toRightOf="@+id/button1"
    android:text="Button2" />
</RelativeLayout>

  <Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentCenter="true"
    android:text="Button3" />

  <Button
    android:id="@+id/button4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:text="Button4" />

</RelativeLayout>



此外，还需要为每个按钮添加
android:background=
颜色
 为什么要使用
RelativeLayout
？对于按钮1和2，您可以使用外部垂直
线性布局
，其中包含一个水平
线性布局
，然后是按钮3和按钮4，轻松完成此操作。只需将水平
线性布局
和按钮3/4的
布局权重设置为1/8/1即可。您好，谢谢，它可以工作，但按钮之间有空格。我如何删除这些？谢谢。这是因为android自定义按钮的背景。定义了按钮可绘制或按钮背景色后，您将看到它们消失了。@Henry看到我的编辑，我添加了背景色，它们消失了。不客气。最后，我在按钮1和按钮2之间添加了一点边距，以便更好地查看。您好，谢谢，它可以工作，但是按钮之间有空格。我如何删除这些？谢谢。嗨，谢谢。它可以工作，但是按钮之间有空格。我怎样才能删除这些？谢谢。请在button1的xml中使用
android:layout\u marginRight=“-4dp”
（或其他负数）和button2的xml中使用
android:layout\u marginLeft=“-4dp”
（或其他负数）之间调整空格。