[Android] 布局容器&视图元素

1. 界面布局简介

在 Android 中，界面布局是指如何组织和排列用户界面中的视图（View）元素，以形成用户所看到的界面。Android 提供了多种布局容器（Layout Container）和视图元素（View Element），用于实现各种不同类型的用户界面。

常用的 Android 界面布局容器有以下几种：

1. LinearLayout：线性布局容器，可以水平或垂直排列子视图。
2. RelativeLayout：相对布局容器，可以根据视图之间的相对位置排列子视图。
3. ConstraintLayout：约束布局容器，强大灵活的布局容器，可以通过约束条件来排列子视图。
4. FrameLayout：帧布局容器，子视图可以叠加在顶部。
5. CoordinatorLayout：协调布局容器，用于处理多个子视图之间的协调和交互。

常用的 Android 视图元素有以下几种：

1. TextView：文本视图，用于显示文本内容。
2. EditText：编辑文本视图，用户可以输入文本内容。
3. Button：按钮，用于执行操作或提交表单数据。
4. ImageView：图像视图，用于显示图片。
5. ListView 和 RecyclerView：列表视图，用于显示滚动列表。
6. Spinner：下拉框视图，用于选择其中的一个选项。
7. CheckBox 和 RadioButton：复选框和单选按钮，用于选择或设置选项。
8. ProgressBar：进度条视图，用于显示进度。

布局容器和视图元素可以嵌套组合使用，以构建复杂的用户界面。开发者可以通过 XML 布局文件和 Java/Kotlin 代码来创建和配置界面布局。在 XML 布局文件中，可以使用不同的布局容器和视图元素，通过设置属性来控制它们的样式和位置。

以下是一个简单的 XML 布局文件示例，使用 LinearLayout 线性布局容器和几个视图元素构建一个基本的用户界面：

<!-- activity_main.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, Android!"
        android:textSize="24sp"
        android:textStyle="bold" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter your name" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me" />

</LinearLayout>

上述布局文件使用了 LinearLayout 线性布局容器，垂直排列了一个 TextView、一个 EditText 和一个 Button。这样就构建了一个简单的用户界面，显示一个欢迎消息，允许用户输入姓名，并有一个点击按钮。

通过了解和使用不同的布局容器和视图元素，你可以根据需求创建出各种复杂、灵活的 Android 用户界面。

2. activity_main.xml

activity_main.xml 是 Android 应用程序中主活动（Main Activity）的布局文件。它描述了主活动的用户界面的组成和排列。在 Android Studio 中，这个文件通常位于 res/layout 目录下。

主活动的布局文件 activity_main.xml 可以使用 XML 语言来定义应用程序界面的外观和布局。它可以包含各种 UI 元素，例如文本视图、按钮、图像视图等，并通过 XML 标签和属性来配置它们的属性和位置。

以下是一个简单的 activity_main.xml 示例：

<!-- activity_main.xml 示例 -->

<!-- LinearLayout 是一个简单的布局容器，用于垂直排列子视图 -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <!-- 文本视图，显示一个欢迎消息 -->
    <TextView
        android:id="@+id/welcomeTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome to My App!"
        android:textSize="24sp"
        android:textStyle="bold" />

    <!-- 按钮，用于执行某个操作 -->
    <Button
        android:id="@+id/myButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me" />

    <!-- 图像视图，显示一个图片 -->
    <ImageView
        android:id="@+id/myImageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@drawable/my_image" />

</LinearLayout>

在上面的示例中，activity_main.xml 包含了一个 LinearLayout 布局容器，其中垂直排列了一个文本视图、一个按钮和一个图像视图。这个简单的布局展示了一个欢迎消息、一个点击按钮和一个图片视图。

实际的 activity_main.xml 文件内容会根据你的应用程序的需求和功能而有所不同。你可以根据你的具体需求，使用不同的布局容器、视图和属性来构建一个丰富多彩的用户界面。

通过 activity_main.xml 文件，你可以定义主活动的布局，将其与 Java/Kotlin 代码关联起来，从而创建出一个完整的 Android 应用程序界面。

3. 布局容器

