使用 View 构建 Android 应用

1. 准备工作

简介

至此，您已经全面学习了如何使用 Compose 构建 Android 应用。这非常有用！Compose 是一款可以简化开发流程的强大工具。不过，Android 应用并非总是使用声明性界面构建的。在 Android 应用的历史长河中，Compose 是一款非常新的工具。Android 界面最初是使用 View 构建的。因此，随着您继续从事 Android 开发工作，您很可能会遇到 View。在此 Codelab 中，您将学习与在 Compose 问世之前如何构建 Android 应用相关的基础知识（使用 XML、View、View 绑定和 Fragment）。

前提条件：

• 已完成“Android 之 Compose 开发基础”课程作业的前 7 个单元。

所需条件

• 一台连接到互联网并安装了 Android Studio 的电脑
• 一台设备或模拟器
• Juice Tracker 应用的起始代码

构建内容

在此 Codelab 中，您将完成 Juice Tracker 应用。借助这款应用，您可以构建一个包含详细项的列表，以便跟踪各种重要的果汁。您将添加并修改 Fragment 和 XML，以完成界面和起始代码。具体来说，您将构建用于创建新果汁的条目表单，包括界面和任何相关的逻辑或导航。完成后，您将得到一个包含空列表的应用，您可以向其中添加自己的果汁。

2. 获取起始代码

起始代码网址：

https://github.com/google-developer-training/basic-android-kotlin-compose-training-juice-tracker

包含起始代码的分支名称：views-starter

1. 在 Android Studio 中，打开 basic-android-kotlin-compose-training-juice-tracker 文件夹。
2. 在 Android Studio 中，打开 Juice Tracker 应用代码。

3. 创建布局

使用 Views 构建应用时，您将在布局中构建界面。布局通常使用 XML 进行声明。这些 XML 布局文件位于资源目录中的 res > layout 下。布局包含组成界面的组件；这些组件称为 View。XML 语法由标记、元素和属性组成。如需详细了解 XML 语法，请参阅为 Android 创建 XML 布局 Codelab。

在本部分中，您将为如图所示的 Type of juice 条目对话框构建 XML 布局。

1. 在 main > res > layout 目录中创建一个名为 fragment_entry_dialog 的新布局资源文件。

fragment_entry_dialog.xml 布局包含应用向用户显示的界面组件。

请注意，根元素是 ConstraintLayout。此类布局是一种 ViewGroup，可让您使用约束条件灵活地设置 View 的位置和大小。ViewGroup 是一种 View，其中包含其他 View（称为子 View）。下面的步骤更详细地介绍了这一主题，但如需详细了解 ConstraintLayout，请参阅使用 ConstraintLayout 构建自适应界面。

2. 创建文件后，在 ConstraintLayout 中定义应用名称空间。

fragment_entry_dialog.xml

<androidx.constraintlayout.widget.ConstraintLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
</androidx.constraintlayout.widget.ConstraintLayout>

3. 将以下准则添加到 ConstraintLayout 中。

fragment_entry_dialog.xml

<androidx.constraintlayout.widget.Guideline
   android:id="@+id/guideline_left"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   app:layout_constraintGuide_begin="16dp" />
<androidx.constraintlayout.widget.Guideline
   android:id="@+id/guideline_middle"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   app:layout_constraintGuide_percent="0.5" />
<androidx.constraintlayout.widget.Guideline
   android:id="@+id/guideline_top"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
   app:layout_constraintGuide_begin="16dp" />

这些 Guideline 将用作其他 View 的内边距。这些准则将约束 Type of juice 标题文本。

4. 创建一个 TextView 元素。此 TextView 表示详情 fragment 的标题。

5. 将 TextView 的 id 设置为 header_title。
6. 将 layout_width 设置为 0dp。布局约束条件最终定义此 TextView 的宽度。因此，定义宽度只会在绘制界面时增加不必要的计算；定义 0dp 的宽度可以避免额外的计算。
7. 将 TextView text 属性设置为 @string/juice_type。
8. 将 textAppearance 设置为 @style/TextAppearance.MaterialComponents.Headline5。

fragment_entry_dialog.xml

<TextView
   android:id="@+id/header_title"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:text="@string/juice_type"
   android:textAppearance="@style/TextAppearance.MaterialComponents.Headline5" />

最后，您需要定义约束条件。与使用维度作为约束条件的 Guideline 不同，这些准则本身就能约束此 TextView。为了实现此结果，您可以引用要用来约束 View 的 Guideline 的 ID。

9. 将标题顶部约束为 guideline_top 的底部。

fragment_entry_dialog.xml

<TextView
   android:id="@+id/header_title"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:text="@string/juice_type"
   android:textAppearance="@style/TextAppearance.MaterialComponents.Headline5"
   app:layout_constraintTop_toBottomOf="@+id/guideline_top" />

10. 将结束位置约束为 guideline_middle 的起始位置，并将其起始位置约束为 guideline_left 的起始位置，以完成 TextView 的放置。请注意，给定 View 的约束方式完全取决于您预期的界面外观。

