Android Kotlin 基础知识 02.2：添加用户交互

此 Codelab 是“Android Kotlin 基础知识”课程的一部分。如果您按顺序学习这些 Codelab，您将会充分发掘此课程的价值。“Android Kotlin 基础知识”Codelab 着陆页列出了所有课程 Codelab。

这些 Codelab 是“Android Kotlin 基础知识”课程的一部分。如果您按顺序学习这些 Codelab，您将会充分发掘此课程的价值。

本系列课程的 Codelab 包括：

• 2.1 使用布局编辑器进行线性布局
• 2.2 添加用户交互
• 2.3 使用布局编辑器约束布局
• 2.4 数据绑定基础知识

您应当已掌握的内容

• 使用 Kotlin 创建基本的 Android 应用。
• 在模拟器或设备上运行 Android 应用。
• 使用 Android Studio 的布局编辑器创建线性布局。
• 创建一个简单的应用，该应用使用 LinearLayout、TextView、ScrollView 和一个带有点击处理程序的按钮。

学习内容

• 如何使用 EditText 视图获取用户输入。
• 如何使用 EditText 视图中的文本将文本设置为 TextView 视图。
• 如何使用 View 和 ViewGroup。
• 如何更改 View 的可见性。

您将执行的操作

• 为来自上一个 Codelab 的 AboutMe 应用添加互动功能。
• 添加 EditText 以便用户输入文本。
• 添加 Button 并实现其点击处理程序。

在此 Codelab 中，您将扩展 AboutMe 应用以添加用户互动。您可以添加昵称字段、完成按钮和用于显示昵称的文本视图。用户输入昵称并点按完成按钮后，文本视图便会更新，以显示输入的昵称。用户可以点按文本视图，再次更新昵称。

在此任务中，您将添加一个 EditText 输入字段，以允许用户输入别名。

第 1 步：开始使用

1. 如果您还没有上一个 Codelab 中的 AboutMe 应用，请下载起始代码 AboutMeInteractive-Starter。该代码与您在上一个 Codelab 中完成的代码相同。
2. 在 Android Studio 中打开 AboutMeInteractive-Starter 项目。
3. 运行应用。您会看到名称文本视图、星形图片和长滚动文本的滚动视图。
   
   
   
   请注意，用户无法更改任何文本。

如果用户能够与应用互动（例如，用户可以输入文本），应用会更有趣。为了接受文本输入，Android 提供了一个名为编辑文本的界面 (UI) 微件。您可以使用 TextView 的子类 EditText 定义修改文本。通过编辑文本，用户可以输入和修改文本输入，如以下屏幕截图所示。

第 2 步：添加 EditText

1. 在 Android Studio 中，打开 Design 标签页中的 activity_main.xml 布局文件。
2. 在 Palette 窗格中，点击 Text。
   
   
   
   Ab TextView 是一个 TextView，显示在 Palette 窗格中文本元素列表的顶部。Ab TextView 下方是多个 EditText 视图。
   
   请注意，在 Palette 窗格中，TextView 的图标如何显示字母 Ab，并且没有下划线。不过，EditText 图标会显示下划线“Ab”。下划线表示视图是可修改的。
   
   对于每个 EditText 视图，Android 会设置不同的属性，并且系统会显示相应的软输入法（例如屏幕键盘）。
3. 将 PlainText 编辑文本拖动到 Component Tree 中，并将其放置在 name_text 下方和 star_image 的上方。
   
   
   
4. 使用 Attributes 窗格在 EditText 视图中设置以下属性。

特性	值
id	nickname_edit
layout_width	match_parent（默认）
layout_height	wrap_content（默认）

5. 运行应用。在星标图片上方，您会看到包含默认文字“名称”的修改文字。
   
   
   

在此任务中，您将通过添加提示、更改文本对齐方式、将样式更改为 NameStyle 以及设置输入类型来设置 EditText 视图的样式。

第 1 步：添加提示文本

1. 在 string.xml 文件中为提示添加新的字符串资源。

<string name="what_is_your_nickname">What is your Nickname?</string>

提示：建议在每个 EditText 视图中显示提示，以帮助用户了解可修改字段的输入内容。

2. 使用属性窗格将以下属性设置为 EditText 视图：

特性	值
style	NameStyle
textAlignment	（中间）
hint	@string/what_is_your_nickname

3. 在 Attributes 窗格中，从 text 属性中移除 Name 值。text 属性值必须为空才能显示提示。

第 2 步：设置 inputType 属性

inputType 属性用于指定用户可以在 EditText 视图中输入的输入类型。Android 系统会根据设置的输入类型显示相应的输入字段和屏幕键盘。