3.1 LinearLayout

在 Android 中，LinearLayout 是一个布局容器，用于在屏幕上线性排列子视图，可以按照水平方向或垂直方向进行排列。LinearLayout 在 Android 中常用于简单的界面布局，特别是当需要将子视图依次放置在一行或一列时，LinearLayout 是一种常见且有效的选择。

LinearLayout 有两种排列方向：

1. 垂直方向（vertical）：子视图按照从上到下的顺序垂直排列。
2. 水平方向（horizontal）：子视图按照从左到右的顺序水平排列。

在 LinearLayout 中，可以通过 android:orientation 属性来指定排列方向。属性值可以是 "vertical" 或 "horizontal"。

以下是一个简单的示例，展示了如何使用 LinearLayout：

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3" />

</LinearLayout>

在这个例子中，我们创建了一个垂直方向的 LinearLayout，并在其中放置了三个 Button。这些 Button 会按照从上到下的顺序依次排列在屏幕上。

LinearLayout 还支持一些其他的属性，用于控制子视图的排列方式。例如，android:gravity 属性用于控制子视图在 LinearLayout 中的对齐方式（如左对齐、居中、右对齐），android:layout_weight 属性用于设置子视图的权重，从而实现子视图在 LinearLayout 中的相对比例分配。

虽然 LinearLayout 简单且易于使用，但对于复杂的布局要求，可能需要使用其他布局容器，如 RelativeLayout 或 ConstraintLayout，以便更灵活地实现界面布局。LinearLayout 主要用于一些简单的布局场景，当需要将子视图按照线性方式排列时，LinearLayout 是一个非常实用的布局容器。

3.2 RelativeLayout

在 Android 中，RelativeLayout 是一种布局容器，用于在屏幕上按照相对位置来放置和排列子视图。相对于其他布局容器，如 LinearLayout，RelativeLayout 提供更加灵活的视图组织方式，可以根据视图之间的相对关系来决定它们在屏幕上的位置。

在 RelativeLayout 中，每个子视图可以通过与其他子视图或父视图之间的相对规则来定位。以下是 RelativeLayout 中常用的属性：

1. android:layout_alignParentTop, android:layout_alignParentBottom, android:layout_alignParentLeft, android:layout_alignParentRight: 分别用于将子视图与父视图的顶部、底部、左侧和右侧对齐。
2. android:layout_alignTop, android:layout_alignBottom, android:layout_alignLeft, android:layout_alignRight: 用于将一个子视图的顶部、底部、左侧和右侧与另一个指定子视图的相应边对齐。
3. android:layout_above, android:layout_below: 用于将一个子视图放置在另一个指定子视图的上方或下方。
4. android:layout_toLeftOf, android:layout_toRightOf: 用于将一个子视图放置在另一个指定子视图的左侧或右侧。
5. android:layout_centerInParent: 将子视图放置在父视图的中心位置。
6. android:layout_centerHorizontal, android:layout_centerVertical: 将子视图在水平方向或垂直方向上居中。

除了以上相对规则之外，RelativeLayout 还支持其他一些属性，例如 android:layout_alignBaseline 用于将一个子视图与另一个指定子视图的基线对齐。

下面是一个简单的示例，展示了如何使用 RelativeLayout：

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

    <Button
        android:id="@+id/btnLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Left"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true" />

    <Button
        android:id="@+id/btnRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Right"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true" />

    <TextView
        android:id="@+id/tvCenter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Center"
        android:layout_centerInParent="true" />

</RelativeLayout>

在这个例子中，我们使用 RelativeLayout 定义了三个子视图：两个 Button 和一个 TextView。我们通过相对规则来将它们分别放置在父视图的左侧、右侧和中心位置。每个子视图都指定了与父视图或其他子视图之间的相对关系，使它们在屏幕上按照我们指定的位置进行排列。

RelativeLayout 在 Android 开发中是非常有用的布局容器，可以帮助开发者实现复杂的界面布局和组织视图的方式。对于需要根据视图之间的相对关系来决定位置的界面，RelativeLayout 是一种很好的选择。

3.3 FrameLayout