fragment_entry_dialog.xml

<TextView
   android:id="@+id/header_title"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:text="@string/juice_type"
   android:textAppearance="@style/TextAppearance.MaterialComponents.Headline5"
   app:layout_constraintTop_toBottomOf="@+id/guideline_top"
   app:layout_constraintEnd_toStartOf="@+id/guideline_middle"
   app:layout_constraintStart_toStartOf="@+id/guideline_left" />

尝试根据屏幕截图构建界面的其余部分。您可以在解决方案中找到完整的 fragment_entry_dialog.xml 文件。

4. 创建包含 View 的 Fragment

在 Compose 中，您可以使用 Kotlin 或 Java 以声明方式构建布局。通过导航到不同的可组合项（通常在同一 activity 中），您可以访问不同的“界面”。使用 View 构建应用时，托管 XML 布局的 Fragment 将取代可组合项“界面”的概念。

在本部分中，您将创建一个 Fragment 来托管 fragment_entry_dialog 布局并向界面提供数据。

1. 在 juicetracker 软件包中，新建一个名为 EntryDialogFragment 的类。
2. 使 EntryDialogFragment 扩展 BottomSheetDialogFragment。

EntryDialogFragment.kt

import com.google.android.material.bottomsheet.BottomSheetDialogFragment

class EntryDialogFragment : BottomSheetDialogFragment() {
}

DialogFragment 是用于显示浮动对话框的 Fragment。BottomSheetDialogFragment 继承自 DialogFragment 类，但其会显示与固定在屏幕底部的界面等宽的工作表。这种方法与上图中的设计相符。

3. 重新构建项目，这会使系统自动生成基于 fragment_entry_dialog 的 View 绑定文件。通过 View 绑定，您可以访问 XML 声明的 View 并与之互动。如需了解详情，请参阅 View 绑定文档。
4. 在 EntryDialogFragment 类中，实现 onCreateView() 函数。顾名思义，此函数将为该 Fragment 创建 View。

注意：与 Activity 类似，Fragment 也具有不同的生命周期状态以及对应的生命周期方法。

EntryDialogFragment.kt

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

override fun onCreateView(
   inflater: LayoutInflater,
   container: ViewGroup?,
   savedInstanceState: Bundle?
): View? {
   return super.onCreateView(inflater, container, savedInstanceState)
}

onCreateView() 函数会返回 View，但目前它不会返回有用的 View。

5. 返回通过膨胀 FragmentEntryDialogViewBinding 生成的 View（而非返回 super.onCreateView()）。

EntryDialogFragment.kt

import com.example.juicetracker.databinding.FragmentEntryDialogBinding

override fun onCreateView(
   inflater: LayoutInflater,
   container: ViewGroup?,
   savedInstanceState: Bundle?
): View? {
   return FragmentEntryDialogBinding.inflate(inflater, container, false).root
}

6. 在 onCreateView() 函数之外（但在 EntryDialogFragment 类内），创建 EntryViewModel 的实例。
7. 实现 onViewCreated() 函数。

膨胀 View 绑定后，您可以访问和修改布局中的 View。系统会在生命周期中的 onCreateView() 之后调用 onViewCreated() 方法。建议您使用 onViewCreated() 方法在布局中访问和修改 View。

8. 对 FragmentEntryDialogBinding 调用 bind() 方法，以创建 View 绑定的实例。

此时，您的代码应如以下示例所示：

EntryDialogFragment.kt

import androidx.fragment.app.viewModels
import com.example.juicetracker.ui.AppViewModelProvider
import com.example.juicetracker.ui.EntryViewModel

class EntryDialogFragment : BottomSheetDialogFragment() {

   private val entryViewModel by viewModels<EntryViewModel> { AppViewModelProvider.Factory }

   override fun onCreateView(
       inflater: LayoutInflater,
       container: ViewGroup?,
       savedInstanceState: Bundle?
   ): View {
       return FragmentEntryDialogBinding.inflate(inflater, container, false).root
   }

   override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        val binding = FragmentEntryDialogBinding.bind(view)
    }
}

您可以通过绑定访问和设置 View。例如，您可以通过 setText() 方法设置 TextView。

binding.name.setText("Apple juice")

注意：为简单起见，在上面的示例中使用了硬编码字符串 Apple juice。在生产环境中，应使用字符串资源。

条目对话框界面是供用户新建项的地方，但您也可以使用它来修改现有项。因此，Fragment 需要检索被点击的项。Navigation 组件有助于导航到 EntryDialogFragment 并检索被点击的项。

EntryDialogFragment 尚未完成，但不用担心！现在，请继续学习下一部分，详细了解如何在包含 View 的应用中使用 Navigation 组件。

5. 修改 Navigation 组件

在本部分中，您将使用 Navigation 组件启动条目对话框并检索某个项（如果适用）。

Compose 让您只需进行调用即可呈现不同的可组合项。不过，Fragment 的运作方式有所不同。Navigation 组件会协调 Fragment“目的地”，从而方便在不同 Fragment 及其包含的 View 之间移动。