要查看所有可能的输入类型，请在 Attributes 窗格中点击 inputType 字段，或者点击字段旁边的三个点 ...。系统会打开一个列表，显示您可以使用的所有输入类型，同时已选中当前有效的输入类型。您可以选择多个输入类型。

例如，对于密码，请使用 textPassword 值。文本字段会隐藏用户输入。

对于电话号码，请使用 phone 值。系统会显示数字键盘，并且用户只能输入数字。

设置昵称字段的输入类型：

1. 将 nickname_edit 编辑文本的 inputType 属性设置为 textPersonName。
2. 在 Component Tree 窗格中，请注意 autoFillHints 警告。此警告不适用于此应用，并且不在此 Codelab 的范围内，因此您可以忽略它。（如果您想详细了解自动填充功能，请参阅针对自动填充优化应用。）
   
3. 在 Attributes 窗格中，验证 EditText 视图的以下属性的值：

属性	值
id	nickname_edit
layout_width	match_parent（默认）
layout_height	wrap_content（默认）
style	@style/NameStyle
inputType	textPersonName
hint	"@string/what_is_your_nickname"
text	（空）

Button 是用户可以点按来执行操作的界面元素。按钮可以包含文本和/或图标。

在此任务中，您将添加一个完成按钮，用户在输入别名后会点按该按钮。该按钮将 EditText 视图与显示昵称的 TextView 视图互换。如需更新昵称，用户可以点按 TextView 视图。

第 1 步：添加“完成”按钮

1. 将 Palette 窗格中的按钮拖到 Component Tree 中。将按钮放在 nickname_edit 修改文字下方。
   
   
2. 创建名为 done 的新字符串资源。将字符串的值设为 Done；

<string name="done">Done</string>

3. 使用 Attributes 窗格在新添加的 Button 视图中设置以下属性：

特性	值
id	done_button
text	@string/done
layout_gravity	center_horizontal
layout_width	wrap_content

layout_gravity 属性将该视图居中放置在父级布局 LinearLayout 中。

4. 将样式更改为 Widget.AppCompat.Button.Colored，这是 Android 提供的预定义样式之一。您可以从下拉菜单或 Resources 窗口中选择样式。
   
   
   
   此样式会将按钮颜色更改为强调色 colorAccent。强调色在 res/values/colors.xml 文件中定义。
   
   
   

colors.xml 文件包含应用的默认颜色。您可以添加新的颜色资源，或根据应用的要求更改项目中现有的颜色资源。

示例 colors.xml 文件：

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#008577</color>
   <color name="colorPrimaryDark">#00574B</color>
   <color name="colorAccent">#D81B60</color>
</resources>

第 2 步：设置“完成”按钮的样式

1. 在 Attributes 窗格中，选择 Layout_Margin > Top 以添加上外边距。将上外边距设置为 dimens.xml 文件中定义的 layout_margin。
   
   
   
2. 将 fontFamily 属性设为 roboto 的下拉菜单。
   
   
   
3. 切换到 Text 标签页，然后验证为新添加的按钮生成的 XML 代码。
   

<Button
   android:id="@+id/done_button"
   style="@style/Widget.AppCompat.Button.Colored"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="@dimen/layout_margin"
   android:fontFamily="@font/roboto"
   android:text="@string/done" />

第 3 步：更改颜色资源

在此步骤中，您将更改按钮的强调色，使其与 activity 的应用栏保持一致。

1. 打开 res/values/colors.xml 并将 colorAccent 的值更改为 #76bf5e。
   

<color name="colorAccent">#76bf5e</color>

您可以在文件编辑器的左侧空白处看到与十六进制代码对应的颜色。

请注意设计编辑器中按钮颜色的变化。

2. 运行您的应用。您应该会在编辑文本下方看到样式化的完成按钮。
   
   
   

用户输入别名并点按完成按钮后，别名会显示在 TextView 视图中。在此任务中，您将添加彩色背景的文本视图。文本视图会在 star_image 上方显示用户的昵称。

第 1 步：为昵称添加 TextView

1. 将 Palette 窗格中的文本视图拖动到 Component Tree。将文本视图放置在 done_button 下方和 star_image 上方。
   
   

2. 使用 Attributes 窗格为新的 TextView 视图设置以下属性：

特性	值
id	nickname_text
style	NameStyle
textAlignment	（中间）

第 2 步：更改 TextView 的可见性

您可以使用 visibility 属性在应用中显示或隐藏视图。此属性采用以下三个值之一：

• visible：视图可见。
• Invisible：隐藏视图，但视图仍会占用布局中的空间。
• gone：隐藏视图，视图不会占用布局中的任何空间。

1. 在 Attributes 窗格中，将 nickname_text 文本视图的 visibility 设置为 gone，因为您不希望应用首先显示此文本视图。
   
   
   
   请注意，在 Attributes 窗格中更改属性时，nickname_text 视图会从设计编辑器中消失。布局预览中隐藏了该视图。
