Android Kotlin 基础知识 02.1：使用布局编辑器进行线性布局

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

您应当已掌握的内容

• 使用 Kotlin 创建基本 Android 应用。
• 在模拟器或设备上运行 Android 应用。
• LinearLayout 的基础知识。
• 创建使用 LinearLayout 和 TextView 的简单应用。

学习内容

• 如何使用 View 和 ViewGroup。
• 如何使用 LinearLayout. 在 Activity 中排列视图
• 如何使用 ScrollView 显示可滚动的内容。
• 如何更改 View 的公开范围。
• 如何创建和使用字符串资源和尺寸资源。
• 如何使用 Android Studio 的布局编辑器创建线性布局。

您将执行的操作

• 创建 AboutMe 应用。
• 向布局添加 TextView 以显示您的姓名。
• 添加了 ImageView.
• 添加 ScrollView 以显示可滚动的文本。

在 AboutMe 应用中，您可以展示关于自己的趣事，也可以为朋友、家人或宠物自定义应用。此应用显示了名称、完成按钮、星形图片和一些可滚动的文本。

在此任务中，您将创建 AboutMe Android Studio 项目。

1. 打开 Android Studio（如果尚未打开）。
2. 如果 Android Studio 中已打开项目，请依次选择 File > New > New Project。
   
   
   
3. 如果尚未打开项目，请在 Welcome to Android Studio 对话框中选择 + Start a new Android Studio project。
   
   
   
4. 在 Create New Project 对话框的 Phone and Tablet 标签页中，选择 Empty Activity 模板。点击下一步。
   
   
   
5. 在下一个创建新项目对话框中，设置以下参数，然后点击完成。
   

属性	值
应用名称	AboutMe
公司名称 android	com.android.example.AboutMe （或您自己的网域）
保存位置	保留默认位置，或将其更改为您首选的目录。
语言	Kotlin
最低 API 级别	API 19：Android 4.4 (KitKat)
此项目将支持免安装应用	请勿选中此复选框。
使用 AndroidX 制品	选中此复选框。

Android Studio 需要片刻时间来生成项目文件。

6. 运行您的应用。您会在空白屏幕上看到字符串“Hello World”。
   

Empty Activity 模板会创建一个空的 activity，即 Mainactivity.kt。该模板还会创建一个名为 activity_main.xml 的布局文件。布局文件的根 ViewGroup 为 ConstraintLayout，并且其内容为单个 TextView。

在此任务中，您将生成的根 ViewGroup 更改为 LinearLayout。您还可以垂直排列界面元素。

查看组

ViewGroup 是一种可以包含子视图（即其他视图和视图组）的视图。构成布局的视图以视图层次结构的形式进行组织，其中视图组是根。

在 LinearLayout 视图组中，界面元素以水平或垂直方式排列。

更改根布局，使其使用 LinearLayout 视图组：

1. 选择 Project > Android 窗格。在 app/res/layout 文件夹中，打开 activity_main.xml 文件。
2. 选择 Text 标签页，然后将根视图组从 ConstraintLayout 更改为 LinearLayout。
3. 移除 TextView。在 LinearLayout 元素中，添加 android:orientation 属性并将其设置为 vertical。

Before:

<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:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

之后：

<LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       tools:context=".MainActivity">

</LinearLayout>

布局编辑器是 Android Studio 中的一种可视化设计工具。您可以使用布局编辑器将界面元素拖动到设计编辑器中，而不是手动编写 XML 代码来构建应用的布局。

如需查看布局编辑器，请点击 Design 标签页。以下屏幕截图显示了布局编辑器的各个部分。

设计编辑器：在设计视图和/或蓝图视图中直观地显示屏幕布局。设计编辑器是布局编辑器的主要部分。

工具栏： 提供了一些按钮，用于在设计编辑器中配置布局的外观，以及更改某些布局属性。例如，如需更改设计编辑器中布局的显示方式，请使用选择设计界面 下拉菜单：

• 使用 Design 可查看布局的实际预览效果。
• 选择 Blueprint 可仅查看每个视图的轮廓。
• 使用 Design + Blueprint 可并排查看这两个显示屏。

Palette：提供您可以拖到布局或 Component Tree 窗格中的视图和视图组列表。

Attributes：显示当前所选视图或视图组的属性。如需在完整属性列表和常用属性之间切换，请使用窗格顶部的 图标。

