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 应用以添加用户互动功能。您添加了一个昵称字段、一个完成按钮和一个用于显示昵称的文本视图。用户输入昵称并点按 DONE 按钮后，文本视图会更新以显示输入的昵称。用户可以点按文本视图再次更新昵称。

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

第 1 步：开始使用

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

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

第 2 步：添加 EditText

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

如需查看所有可能的输入类型，请在属性窗格中点击 inputType 字段，或点击该字段旁边的三点状图标 ...。系统会打开一个列表，其中显示您可以使用的所有输入类型，并勾选当前有效的输入类型。您可以选择多个输入源类型。

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

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

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

1. 将 nickname_edit 编辑文本的 inputType 属性设置为 textPersonName。
2. 在 Component Tree 窗格中，您会看到 autoFillHints 警告。此警告不适用于此应用，并且超出了本 Codelab 的范围，因此您可以忽略它。（如果您想详细了解自动填充，请参阅针对自动填充优化应用。）
   
3. 在属性 窗格中，验证 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 是一种界面元素，用户可以通过点按该元素来执行操作。按钮可以包含文字、图标，也可以同时包含文字和图标。

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

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

1. 将按钮从 Palette 窗格拖动到 Component Tree 中。将按钮放置在 nickname_edit 编辑文本下方。
   
   
2. 创建一个名为 done 的新字符串资源。将字符串的值设为 Done，

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

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

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

layout_gravity 属性可将视图在其父级布局 LinearLayout 中居中。

4. 将样式更改为 Widget.AppCompat.Button.Colored，这是 Android 提供的一种预定义样式。您可以从下拉菜单或资源窗口中选择样式。
   
   
   
   此样式会将按钮颜色更改为强调色 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. 在属性窗格中，依次选择 Layout_Margin > Top，添加上边距。将上边距设置为 layout_margin，该值在 dimens.xml 文件中定义。
   
   
   
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. 运行应用。您应该会在编辑文本下方看到一个样式化的 DONE 按钮。
   
   
   

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

第 1 步：为昵称添加 TextView

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

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

属性	值
id	nickname_text
style	NameStyle
textAlignment	（居中）

第 2 步：更改 TextView 的可见性

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

• visible：视图处于可见状态。
• Invisible：隐藏视图，但视图仍会占用布局中的空间。
• gone：隐藏视图，并且该视图不会占用布局中的任何空间。

1. 在属性窗格中，将 nickname_text 文本视图的 visibility 设置为 gone，因为您不希望应用一开始就显示此文本视图。
   
   
   
   请注意，当您在属性窗格中更改属性时，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 布局中，您可以将 android:onClick 属性添加到 <Button> 元素。例如：

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

或

• 您可以在运行时通过编程方式在 Activity 的 onCreate() 中调用 setOnClickListener 来实现此目的。例如：

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 将是完成按钮的实例。

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 函数的末尾，通过将昵称 TextView 视图的 visibility 属性设置为 View.VISIBLE，使该视图可见。

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 按钮。请注意，编辑文本和按钮如何被昵称文本视图替换。

请注意，即使在用户点按 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. 再次运行应用。请注意，点按完成后，键盘会隐藏起来。

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

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

第 1 步：添加点击监听器

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

private fun updateNickname (view: View) {
}

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

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

3. 在 updateNickname 函数的末尾，添加代码以显示 EditText、显示完成按钮并隐藏 TextView。

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. 运行最终应用。编辑文本具有焦点，昵称显示在编辑文本中，并且昵称文本视图已设置样式。

现在，去向朋友展示您的互动式 AboutMe 应用吧！

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 视图，最好不要提供提示，因为提示会让输入字段太过杂乱。判断正误。

• True
• 错误

问题 4

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

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

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

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