Android UI 布局

简介

Android 中的 UI 布局用于定义用户界面，当使用移动应用程序时，该界面将显示给用户。它通常用于显示用户将在屏幕上看到的内容。每个 Android 应用程序都包含一个或多个 UI 布局。Android 应用程序中创建的每个活动都包含不同类型的 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>

相对布局输出

线性布局

线性布局是一种布局类型，我们可以在其中水平排列在此视图中显示的小部件或视图，在一行中，或垂直排列在一列中。为了指定线性布局的方向，无论我们是否必须水平或垂直显示它，我们都可以使用线性布局中的方向参数进行设置。

线性布局示例

导航到 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 布局，我们可以使用它们。

Vaibhav Ahire

更新于: 2023 年 2 月 20 日

399 次浏览

开启您的 职业生涯

通过完成课程获得认证

开始学习