Component Tree： 以视图树的形式显示布局层次结构。当您有在设计编辑器中无法选择的小型、隐藏或重叠的视图时，Component Tree 会非常有用。

第 1 步：添加 TextView

1. 打开 res/layout/activity_main.xml 文件（如果尚未打开）。
2. 切换到文本标签页 ，然后检查代码。该代码将 LinearLayout 作为其根视图组。（视图组是包含其他视图的视图。）
   
   LinearLayout 具有必需的属性 layout_height、layout_width 和 orientation，默认值为 vertical。
3. 切换到 Design 标签页以打开布局编辑器。

注意：“设计”标签页和“文本”标签页显示相同的布局，只是显示方式不同。您在一个标签页中所做的更改会反映在另一个标签页中。

4. 将文本视图从 Palette 窗格拖到设计编辑器中。
   
   
   
5. 请注意 Component Tree 窗格。新文本视图将作为父视图组（即 LinearLayout）的子元素放置。
   
   
6. 打开属性窗格（如果尚未打开）。（如需打开该窗格，请在设计编辑器中双击新添加的 TextView。）
7. 在属性窗格中设置以下属性：

属性	值
ID	name_text
text	将其设置为您的姓名。（其中一个文本字段显示扳手图标，表示它适用于 tools 命名空间。没有扳手的那个是 android 命名空间（这是您需要的 text 字段）。
textAppearance > textSize	20sp
textAppearance > textColor	@android:color/black
textAppearance > textAlignment	中心

第 2 步：创建字符串资源

在 Component Tree 中，您会看到 TextView, 旁边有一个警告图标 。如需查看警告文本，请点击或指向相应图标，如下面的屏幕截图所示。

如需解决此警告，请创建字符串资源：

1. 在属性窗格中，点击您设置为自己名称的文本属性旁边的三点状图标。系统会打开资源编辑器。
   
   
   
2. 在 Resources 对话框中，依次选择 Add new resource > New string Value。
3. 在新建字符串值资源对话框中，将资源名称字段设置为 name。将资源值字段设置为您自己的名称。点击确定。请注意，警告已消失。
   
   
   
4. 打开 res/values/strings.xml 文件，然后查找名为 name 的新创建的字符串资源。

<string name="name">Aleks Haecky</string>

第 3 步：创建维度资源

您刚刚使用资源编辑器添加了资源。您还可以在 XML 代码编辑器中提取资源以创建新资源：

1. 在 activity_main.xml 文件中，切换到 Text 标签页。
2. 在 textSize 行中，点击相应数字 (20sp)，然后输入 Alt+Enter（在 Mac 上，输入 Option+Enter）。从弹出式菜单中选择 Extract dimension resource。
3. 在 Extract Resource 对话框中，在资源名称字段中输入 text_size。点击确定。
   
   
   
4. 打开 res/values/dimens.xml 文件可查看生成的以下代码：

<dimen name="text_size">20sp</dimen>

注意： 如果 res/values 文件夹中尚无 dimens.xml 文件，Android Studio 会创建该文件。

5. 打开 MainActivity.kt 文件，然后在 onCreate() 函数的末尾查找以下代码：

setContentView(R.layout.activity_main)

setContentView() 函数将布局文件与 Activity 相关联。指定的布局资源文件为 R.layout.activity_main：

• R 是对资源的引用。这是一个自动生成的类，其中包含应用中所有资源的定义。
• layout.activity_main 表示相应资源是名为 activity_main 的布局。

6. 运行应用。系统会显示一个包含您姓名的 TextView。
   
   

当您查看应用界面时，您的姓名会紧贴界面顶部，因此现在您需要添加内边距和外边距。

内边距与外边距

内边距是指视图或元素边界内的空间。它是视图边缘与视图内容之间的空间，如下图所示。

视图的大小包括其内边距。以下是常用的边衬区属性：

• android:padding 为视图的所有四个边指定内边距。
• android:paddingTop 指定顶部边缘的内边距。
• android:paddingBottom 指定底部边缘的内边距。
• android:paddingStart 指定视图“起始”边缘的内边距。
• android:paddingEnd 指定视图“末尾”边缘的内边距。
• android:paddingLeft 指定左边缘的内边距。
• android:paddingRight 指定右边缘的内边距。

边距是指在视图边框外部添加的空间。它是从视图边缘到其父视图的间距，如上图所示。以下是常用的边距属性：