在 Android 中，FrameLayout 是一个简单的布局容器，用于将子视图堆叠在一起。FrameLayout 在屏幕上的所有子视图都会叠加在同一个位置，而后添加的子视图会盖在之前添加的子视图之上。因此，后添加的子视图会覆盖之前添加的子视图，而不会影响其大小或位置。

FrameLayout 在 Android 开发中有一些常见的用途，例如：

1. 显示单个子视图：FrameLayout 可以用来显示单个子视图，类似于一个容器。
2. 用作容器：FrameLayout 可以将多个子视图叠加在一起，用作容器来显示多个图层或组件。
3. 临时遮罩：FrameLayout 可以用于在界面上创建临时的遮罩，用于显示一些提示、通知或临时内容。

以下是一个简单的示例，展示了如何使用 FrameLayout：

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/image1"
        android:scaleType="centerCrop" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!"
        android:textSize="24sp"
        android:textColor="@android:color/white"
        android:layout_gravity="center" />

</FrameLayout>

在这个例子中，我们使用 FrameLayout 将一个 ImageView 和一个 TextView 叠加在一起。ImageView 显示了一张图片，并使用 android:scaleType="centerCrop" 属性设置图片居中裁剪显示。TextView 显示了一个文本，并使用 android:layout_gravity="center" 属性将文本居中显示在 FrameLayout 中。

由于 FrameLayout 中的子视图堆叠在一起，所以 TextView 会盖在 ImageView 之上，形成一个叠加效果。

需要注意的是，由于 FrameLayout 中的子视图会完全覆盖在一起，所以需要特别注意子视图的大小和位置，以免造成界面元素的遮挡或错位。

FrameLayout 通常用于一些简单的布局需求，例如显示一个单一的视图或临时遮罩。对于复杂的布局需求，可能需要使用其他更灵活的布局容器，如 RelativeLayout 或 ConstraintLayout。

4. Selector 定义不同状态下的样式

在 Android 中，Selector 是一个资源类型，用于定义不同状态下的视图样式。通常用于按钮、列表项等可交互的视图，让它们在不同状态下显示不同的样式，以提供更好的用户反馈和交互体验。

Selector 可以定义多个不同状态下的样式，并根据视图的状态自动选择合适的样式进行显示。常见的视图状态包括：

1. state_pressed：按钮被按下状态。
2. state_focused：视图获得焦点状态。
3. state_enabled：视图可用状态。
4. state_selected：视图被选中状态。
5. state_checked：复选框或单选按钮选中状态。
6. state_activated：视图被激活状态，通常在使用 ViewPager 等滑动控件时会涉及到。

Selector 的资源文件保存在 "res/drawable" 目录下，并以 ".xml" 为后缀名。以下是一个简单的 Selector 示例，展示了在不同状态下，按钮背景和文字颜色的变化：

<!-- res/drawable/button_selector.xml -->

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 按钮被按下时的样式 -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#FF4081" />
            <corners android:radius="8dp" />
        </shape>
        <color android:color="#FFFFFF" />
    </item>
    <!-- 按钮默认样式 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#3F51B5" />
            <corners android:radius="8dp" />
        </shape>
        <color android:color="#FFFFFF" />
    </item>
</selector>

在上述示例中，我们定义了一个 Selector，其中包含两个状态下的样式：按钮被按下时和默认状态。当按钮被按下时，背景颜色为粉红色，文字颜色为白色；默认状态下，背景颜色为蓝色，文字颜色为白色。

然后，在布局文件中将 Selector 应用到按钮上：

<!-- res/layout/activity_main.xml -->

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click Me"
    android:textColor="@drawable/button_selector" />

通过将 Selector 应用到按钮的 android:textColor 属性上，按钮在不同状态下会根据 Selector 定义的样式进行变化。

Selector 是 Android 开发中非常有用的资源类型，它允许开发者定义不同状态下的视图样式，提供更加丰富和直观的用户交互体验。你可以在 Selector 中定义不同的形状、颜色、文本样式等，根据视图的状态自动切换不同的样式，从而使用户界面更具吸引力和互动性。