使用 Navigation 组件协调导航到您的 EntryDialogFragment。

1. 打开 nav_graph.xml 文件，并确保已选择 Design 标签页。
2. 点击 图标以添加新的目的地。

3. 选择 EntryDialogFragment 目的地。此操作将在导航图中声明 entryDialogFragment，使其可供导航操作访问。

注意：entryDialogFragment 屏幕可能会显示在 nav_graph.xml 显示屏中的随机位置。您可以拖动目的地，让显示屏更加井然有序。

您需要从 TrackerFragment 启动 EntryDialogFragment。因此，导航操作需要完成此任务。

4. 将光标拖动到 trackerFragment 上方。选择灰点，然后将线条拖动到 entryDialogFragment。
5. 借助 nav_graph Design 视图，您可以通过以下方式声明目的地参数：选择相应目的地，然后点击 Arguments 下拉菜单旁边的 图标。使用此功能将类型为 Long 的 itemId 参数添加到 entryDialogFragment；默认值应为 0L。

请注意，TrackerFragment 包含 Juice 项列表。如果您点击其中一个项，EntryDialogFragment 就会启动。

6. 重新构建项目。现在可以在 EntryDialogFragment 中访问 itemId 参数了。

6. 完成 Fragment

使用导航参数中的数据，完成条目对话框。

1. 在 EntryDialogFragment 的 onViewCreated() 方法中检索 navArgs()。
2. 从 navArgs() 检索 itemId。
3. 实现 saveButton 以使用 ViewModel 保存新的/经过修改的果汁。

回想一下默认颜色值为 red 的条目对话框界面。目前，将其作为占位符进行传递。

调用 saveJuice() 时，从参数中传递项 ID。

EntryDialogFragment.kt

import androidx.navigation.fragment.navArgs
import com.example.juicetracker.data.JuiceColor

class EntryDialogFragment : BottomSheetDialogFragment() {

   //...
   var selectedColor: JuiceColor = JuiceColor.Red

   override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        val binding = FragmentEntryDialogBinding.bind(view)
        val args: EntryDialogFragmentArgs by navArgs()
        val juiceId = args.itemId

        binding.saveButton.setOnClickListener {
           entryViewModel.saveJuice(
               juiceId,
               binding.name.text.toString(),
               binding.description.text.toString(),
               selectedColor.name,
               binding.ratingBar.rating.toInt()
           )
        }
    }
}

4. 保存数据后，使用 dismiss() 方法关闭对话框。

EntryDialogFragment.kt

class EntryDialogFragment : BottomSheetDialogFragment() {

    //...
    var selectedColor: JuiceColor = JuiceColor.Red
    //...

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        val binding = FragmentEntryDialogBinding.bind(view)
        val args: EntryDialogFragmentArgs by navArgs()
        binding.saveButton.setOnClickListener {
           entryViewModel.saveJuice(
               juiceId,
               binding.name.text.toString(),
               binding.description.text.toString(),
               selectedColor.name,
               binding.ratingBar.rating.toInt()
           )
           dismiss()
        }
    }
}

请注意，上述代码无法完成 EntryDialogFragment。您仍然需要实现诸多操作，例如使用现有 Juice 数据填充字段（如果适用）、从 colorSpinner 中选择颜色、实现 cancelButton，等等。不过，此代码不是 Fragment 独有的，您可以自行实现此代码。尝试实现其余功能。万不得已时，您可以参考此 Codelab 的解决方案代码。

7. 启动条目对话框

最后一个任务是使用 Navigation 组件启动条目对话框。当用户点击悬浮操作按钮 (FAB) 时，条目对话框必须启动。此外，当用户点击某个项时，它也必须启动并传递相应 ID。

1. 在 FAB 的 onClickListener() 中，对导航控制器调用 navigate()。

TrackerFragment.kt

import androidx.navigation.findNavController

//...

binding.fab.setOnClickListener { fabView ->
   fabView.findNavController().navigate(
   )
}

//...

2. 在导航函数中，传递从跟踪器导航到条目对话框的操作。

TrackerFragment.kt

//...

binding.fab.setOnClickListener { fabView ->
   fabView.findNavController().navigate(
TrackerFragmentDirections.actionTrackerFragmentToEntryDialogFragment()
   )
}

//...

3. 在 lambda 正文中为 JuiceListAdapter 中的 onEdit() 方法重复此操作，但这次要传递 Juice 的 id。

TrackerFragment.kt

//...

onEdit = { drink ->
   findNavController().navigate(
       TrackerFragmentDirections.actionTrackerFragmentToEntryDialogFragment(drink.id)
   )
},

//...

8. 获取解决方案代码

如需下载完成后的 Codelab 代码，您可以使用以下 Git 命令：

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-juice-tracker.git
$ cd basic-android-kotlin-compose-training-juice-tracker
$ git checkout views

或者，您也可以下载 ZIP 文件形式的代码库，将其解压缩并在 Android Studio 中打开。

下载 ZIP 文件

注意：解决方案代码位于所下载代码库的 views 分支中。

如果您想查看解决方案代码，请前往 GitHub 查看。