用户界面的基本构建块是View对象，它由View类创建并在屏幕上占用一个矩形区域。View是UI组件如TextView、Button、EditText等的基类。ViewGroup是View的子类。一个或多个View可以组合成一个ViewGroup。ViewGroup提供了Android布局，我们可以在其中排列视图的外观和顺序。ViewGroup的示例包括LinearLayout、FrameLayout、RelativeLayout等。

Android 布局类型

Android提供了以下ViewGroup或布局：

1. LinearLayout：是一个ViewGroup，将所有子元素沿单一方向（垂直或水平）对齐
2. RelativeLayout：是一个ViewGroup，以相对位置显示子视图
3. AbsoluteLayout：允许我们指定子视图和小部件的确切位置
4. TableLayout：是一个将子视图分组为行和列的视图
5. FrameLayout：是屏幕上的一个占位符，用于显示单个视图
6. ScrollView：是FrameLayout的一种特殊类型，它允许用户滚动浏览占用空间超过物理显示器的视图列表。ScrollView只能包含一个子视图或ViewGroup，通常是一个LinearLayout
7. ListView：是一个显示可滚动项目列表的视图组
8. GridView：是一个ViewGroup，以二维滚动网格显示项目。网格中的项目来自与该视图关联的ListAdapter

在本教程中，我们将重点关注两种最常用的Android布局：

1. LinearLayout
2. RelativeLayout

Android 布局属性

1. android:id：这是唯一标识视图的ID
2. android:layout_width：这是布局的宽度
3. android:layout_height：这是布局的高度
4. android:layout_margin：这是视图外部的额外空间。例如，如果设置android:marginLeft=20dp，则视图将从左侧20dp处开始排列
5. android:layout_padding：类似于android:layout_margin，但它指定视图内部的额外空间
6. android:layout_gravity：指定子View的位置方式
7. android:layout_weight：指定布局中额外空间应分配给视图的比例
8. android:layout_x：指定布局的x坐标
9. android:layout_y：指定布局的y坐标

android:layout_width=wrap_content告诉视图根据其内容所需尺寸调整自身大小。android:layout_width=match_parent告诉视图变得与父视图一样大。

View 标识

XML标签中ID的语法是：

• 字符串开头的@符号（@）表示XML解析器应解析并展开ID字符串的其余部分，并将其识别为ID资源
• 加号符号（+）表示这是一个新的资源名称，必须创建并添加到我们的资源中

Android LinearLayout

Android LinearLayout沿单行组织元素。我们可以使用android:orientation指定该行是垂直还是水平。默认方向为水平。垂直LinearLayout每行只有一个子元素（因此是单元素列），水平LinearLayout在屏幕上只有一行元素。android:layout_weight属性表示元素的相对重要性。权重较大的元素占用更多屏幕空间。以下是一个使用LinearLayout的示例布局XML：layout_linear.xml

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_margin="@dimen/activity_horizontal_margin">
    <Button
        android:id="@+id/backbutton"
        android:text="Back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:text="Row 2"
        android:layout_width="wrap_content"
        android:textSize="18sp"
        android:layout_margin="10dp"
        android:layout_height="wrap_content" />
    <TextView
        android:text="Row 3"
        android:textSize="18sp"
        android:layout_margin="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:text="Row 4"
        android:textSize="18sp"
        android:layout_margin="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:text="Row 5"
        android:textSize="18sp"
        android:layout_margin="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/next_button"
            android:text="next"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:text="Row 6b"
            android:textSize="18sp"
            android:layout_margin="10dp"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:text="Row 6c"
            android:textSize="18sp"
            android:layout_margin="10dp"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:text="Row 6d"
            android:textSize="18sp"
            android:layout_margin="10dp"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

</LinearLayout>

在这个布局中，我们有一个父LinearLayout，它具有垂直方向，并包含按钮、TextView和一个嵌套的LinearLayout（具有水平方向）作为子视图。注意：嵌套布局不必是同一种类型。例如，我们可以在RelativeLayout中将LinearLayout作为子元素，反之亦然。

Android RelativeLayout

Android RelativeLayout根据元素彼此之间的关系以及与父容器的关系来布局元素。这是布局中最复杂的一种，我们需要多个属性来实现所需的布局。也就是说，使用RelativeLayout，我们可以将视图定位为位于兄弟元素的左侧、右侧、下方或上方。我们还可以根据父容器定位视图，例如水平居中、垂直居中或两者兼有，或与父RelativeLayout的任何边缘对齐。如果子视图未指定这些属性，则视图默认渲染到左上角位置。

Android RelativeLayout 属性

以下是RelativeLayout中使用的主要属性，分为三个不同类别：

相对于容器

• android:layout_alignParentBottom：将元素的底部放置在容器的底部
• android:layout_alignParentLeft：将元素的左侧放置在容器的左侧
• android:layout_alignParentRight：将元素的右侧放置在容器的右侧
• android:layout_alignParentTop：将元素放置在容器的顶部
• android:layout_centerHorizontal：在父容器中水平居中元素
• android:layout_centerInParent：在容器中同时水平和垂直居中元素
• android:layout_centerVertical：在父容器中垂直居中元素

相对于兄弟元素

