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. 在下一个 Create New Project 对话框中，设置以下参数并点击 Finish。
   

特性	值
应用名称	关于我
公司名称：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 的布局文件。布局文件以 ConstraintLayout 作为根 ViewGroup，并且有一个 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。

之前：

<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 Editor：在设计视图和/或蓝图视图中显示屏幕布局。设计编辑器是布局编辑器的主要部分。

工具栏：提供相应按钮，供您在设计编辑器中配置布局的外观以及更改某些布局属性。例如，如需在设计编辑器中更改布局的显示，请使用 Select Design Surface 下拉菜单：

• 使用 Design 实际预览布局。
• 使用 Blueprint 可仅查看每个视图的轮廓。
• 使用 Design + Blueprint 可并排查看两个屏幕。

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

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

Component Tree：将布局层次结构显示为视图树。如果您有小而隐藏或重叠的视图而无法在设计编辑器中选择，Component Tree 会非常有用。

第 1 步：添加 TextView

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

注意：Design 标签页和 Text 标签页会以相同的方式显示相同的布局。您在一个标签页中所做的更改会反映在另一个标签页中。

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

特性	值
ID	name_text
text	将其设为您的姓名。（text 字段中的一个字段显示扳手图标，用于表明它对应于 tools 命名空间。不带扳手的那就是 android 命名空间 - 这就是您想要的文本字段。）
textAppearance > textSize	20sp
textAppearance > textColor	@android:color/black
textAppearance > textAlignment	中心

第 2 步：创建字符串资源

在 Component Tree 中，您会注意到 TextView, 旁边的警告图标 。要查看警告文字，请点击图标或指向它，如下面的屏幕截图所示。

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

1. 在 Attributes 窗格中，点击您设置为名称的 text 属性旁边的三个点。系统随即会打开资源编辑器。
   
   
   
2. 在资源对话框中，选择添加新资源 > 新字符串值。
3. 在 New String Value Resource 对话框中，将 Resource name 字段设置为 name。将 Resource value 字段设置为您自己的名称。点击 OK。请注意，警告已消失。
   
   
   
4. 打开 res/values/strings.xml 文件，然后查找名为 name 的新创建的字符串资源。

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

第 3 步：创建维度资源

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

1. 在 activity_main.xml 文件中，切换到文本标签页。
2. 点击第 textSize 行上的数字 (20sp)，然后输入 Alt+Enter（Mac 上为 Option+Enter）。从弹出式菜单中选择提取维度资源。
3. 在 Extract Resource 对话框中的 Resource name 字段中输入 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。
   
   

当您查看应用屏幕时，您的姓名会推上屏幕顶部，因此，您现在可以添加内边距和外边距。

内边距与外边距

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

视图的尺寸包括内边距。以下是常用的内边距属性：

• 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=right 和 end=left。

如果您的应用以 API 级别 17 (Android 4.2) 或更高级别为目标平台，请执行以下操作：

• 使用“开始”和“结束”，而不是“左”和“右”。
• 例如，android:layout_marginLeft 应变为 android:layout_marginStart 以支持 RTL 语言。

如果您希望应用适用于低于 Android 4.2 的版本，也就是说，如果应用的 targetSdkVersion 或 minSdkVersion 为 16 或更低版本，则：

• 除“左”和“右”外，添加“起始”和“结束”。
• 例如，同时使用 android:paddingLeft 和 android:paddingStart。

第 1 步：添加内边距

若要在名称与 name 文本视图的上边缘之间留出空间，请添加上内边距。

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

第 2 步：添加外边距

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

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

第 3 步：添加字体

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

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

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

第 4 步：提取样式

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

您可以将 name 文本视图的格式提取为样式，并在您的应用中为任意数量的视图重复使用该样式。当多个视图一起使用时，应用便可提供一致的外观。使用样式还能将这些通用属性保存在一个位置。