• android:layout_margin 为视图的所有四个边指定边距。
• android:layout_marginBottom 指定此视图底部外侧的空间。
• android:layout_marginStart 指定视图“起始”侧的外部空间。
• android:layout_marginEnd 指定此视图末尾侧的空间。
• android:layout_marginLeft 指定此视图左侧的空间。
• android:layout_marginRight 指定此视图右侧的空间。

右/左与开始/结束

“右侧”和“左侧”始终是指屏幕的右侧和左侧，无论应用使用的是从左到右 (LTR) 的流还是从右到左 (RTL) 的流。“开始”和“结束”始终是指流程的开始和结束：

• 对于 LTR 流，start = left，end=right。
• 对于 RTL 流，start=右，end=左。

如果您的应用以 API 级别 17 (Android 4.2) 或更高级别为目标平台：

• 使用“start”和“end”，而不是“left”和“right”。
• 例如，android:layout_marginLeft 应变为 android:layout_marginStart，以支持从右向左书写的语言。

如果您希望应用在低于 Android 4.2 的版本上运行，也就是说，如果应用的 targetSdkVersion 或 minSdkVersion 为 16 或更低值，请执行以下操作：

• 除了“left”和“right”之外，还添加了“start”和“end”。
• 例如，同时使用 android:paddingLeft 和 android:paddingStart。

第 1 步：添加内边距

如需在您的姓名与 name 文本视图的上边缘之间添加间距，请添加顶部边衬区。

1. 在 Design 标签页中打开 activity_main.xml 文件。
2. 在 Component Tree 或设计编辑器中，点击文本视图以打开其 Attributes 窗格。
3. 在属性窗格顶部，点击双箭头图标 即可查看所有可用的属性。
4. 搜索 Padding，展开它，然后点击 top 属性旁边的三点状图标 ...。系统会显示 Resources 对话框。
5. 在 Resources 对话框中，依次选择 Add new resource > New dimen Value。
6. 在新维度值资源对话框中，创建一个名为 small_padding 的新 dimen 资源，其值为 8dp。
   
   dp 缩写表示密度无关。如果您希望界面元素在密度不同的屏幕上看起来大小相同，请使用 dp 作为度量单位。不过，在指定文本大小时，请务必使用 sp（可缩放像素）。
7. 点击确定。

第 2 步：添加边距

如需将 name 文本视图移离父元素的边缘，请添加上边距。

1. 在属性窗格中，搜索“边距”，找到 Layout_Margin。
2. 展开 Layout_Margin，然后点击 top 属性旁边的三点状图标 ...。
3. 创建一个名为 layout_margin 的新 dimen 资源，并将其设为 16dp。点击 OK。

第 3 步：添加字体

为了让 name 文本视图看起来更好，请使用 Android Roboto 字体。此字体是支持库的一部分，您可将该字体添加为资源。

1. 在属性窗格中，搜索“fontFamily”。
2. 在 fontFamily 字段中，点击下拉箭头，滚动到列表底部，然后选择 More Fonts。
3. 在 Resources 对话框中，搜索 rob 并选择 Roboto。在预览列表中，选择常规。
4. 选择 将字体添加到项目单选按钮。
5. 点击确定。
   
   

res 文件夹现在包含一个 font 文件夹，其中包含一个 roboto.ttf 字体文件。@font/roboto 属性已添加到您的 TextView。

第 4 步：提取风格

样式是一组属性，用于指定视图的外观和格式。样式可以包含字体颜色、字号、背景颜色、内边距、边距和其他常见属性。

您可以将 name 文本视图的格式提取到样式中，并针对应用中的任意数量的视图重复使用该样式。如果您有多个视图，重复使用样式可让应用具有一致的外观。使用样式还可以将这些通用属性集中在一个位置。

1. 在组件树中右键点击 TextView，然后依次选择 Refactor > Extract Style。
2. 在提取 Android 样式对话框中，清除 layout_width 复选框、layout_height 复选框和 textAlignment 复选框。这些属性通常因视图而异，因此您不希望它们成为样式的一部分。
3. 在样式名称字段中，输入 NameStyle。
4. 点击确定。
   
   
   
5. 样式也是一种资源，因此样式会保存在 res/values/ 文件夹中的 styles.xml 文件中。打开 styles.xml 并检查为 NameStyle 样式生成的代码，该代码应类似于以下内容：