• android:layout_above：将元素放置在指定元素上方
• android:layout_below：将元素放置在指定元素下方
• android:layout_toLeftOf：将元素放置在指定元素的左侧
• android:layout_toRightOf：将元素放置在指定元素的右侧

"@id/XXXXX" 用于通过其 ID 引用元素。需要记住的一点是，在声明元素之前引用它会导致错误，因此在这种情况下应使用 @+id/。

与其他元素的对齐

• android:layout_alignBaseline：将新元素的基线与指定元素的基线对齐
• android:layout_alignBottom：将新元素的底部与指定元素的底部对齐
• android:layout_alignLeft：将新元素的左边缘与指定元素的左边缘对齐
• android:layout_alignRight：将新元素的右边缘与指定元素的右边缘对齐
• android:layout_alignTop：将新元素的顶部与指定元素的顶部对齐

以下 XML 布局使用了RelativeLayout：layout_relative.xml

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="https://schemas.android.com/apk/res/android">
    <Button
        android:id="@+id/backbutton"
        android:text="Back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/firstName"
        android:text="First Name"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/backbutton" />
    <TextView
        android:id="@+id/editFirstName"
        android:text="JournalDev"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/firstName"
        android:layout_below="@id/backbutton"/>
    <TextView
        android:id="@+id/editLastName"
        android:text="Layout Tutorial Example"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/lastName"
        android:layout_toRightOf="@+id/lastName"
        android:layout_toEndOf="@+id/lastName" />
    <TextView
        android:id="@+id/lastName"
        android:text="Last Name"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="48dp"
        android:layout_below="@+id/firstName"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="40dp"
        android:layout_marginStart="40dp" />

    <Button
        android:id="@+id/next"
        android:text="Next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editLastName"
        android:layout_alignLeft="@+id/editLastName"
        android:layout_alignStart="@+id/editLastName"
        android:layout_marginTop="37dp" />
</RelativeLayout>

如你所见，我们可以根据它们的相对位置重新排列元素。以下 XML 布局表示一个包含嵌套线性布局和相对布局的自定义布局。layout_mixed.xml

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="https://schemas.android.com/apk/res/android">

    <TextView
        android:id="@+id/parent_rl"
        android:text="Parent RelativeLayout"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/linearLayout"
        android:layout_below="@id/parent_rl"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true">

        <TextView
            android:text="Nested Horizontal"
            android:textSize="18sp"
            android:layout_margin="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:text="LL"
            android:textSize="18sp"
            android:layout_margin="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />


        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <TextView
                android:text="Double Nested"
                android:textSize="18sp"
                android:layout_margin="10dp"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <TextView
                android:text="Vertical"
                android:textSize="18sp"
                android:layout_margin="10dp"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <TextView
                android:text="LL"
                android:textSize="18sp"
                android:layout_margin="10dp"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        </LinearLayout>


    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/linearLayout">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Nested Relative Layout"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

        <Button
            android:id="@+id/back_button_pressed"
            android:text="back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textView"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="66dp" />

    </RelativeLayout>


</RelativeLayout>

Android 布局项目结构

该项目包含三个Activity及其各自讨论过的布局。

Android 布局代码

应用程序启动到MainActivity，通过以下代码加载layout_linear.xml内容：

package com.journaldev.layouts;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {


    Button back,next;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_linear);
        back=(Button)findViewById(R.id.back_button);
        next=(Button)findViewById(R.id.next_button);

        next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(MainActivity.this,SecondActivity.class);
                intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(intent);
            }
        });
        back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

    }

}

SecondActivity和ThirdActivity分别加载layout_relative.xml和layout_mixed.xml布局，如下所示：

package com.journaldev.layouts;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class SecondActivity extends Activity {
    Button back,next;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_relative);
        back=(Button)findViewById(R.id.backbutton);
        next=(Button)findViewById(R.id.next);

        next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(SecondActivity.this,ThirdActivity.class);
                intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(intent);
            }
        });
        back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(SecondActivity.this,MainActivity.class);
                intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(intent);
            }
        });

    }
}

package com.journaldev.layouts;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class ThirdActivity extends Activity {
    Button back;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_mixed);
        back=(Button)findViewById(R.id.back_button_pressed);

        back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(ThirdActivity.this,SecondActivity.class);
                intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(intent);
            }
        });

    }
}

三个布局文件的图像输出如下：layout_linear.xml 如你所见，父LinearLayout由单个垂直列中的6个子元素组成，其中一个是包含4个水平方向组件的嵌套LinearLayout子视图。layout_relative.xml 上图中的箭头表示兄弟元素如何相对于彼此和相对于容器定位。layout_mixed.xml 此RelativeLayout包含一个嵌套水平LinearLayout内的垂直LinearLayout，以及一个子RelativeLayout。注意：属于不同布局的组件不是兄弟元素，因此不能相对于彼此定位。它们的容器布局才是兄弟元素，可以相对于彼此定位。如果你对蓝色线条矩形和箭头感到疑惑，那是因为图像来自图形视图中的XML布局。运行应用时，这些蓝色线条和矩形不会显示。这结束了Android布局教程。我们将在后续教程中介绍其他Android布局。你可以通过以下链接下载最终的Android Layout Project。

下载 Android LinearLayout RelativeLayout 示例项目

参考：API Doc