在 LinearLayout 中嵌套 RelativeLayout

Question

我正在尝试在 Android 中实现以下布局，主标题在顶部，三个子标题在下面等距分布，下面有一些按钮：

我能够使用以下 XML 完成此操作，但我觉得我没有正确使用 RelativeLayout 和 LinearLayout：

<LinearLayout 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="#cfff"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1"
        android:text="Title"
        android:textSize="80sp"/>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_weight=".5">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <TextView
                android:id="@+id/text_caption1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Subheading"
                android:gravity="center"
                android:textSize="18sp"/>

            <TextView
                android:id="@+id/text_number1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/text_caption1"
                android:text="1"
                android:layout_weight="1"
                android:textSize="80sp"
                android:gravity="center"/>

        </RelativeLayout>
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <TextView
                android:id="@+id/text_caption2"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Subheading"
                android:gravity="center"
                android:textSize="18sp"/>

            <TextView
                android:id="@+id/text_number2"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/text_caption2"
                android:text="10"
                android:layout_weight="1"
                android:textSize="80sp"
                android:gravity="center"/>

        </RelativeLayout>
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <TextView
                android:id="@+id/text_caption3"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Subheading"
                android:gravity="center"
                android:textSize="18sp"/>

            <TextView
                android:id="@+id/text_sets"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/text_caption3"
                android:text="3"
                android:layout_weight="1"
                android:textSize="80sp"
                android:gravity="center"/>

        </RelativeLayout>
    </LinearLayout>

    <!-- Button1 -->
    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="Button1"
        android:textSize="20sp"/>

    <!-- Button2 -->
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="Button2"
        android:textSize="20sp" />

</LinearLayout>

我将重点放在副标题部分，但欢迎对整体布局提出任何建议。因此，我使用了 3 个不同的 RelativeLayouts 将“副标题”标题与它们各自的数字一起放置，并将它们嵌套在一个水平的 LinearLayout 中，以使它们水平地彼此相邻。

这似乎造成了一些问题，因为 Android Studio 抱怨我在嵌套布局中使用 layout_weight 对性能不利。但是，当我摆脱 layout_weight 时，一切都崩溃了，我只看到“标题”和一个副标题。我还想知道我是否可以仅使用一个 RelativeLayout 而没有嵌套更优雅地完成此任务，但是如果不使用 LinearLayout，我无法看到如何编写这样的代码。

提前感谢您的任何建议！

Answer 1

是的，您可以更优雅地完成此操作，只需一个 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="#cfff"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Title"
        android:textSize="80sp" />

    <TextView
        android:id="@+id/text_caption1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/text_number1"
        android:text="Subheading"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/text_number1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:gravity="left"
        android:text="1"
        android:textSize="80sp" />


    <TextView
        android:id="@+id/text_caption2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/text_number2"
        android:gravity="center"
        android:text="Subheading"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/text_number2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:text="2"
        android:textSize="80sp" />

    <TextView
        android:id="@+id/text_caption3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/text_number3"
        android:gravity="right"
        android:text="Subheading"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/text_number3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:gravity="right"
        android:text="3"
        android:textSize="80sp" />


    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button2"
        android:text="Button1"
        android:textSize="20sp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Button2"
        android:textSize="20sp" />
    </RelativeLayout>

Answer 2

试试这个...

<?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"
android:weightSum="10">


<TextView
    android:layout_width="wrap_content"
    android:layout_height="0dip"
    android:layout_weight="5"
    android:text="TITLE"
    android:layout_gravity="center"
    android:gravity="center"
    android:textSize="45sp"
    android:id="@+id/textView64" />

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="3"
    android:weightSum="10">


    <LinearLayout
        android:orientation="vertical"
        android:layout_width="0dip"
        android:layout_weight="3.25"
        android:gravity="center"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Subheading"
            android:id="@+id/textView66" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            android:textSize="50sp"
            android:id="@+id/textView67" />
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_weight="3.5"
        android:gravity="center"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SubHeading"
            android:id="@+id/textView68" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"
            android:textSize="50sp"
            android:id="@+id/textView69" />
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="0dip"
        android:layout_weight="3.25"
        android:gravity="center"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SubHeading"
            android:id="@+id/textView70" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3"
            android:textSize="50sp"
            android:id="@+id/textView71" />
    </LinearLayout>
</LinearLayout>

<Button
    android:layout_width="match_parent"
    android:layout_height="0dip"
    android:layout_weight="0.8"
    android:text="New Button"
    android:id="@+id/button"
    android:layout_gravity="center_horizontal" />
<Button
    android:layout_width="wrap_content"
    android:layout_height="0dip"
    android:layout_weight="0.8"
    android:text="New Button"
    android:id="@+id/button1"
    />

Answer 3

根据您所需的比例更改android:weightSum 和android:layout_weight...

<LinearLayout 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="#cfff"
android:orientation="vertical"
tools:context=".MainActivity"
android:weightSum="4">

<TextView
    android:id="@+id/text_title"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_weight="1.5"
    android:text="Title"
    android:textSize="80sp"/>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_weight="1.5"
    android:weightSum="3">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <TextView
            android:id="@+id/text_caption1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Subheading"
            android:gravity="center"
            android:textSize="18sp"/>

        <TextView
            android:id="@+id/text_number1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/text_caption1"
            android:text="1"
            android:layout_weight="1"
            android:textSize="80sp"
            android:gravity="center"/>

    </RelativeLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <TextView
            android:id="@+id/text_caption2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Subheading"
            android:gravity="center"
            android:textSize="18sp"/>

        <TextView
            android:id="@+id/text_number2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/text_caption2"
            android:text="10"
            android:layout_weight="1"
            android:textSize="80sp"
            android:gravity="center"/>

    </RelativeLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <TextView
            android:id="@+id/text_caption3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Subheading"
            android:gravity="center"
            android:textSize="18sp"/>

        <TextView
            android:id="@+id/text_sets"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/text_caption3"
            android:text="3"
            android:layout_weight="1"
            android:textSize="80sp"
            android:gravity="center"/>

    </RelativeLayout>
</LinearLayout>

<!-- Button1 -->
<Button
    android:id="@+id/button1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button1"
    android:layout_weight=".5"
    android:textSize="20sp"/>

<!-- Button2 -->
<Button
    android:id="@+id/button2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight=".5"
    android:text="Button2"
    android:textSize="20sp" />

 </LinearLayout>