<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>

6. 打开 activity_main.xml 并切换到 Text 标签页。请注意，生成的样式在文本视图中以 style="@style/NameStyle" 的形式使用。
7. 运行应用，并注意字体和 TextView 周围的内边距发生了变化。

大多数实际的 Android 应用都包含视图的组合，用于显示图片、显示文字以及接受用户以文字或点击事件形式提供的输入。在此任务中，您将添加一个用于显示图片的视图。

ImageView 是用于显示图片资源的视图。例如，ImageView 可以显示 Bitmap 资源（例如 PNG、JPG、GIF 或 WebP 文件），也可以显示 Drawable 资源（例如矢量绘图）。

Android 附带了一些图片资源，例如示例图标、头像和背景。您将向应用添加其中一种资源。

1. 在设计标签页中显示布局文件，然后将 Palette 窗格中的 ImageView 拖动到 Component Tree 中的 name_text 下方。系统会打开资源 对话框。
2. 选择 Drawable（如果尚未选择）。
3. 展开 android，滚动并选择 btn_star_big_on。是黄色星标 。
4. 点击确定。
   
   
   
   星标图片会添加到您姓名下方的布局中。由于您使用的是垂直 LinearLayout，因此添加的视图会垂直对齐。
   
   
5. 切换到文本标签页，然后查看生成的 ImageView 代码。宽度设置为 match_parent，因此视图的宽度将与其父元素的宽度相同。高度设置为 wrap_content，因此视图将与内容一样高。ImageView 引用 btn_star_big_on 可绘制对象。

<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />

6. 如需重命名 ImageView 的 id，请右键点击 "@+id/imageView"，然后依次选择 Refactor > Rename。
7. 在重命名对话框中，将 id 设置为 @+id/star_image。点击 Refactor。
   
   
   

提示：Refactor > Rename 会重命名应用项目中的属性或变量名称的所有实例。

8. 在设计标签页的组件树中，点击 star_image 旁边的警告图标 。此警告是针对缺失的 contentDescription，屏幕阅读器会使用该属性向用户描述图片。
9. 在属性窗格中，点击 contentDescription 属性旁边的三点状图标 ...。系统随即会打开资源对话框。
10. 在 Resources 对话框中，依次选择 Add new resource > New string Value。将资源名称字段设置为 yellow_star，并将资源值字段设置为 Yellow star。点击确定。
11. 使用属性窗格为 yellow_star 添加 16dp（即 @dimen/layout_margin）的上边距，以将星标图片与名称分开。
12. 运行应用。您的姓名和星形图片会显示在应用界面中。
    
    

ScrollView 是一个视图组，允许滚动其中的视图层次结构。滚动视图只能包含一个其他视图或视图组（作为子视图）。子视图通常是 LinearLayout。在 LinearLayout 中，您可以添加其他视图。

下图显示了一个 ScrollView 的示例，该 ScrollView 包含一个 LinearLayout，而该 LinearLayout 又包含多个其他视图。

在此任务中，您将添加一个 ScrollView，以便用户滚动显示简短个人简介的文本视图。如果您只希望一个视图可滚动，则可以直接将该视图放入 ScrollView 中，这正是您在此任务中要做的。

第 1 步：添加包含 TextView 的 ScrollView

1. 在 Design 标签页中打开 activity_main.xml 文件。
2. 将滚动视图拖到设计编辑器或 Component Tree 中，从而将其拖到布局中。将滚动视图放在星形图片下方。
3. 切换到 Text 标签页以检查生成的代码。

// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

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

ScrollView 的高度和宽度与父元素一致。当 name_text 文本视图和 star_image 图片视图已使用足够的垂直空间来显示其内容后，Android 系统会布置 ScrollView 以填充屏幕上剩余的可用空间。

4. 向 ScrollView 添加 id，并将其命名为 bio_scroll。向 ScrollView 添加 id 可为 Android 系统提供视图句柄，以便在用户旋转设备时，系统能够保留滚动位置。
5. 在 ScrollView 内，移除 LinearLayout 代码，因为您的应用将只有一个可滚动的视图，即 TextView。
6. 将 TextView 从 Palette 拖动到 Component Tree。将 TextView 放在 bio_scroll 下面，作为 bio_scroll 的子元素。
   
   
7. 将新文本视图的 id 设置为 bio_text。
8. 接下来，您将为新的文本视图添加样式。在属性窗格中，点击 style 属性旁边的三个点 ...，打开资源对话框。
9. 在资源对话框中，搜索 NameStyle。从列表中选择 NameStyle，然后点击确定。文本视图现在使用您在之前的任务中创建的 NameStyle 样式。
   
   

