Android UI 布局
androidmobile developmentapps/applications更新于 2026/1/22 5:52:17
简介
Android 中的 UI 布局用于定义移动应用程序使用时向用户显示的用户界面。它通常用于显示用户将在屏幕上看到的内容。每个 Android 应用程序都包含一个或多个 UI 布局。Android 应用程序中创建的每个 Activity 都包含不同类型的 UI 布局。UI 布局通常用作父组件，用于保存应用程序中的所有小部件，无论是文本视图、图像视图还是其他。Android 中的布局也称为视图组，用于保存其中的所有视图。在本文中，我们将了解 Android 中不同类型的 UI 布局。
Android 中不同类型的 UI 布局。
约束布局。
相对布局。
线性布局。
框架布局。
表格布局。
绝对布局。
我们将创建一个简单的项目来演示每种布局。
约束布局
约束布局是 Android 应用程序中最常用的 UI 布局之一。它用于灵活地定位和调整视图组中小部件的大小。我们可以指定此视图组中每个子视图相对于其他现有视图的布局约束位置。
约束布局示例
导航到 aactivity_main.xml 并向其中添加以下代码。
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Layouts in Android" android:textAlignment="center" android:textColor="#FF000000" android:textSize="20sp" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/idTVSubHeading" android:text="Constraint Layout in Android" android:textAlignment="center" android:textColor="#FF000000" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toBottomOf="@id/textView" /> </androidx.constraintlayout.widget.ConstraintLayout>
约束布局的输出
相对布局
相对布局是指视图组中各个小部件的位置可以通过彼此或相对于父级进行描述。借助此布局，我们可以通过特定小部件的 ID 来对齐各个元素。
相对布局示例
导航到 aactivity_main.xml 并向其中添加以下代码。
<?xml version="1.0" encoding="utf-8"?> <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" tools:context=".MainActivity"> <TextView android:id="@+id/idTVHeading" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Layouts in Android" android:textAlignment="center" android:textColor="#FF000000" android:textSize="20sp" android:textStyle="bold" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/idTVHeading" android:text="Relative Layout Example" android:textAlignment="center" android:textColor="#FF000000" /> </RelativeLayout>
相对布局的输出
线性布局
线性布局是一种布局类型，我们可以将视图中显示的窗口小部件或视图水平排列成一行，也可以垂直排列成一列。为了指定线性布局的方向，我们可以在线性布局中使用 orientation 参数来设置水平或垂直方向。
线性布局示例
导航到 aactivity_main.xml 并向其中添加以下代码。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="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:gravity="center" android:orientation="vertical" tools:context=".MainActivity"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Layouts in Android" android:textAlignment="center" android:textColor="#FF000000" android:textSize="20sp" android:textStyle="bold" /> <TextView android:id="@+id/idTVSubHeading" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Vertical Linear Layout in Android" android:textAlignment="center" android:textColor="#FF000000" /> </LinearLayout>
线性布局的输出
框架布局
框架布局是一种布局类型，旨在遮挡屏幕的特定区域以显示单个项目。在大多数情况下，框架布局用于容纳单个子视图。我们可以在框架布局中使用多个视图，并通过为框架布局中显示的每个小部件分配重力来控制它们在其中的位置。
框架布局示例
导航到 aactivity_main.xml 并向其中添加以下代码。
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" tools:context=".MainActivity"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Layouts in Android" android:textAlignment="center" android:textColor="#FF000000" android:textSize="20sp" android:textStyle="bold" /> <TextView android:id="@+id/idTVSubHeading" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="30dp" android:text="Frame Layout in Android" android:textAlignment="center" android:textColor="#FF000000" /> </FrameLayout>
框架布局的输出
表格布局
表格布局，顾名思义，用于以表格形式对齐其中的控件。此视图组由表格行组成，每行定义一行，行中可以包含任意数量的单元格。同样，表格布局也由表格列组成，每列定义列，列中可以包含任意数量的列。表格布局的列宽由该列中最宽的单元格定义。
表格布局示例
导航到 aactivity_main.xml 并向其中添加以下代码。
<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" tools:context=".MainActivity"> <TableRow android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:text="Layouts in Android" android:textAlignment="center" android:textColor="#FF000000" android:textSize="20sp" android:textStyle="bold" /> </TableRow> <TableRow android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center"> <TextView android:id="@+id/idTVSubHeading" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Table Layout in Android" android:textAlignment="center" android:textColor="#FF000000" /> </TableRow> </TableLayout>
表格布局的输出
总结
在以上教程中，我们了解了什么是 Android 中的 UI 布局，以及 Android 应用程序中可以使用的不同类型的 Android UI 布局。