1. 右键点击 Component Tree 中的 TextView，然后选择 Refactor > Extract Style。
2. 在 Extract Android Style 对话框中，取消选中 layout_width 复选框、layout_height 复选框和 textAlignment 复选框。这些属性通常因视图而异，因此您不希望它们成为样式的一部分。
3. 在样式名称字段中，输入 NameStyle。
4. 点击确定。
   
   
   
5. 样式也是一种资源，因此，样式会保存在 styles.xml 文件的 res/values/ 文件夹中。打开 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. 在 Design 标签页中显示布局文件，然后将 ImageView 从 Palette 窗格拖动到 Component Tree 中的 name_text 下方。。系统会打开资源对话框。
2. 选择可绘制对象（如果尚未选择）。
3. 展开 android，滚动并选择 btn_star_big_on。现在是黄色星标 。
4. 点击 OK。
   
   
   
   星标图片会添加到您姓名下方的布局中。由于您具有垂直的 LinearLayout，因此您添加的视图垂直对齐。
   
   
5. 切换到 Text 标签页，然后查看生成的 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. 在 Rename 对话框中，将 id 设置为 @+id/star_image。点击 Refactor。
   
   
   

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

8. 在 Design 标签页的 Component Tree 中，点击 star_image 旁边的警告图标 。该警告适用于缺少 contentDescription 的情况，屏幕阅读器会使用该属性来向用户描述图片。
9. 在 Attributes 窗格中，点击 contentDescription 属性旁边的三个点 ...。此时将打开 Resources 对话框。
10. 在资源对话框中，选择添加新资源 > 新字符串值。将资源名称字段设置为 yellow_star，并将资源值字段设置为 Yellow star。点击 OK。
11. 使用 Attributes 窗格将 16dp（即 @dimen/layout_margin）的上外边距添加到 yellow_star，以便将星形图片与名称分隔开来。
12. 运行您的应用。您的姓名和星标图片会显示在应用的界面中。
    
    

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

下图显示的 ScrollView 示例包含一个包含多个其他视图的 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. 将 id 添加到 ScrollView 并将其命名为 bio_scroll。向 ScrollView 添加 id 可向 Android 系统提供视图句柄，以便在用户旋转设备时，系统会保留滚动位置。
5. 在 ScrollView 内，移除 LinearLayout 代码，因为您的应用将只有一个可滚动的视图：TextView。
6. 将 TextView 从 Palette 拖动到 Component Tree。将 TextView 放在 bio_scroll 下，作为 bio_scroll 的子元素。
   
   
7. 将新文本视图的 id 设置为 bio_text。
8. 接下来，为新文本视图添加样式。在 Attributes 窗格中，点击 style 属性旁边的三个点 ... 以打开 Resources 对话框。
9. 在 Resources 对话框中，搜索 NameStyle。从列表中选择 NameStyle，然后点击 OK。文本视图现在使用您在先前任务中创建的 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 添加 left、start、right 和 end 内边距属性。您无需添加下内边距，因为文本内容在底部显示时会向用户发出文本可滚动的信号。
4. 为根 LinearLayout 添加 16dp 的开始和结束内边距。
5. 切换到文本标签页，提取尺寸资源，并将其命名为 layout_padding。
   
   

注意：从 API 级别 17 开始，使用内边距和外边距来使用“开始”和“结束”，而不是使用“左”和“右”，以针对阿拉伯语等 RTL 语言调整应用。

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

恭喜！

您已从头开始创建了一个完整的应用，看起来很棒！

Android Studio 项目：AboutMe

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

在 ScrollView 中，在 TextView 上方添加一个 ImageView。当您运行该应用时，这张图片与星标不同，它会在文字向上滚动时滚出视图。

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

• ViewGroup 是可以包含其他视图的视图。LinearLayout 和 ScrollView 是视图组。
• LinearLayout 是水平或垂直排列其子视图的视图组。
• 如果您需要在屏幕上显示内容（例如长文本或图片集），请使用 ScrollView。一个滚动视图只能包含一个子视图。如果您要滚动多个视图，请将 ViewGroup（例如 LinearLayout）添加到 ScrollView 中，并将视图放置在该 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 着陆页。