2. 将 nickname_text 视图的 text 属性值更改为空字符串。

您为此 TextView 生成的 XML 代码应如下所示：

<TextView
   android:id="@+id/nickname_text"
   style="@style/NameStyle"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:textAlignment="center"
   android:visibility="gone"
   android:text="" />

您的布局预览应如下所示：

Button 对象（或任何视图）上的点击处理程序指定在按钮（视图）被点按时执行的操作。处理点击事件的函数应在使用按钮（视图）托管布局的 Activity 中实现。

点击监听器通常具有此格式，其中传入的视图是接收点击或点按的视图。

private fun clickHandlerFunction(viewThatIsClicked: View) {
// Add code to perform the button click event
}

您可以通过以下两种方式将点击监听器函数附加到按钮点击事件中：

• 在 XML 布局中，您可以向 <Button> 元素添加 android:onClick 属性。例如：

<Button
   android:id="@+id/done_button"
   android:text="@string/done"
   ...
   android:onClick="clickHandlerFunction"/>

OR

• 您可以调用 setOnClickListener，在运行时在 Activity 的 onCreate() 中以编程方式执行此操作。例如：

myButton.setOnClickListener {
   clickHanderFunction(it)
}

在此任务中，您将以编程方式为 done_button 添加点击监听器。您可以在相应的 Activity 中添加点击监听器，即 MainActivity.kt。

您的点击监听器函数 addNickname 将执行以下操作：

• 获取 nickname_edit 编辑文本中的文本。
• 在 nickname_text 文本视图中设置文本。
• 隐藏编辑文本和按钮。
• 显示别名 TextView。

第 1 步：添加点击监听器

1. 在 Android Studio 的 java 文件夹中，打开 MainActivity.kt 文件。
2. 在 MainActivity.kt 中的 MainActivity 类内，添加一个名为 addNickname 的函数。添加一个名为 view 且类型为 View 的输入参数。view 参数是调用函数的 View 位置。在这种情况下，view 将是 DONE 按钮的实例。

private fun addNickname(view: View) {
}

3. 在 addNickname 函数内，使用 findViewById() 获取对 nickname_edit 编辑文本和 nickname_text 文本视图的引用。

val editText = findViewById<EditText>(R.id.nickname_edit)
val nicknameTextView = findViewById<TextView>(R.id.nickname_text)

4. 将 nicknameTextView 文本视图中的文本设置为用户在 editText 中输入的文本，即从 text 属性中获取文本。

nicknameTextView.text = editText.text

5. 通过将 editText 的 visibility 属性设置为 View.GONE，隐藏别名 EditText 视图。

在上一个任务中，您使用布局编辑器更改了 visibility 属性。此处，您以编程方式执行相同操作。

editText.visibility = View.GONE

6. 通过将 visibility 属性设置为 View.GONE，隐藏完成按钮。您已经将按钮的引用作为函数的输入参数 view。

view.visibility = View.GONE

7. 在 addNickname 函数的末尾，通过将其 visibility 属性设置为 View.VISIBLE，使别名 TextView 视图可见。

nicknameTextView.visibility = View.VISIBLE

第 2 步：将点击监听器附加到“完成”按钮

现在，您已获得一个函数，可定义点按 DONE 按钮时要执行的操作，接下来需要将该函数附加到 Button 视图中。

1. 在 MainActivity.kt 中的 onCreate() 函数末尾，获取对 DONE Button 视图的引用。使用 findViewById() 函数并调用 setOnClickListener。传入对点击监听器函数 addNickname() 的引用。

findViewById<Button>(R.id.done_button).setOnClickListener {
            addNickname(it)
        }

在上述代码中，it 是指 done_button，即作为参数传递的视图。

2. 运行您的应用，输入昵称，然后点按完成按钮。请注意，编辑文本和按钮将替换为昵称文本视图。

请注意，即使在用户点按 DONE 按钮后，键盘也仍然可见。这是默认行为。

第 3 步：隐藏键盘

在此步骤中，您将添加代码，以在用户点按 DONE 按钮后隐藏键盘。

1. 在 MainActivity.kt 中的 addNickname() 函数末尾，添加以下代码。如果您想详细了解此代码的运作方式，请参阅 hideSoftInputFromWindow 文档。

// Hide the keyboard.
val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)

2. 再次运行应用。请注意，在您点按完成后，键盘会处于隐藏状态。

用户无法在点按完成按钮后更改昵称。在下一个任务中，您将使应用更具互动性并添加功能，以便用户更新昵称。

在此任务中，您将为昵称文本视图添加点击监听器。点击监听器会隐藏昵称文本视图，并显示编辑文本，并显示 DONE 按钮。

