在 LinearLayout 中嵌套 RelativeLayouts

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 来放置 "Subheading" 标题及其各自的数字，并将它们嵌套在水平 LinearLayout 中，使它们在水平方向上彼此相邻。

这似乎造成了一些问题，因为 Android Studio 抱怨我在嵌套布局中使用 layout_weight 不利于性能。然而，当我去掉 layout_weight 时，一切都崩溃了，我只看到 "Title" 和一个副标题。我还想知道我是否可以仅使用一个 RelativeLayout 而不使用嵌套来更优雅地完成此操作，但我看不出如何在不使用 LinearLayout 的情况下编写这样的代码。

提前感谢您的任何建议！

Answer 1

试试这个...

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

是的，你可以只用一个 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 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>

在 LinearLayout 中嵌套 RelativeLayouts

Nesting RelativeLayouts within LinearLayout

android

android-layout

android-linearlayout

android-relativelayout