第 2 步：将个人简介添加到新的 TextView

1. 打开 strings.xml，创建一个名为 bio 的字符串资源，并在其中放入一些关于您自己或您想说的任何内容的较长文本。
   

注意：

• 使用 \n 表示换行。
• 如果您使用英文撇号，必须使用反斜线对其进行转义。例如：
  "You mustn\'t forget the backslash."
• 对于粗体文本，请使用 <b>...</b>；对于斜体文本，请使用 <i>...</i>。例如：
  "This text is <b>bold</b> and this text is <i>italics</i>."

以下是个人简介示例：

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>

2. 在 bio_text 文本视图中，将 text 属性的值设置为包含个人简介的 bio 字符串资源。
3. 为了让 bio_text 文本更易于阅读，请在各行之间添加间距。使用 lineSpacingMultiplier 属性，并将其值设为 1.2。
   
   
   
   请注意，在设计编辑器中，bio 文本一直延伸到屏幕的侧边缘。如需解决此问题，您可以向根 LinearLayout 添加左侧、起始、右侧和结束内边距属性。您无需添加底部内边距，因为紧贴底部的文字会向用户表明文字可以滚动。
4. 为根 LinearLayout 添加 16dp 的起始和结束内边距。
5. 切换到 Text 标签页，提取维度资源，并将其命名为 layout_padding。
   
   

注意： 从 API 级别 17 开始，请使用“start”和“end”代替“left”和“right”来设置内边距和外边距，以便让您的应用适应阿拉伯语等 RTL 语言。

6. 运行应用并滚动浏览文本。
   
   

恭喜！

您已从头开始创建了一个完整的应用，而且效果非常棒！

Android Studio 项目：AboutMe

注意：所有编码挑战任务均为可选。

在 ScrollView 内，在 TextView 上方添加 ImageView。当您运行应用时，此图片会随着文字向上滚动而滚动出视图，这与星形不同。

提示：滚动视图只能有一个子视图。您必须将两个可滚动视图（ImageView 和 TextView）封装到 LinearLayout 中。

• ViewGroup 是一种可以包含其他视图的视图。LinearLayout 和 ScrollView 是视图组。
• LinearLayout 是一个视图组，用于水平或垂直排列其子视图。
• 当您需要在屏幕上显示内容（例如长文本或一组图片）时，请使用 ScrollView。滚动视图只能包含一个子视图。如果您想滚动多个视图，请向 ScrollView 添加 ViewGroup（例如 LinearLayout），并将要滚动的视图放在该 ViewGroup 内。
• 布局编辑器是 Android Studio 中的一个可视化设计编辑器。您可以使用布局编辑器，将界面元素拖动到布局中，从而构建应用的布局。
• 样式是一个属性集合，用于指定视图的外观。例如，样式可以指定字体颜色、字号、背景颜色、内边距和外边距。
• 您可以将视图的所有格式提取并收集到样式中。为了让应用具有一致的外观，请为其他视图重复使用该样式。

Udacity 课程：

• 使用 Kotlin 开发 Android 应用

Android 开发者文档：

• 布局
• ViewGroup
• View
• 线性布局
• ScrollView
• 支持不同的像素密度 (dp)
• 使用布局编辑器构建界面
• Android Studio 文档
• 样式和主题

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

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

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

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

回答以下问题

问题 1

以下哪一项是视图组？

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

问题 2

下列视图层次结构中哪一个是无效的？

▢ LinearLayout > TextView、TextView、ImageView

▢ ScrollView > LinearLayout > TextView、Button、Button、ScrollView > TextView

▢ TextView > TextView、ImageView、ScrollView

问题 3

样式是在 styles.xml 中定义的资源。您可以使用样式定义视图的颜色、字体、文字大小和许多其他特性。判断正误。

▢ 正确

▢ 错误

问题 4

ScrollView 是一种视图组，可包含任意数量的视图或视图组作为其子项。判断正误。

▢ 正确

▢ 错误

问题 5

可以使用哪个界面元素在应用中显示图片？

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

开始学习下一课：2.2：添加用户交互

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