第 1 步：添加点击监听器

1. 在 MainActivity 中，为昵称文本视图添加名为 updateNickname(view: View) 的点击监听器函数。

private fun updateNickname (view: View) {
}

2. 在 updateNickname 函数内，获取对 nickname_edit 修改文本的引用，并获取对 DONE 按钮的引用。为此，请使用 findViewById() 方法。

val editText = findViewById<EditText>(R.id.nickname_edit)
val doneButton = findViewById<Button>(R.id.done_button)

3. 在 updateNickname 函数的末尾，添加代码以显示编辑文本，显示完成按钮，以及隐藏文本视图。

editText.visibility = View.VISIBLE
doneButton.visibility = View.VISIBLE
view.visibility = View.GONE

4. 在 MainActivity.kt 中的 onCreate() 函数末尾，对 nickname_text 文本视图调用 setOnClickListener。传入对点击监听器函数（即 updateNickname()）的引用。

findViewById<TextView>(R.id.nickname_text).setOnClickListener {
   updateNickname(it)
}

5. 运行您的应用。输入昵称，点按完成按钮，然后点按昵称 TextView 视图。别名视图消失，并显示编辑文本和完成按钮。
   
   
   

请注意，默认情况下，EditText 视图未聚焦，并且键盘不可见。用户很难判断昵称文本视图是否可点击。在下一个任务中，您将为昵称文本视图添加焦点和样式。

第 2 步：将焦点转到 EditText 视图并显示键盘

1. 在 updateNickname 函数的末尾，将焦点设置为 EditText 视图。使用 requestFocus() 方法。

// Set the focus to the edit text.
editText.requestFocus()

2. 在 updateNickname 函数的末尾，添加代码以使键盘可见。

// Show the keyboard.
val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
imm.showSoftInput(editText, 0)

第 3 步：为昵称 TextView 视图添加背景颜色

1. 将 nickname_text 文本视图的背景颜色设置为 @color/colorAccent，并添加 @dimen/small_padding 的底部内边距。这些更改将作为提示，提醒用户昵称文本视图可点击。

android:background="@color/colorAccent"
android:paddingBottom="@dimen/small_padding"

2. 运行您的最终应用。编辑文本具有焦点，昵称显示在编辑文本中，昵称文本视图设置了样式。

现在，向朋友展示您的交互式“Meme”应用！

Android Studio 项目：AboutMeInteractive

• Android Studio 中的布局编辑器工具是一款视觉设计编辑器。您可以使用布局编辑器构建应用布局，只需将界面元素拖动到布局中即可。
• EditText 是一个界面元素，可让用户输入和修改文本。
• Button 是用户可以点按来执行操作的界面元素。按钮可以包含文本和/或图标。

点击监听器

• 您可以通过向 View 添加点击监听器来使其获得点按响应。
• 定义点击监听器的函数会收到所点击的 View。

您可以通过以下两种方式之一将点击监听器函数附加到 View：

• 在 XML 布局中，将 android:onClick 属性添加到 <View> 元素中。
• 以编程方式使用相应 Activity 中的 setOnClickListener(View.OnClickListener) 函数。

Udacity 课程：

• 使用 Kotlin 开发 Android 应用

Android 开发者文档：

• 使用布局编辑器构建界面
• Button
• EditText
• 输入类型
• 处理键盘输入
• 样式和主题

此部分列出了在由讲师主导的课程中，学生学习此 Codelab 后可能需要完成的家庭作业。讲师自行决定是否执行以下操作：

• 根据需要布置作业。
• 告知学生如何提交家庭作业。
• 给家庭作业评分。

讲师可以酌情采纳这些建议，并且可以自由布置自己认为合适的任何其他家庭作业。

如果您是在自学此 Codelab，可随时通过这些家庭作业来检测您的知识掌握情况。

回答以下问题

问题 1

什么是 EditText 的子类？

• View
• LinearLayout
• TextView
• Button

问题 2

在视图上设置以下哪个 visibility 属性值时，会使视图隐藏且不会占用布局中的任何空间？

• visible
• Invisible
• gone
• hide

问题 3

对于 EditText 视图，最好不要提供提示，因为提示会让输入字段太过杂乱。判断正误。

• 正确
• 错误

问题 4

在以下关于 Button 视图的表述中，哪一项是正确的？

• Button 视图是一个视图组。
• 每个屏幕最多只能有三个 Button 视图。
• Button 视图是可点击的，用户点击它后，附加的点击监听器会执行操作。
• Button 是 ImageView 的扩展。

开始学习下一课：2.3: 使用布局编辑器约束布局

如需本课程中其他 Codelab 的链接，请参阅“Android Kotlin 基础知识”Codelab 着陆页。