【创建 Birthday Card 应用】

阿冷不写bug

已于 2022-07-23 17:31:16 修改

阅读量639

点赞数

分类专栏： Kotlin个人学习文章标签： android android studio kotlin

于 2022-07-23 15:23:17 首次发布

本文链接：https://blog.csdn.net/Jasonhso/article/details/125927341

版权

Kotlin个人学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

上一篇：【了解 Android 测试的基础知识】

一、简介

在本文章中，您将构建一个显示文本的简单 Android 应用。详细了解 Android 中的各个界面 (UI) 组件将有助于您在屏幕上恰当放置文本。

前提条件

了解如何在 Android Studio 中创建新的应用。
了解如何在模拟器中或在 Android 设备上运行应用。

学习内容

什么是界面元素，例如 Views 和 ViewGroups。
如何在应用的 TextView 中显示文本。
如何在 TextView 上设置文本、字体和外边距等属性。

构建内容

一个以文本格式显示生日祝福的 Android 应用。

完成后，您的应用将如下所示。

在这里插入图片描述

所需条件

一台安装了 Android Studio 的计算机。

二、设置您的 Happy Birthday 应用

创建 Empty Activity 项目

首先，在 Android Studio 中使用 Empty Activity 模板创建一个新的 Kotlin 项目。
将该应用命名为“Happy Birthday”，并将最低 API 级别设为 19 (KitKat)。

重要提示： 如果您不熟悉如何在 Android Studio 中创建新项目，请参阅创建并运行您的首个 Android 应用，了解有关详情。

在这里插入图片描述

运行您的应用，该应用应如下面的屏幕截图所示。

在这里插入图片描述

在您使用 Empty Activity 模板创建这个 Happy Birthday 应用时，Android Studio 会设置基本 Android 应用所需的各项资源，包括在屏幕中间显示的“Hello World!”消息。在本 Codelab 中，您将了解如何放置该消息、如何将其文本改得更像生日祝福，以及如何添加额外的消息并为其设置格式。

界面简介

应用的界面 (UI) 就是您在屏幕上所看到的内容，包括文本、图片、按钮和许多其他类型的元素。它既是应用向用户显示内容的方式，也是用户与应用展开互动的载体。

其中的每个元素都是所谓的 View。您在应用屏幕上看到的所有内容几乎均属于 View。Views 还可以是互动元素，例如可点击的按钮或可修改的输入字段。

在本文章中，您将使用一种用于显示文本的 View，我们称之为 TextView。

Android 应用中的 Views 并非独自悬浮在屏幕上。各个 Views 之间彼此存在关联。例如，图片可能位于某些文本旁边，几个按钮也可能会自成一行。若要整理 Views，您可以将它们放到一个容器中。ViewGroup 就是一个可在其中放入 View 对象的容器，负责排列内部的各个 Views。排列方式（即布局）可能会因运行应用的 Android 设备的屏幕尺寸和宽高比而发生变化，并且可以根据设备是处于纵向还是横向模式做出调整。

ConstraintLayout 就是一种 ViewGroup，可帮助您灵活地排列其内部的 Views。

在这里插入图片描述

布局编辑器简介

通过安排 Views 和 ViewGroups 来创建界面是创建 Android 应用的重要组成部分。Android Studio 提供了一个名为布局编辑器的工具，可协助您完成这项操作。您将使用布局编辑器将“Hello World!”文本更改为“Happy Birthday!”，随后再设置该文本的样式。

打开布局编辑器后，您会看到许多窗口。在本 Codelab 中，您将学习如何使用其中的大部分窗口。请参考下方带有注解的屏幕截图，帮助您识别布局编辑器中的窗口。在更改应用时，您将会对每一个窗口作进一步了解。

左侧标注 (1) 处就是您之前已看到的 Project 窗口，其中列出了构成您项目的所有文件。
在中心区域，您能看到标注 (4) 和 (5) 的两个绘图窗口，代表应用的屏幕布局。左侧标注 (4) 的窗口呈现的是应用在运行时屏幕将呈现的近似效果，也就是所谓的 Design 视图。
右侧标注 (5) 的窗口呈现的是 Blueprint 视图。在执行特定操作时，该视图会非常有用。
标注 (2) 的 Palette 窗口包含的是您可以向应用添加的各类 Views 的列表。
标注 (3) 的 Component Tree 窗口则是屏幕视图的另一种呈现形式。它会列出屏幕的所有视图。
最右边标注 (6) 的窗口是 Attributes 视图，其中显示了 View 的各个属性。您可在此处更改这些属性。

如需详细了解布局编辑器以及如何对其进行配置，请参阅开发者参考指南。

整个布局编辑器的屏幕截图（带注解）：

在这里插入图片描述

让我们在布局编辑器中做些更改，使应用更像是一张生日贺卡！

更改 Hello World 消息

在 Android Studio 中，找到左侧的 Project 窗口。
留意下面这些文件夹和文件：app 文件夹包含您要更改的大多数应用文件。res 文件夹用于各种资源，例如图片或屏幕布局。layout 文件夹用于屏幕布局。activity_main.xml 文件包含屏幕布局的说明。
依次展开 app 文件夹、res 文件夹和 layout 文件夹。
双击 activity_main.xml。系统随即会在布局编辑器中打开 activity_main.xml，并会在 Design 视图中显示它描述的布局。

在这里插入图片描述

注意： 在这些 Codelab 中，您经常需要像上述步骤一样打开文件。简而言之，这些步骤可以归纳为以下几个步骤：打开 activity_main.xml (res > layout > activity_main.xml)，不必单独列出每一个步骤。

查看 Component Tree 中的视图列表。请注意，该列表中有一个 ConstraintLayout，它下面有一个 TextView。这些表示应用的界面。TextView 之所以缩进显示，是因为它位于 ConstraintLayout 中。当您向 ConstraintLayout 添加更多的 Views 时，它们都会被添加到这个列表中。
注意 TextView 旁边显示的 “Hello World!”，也就是您在运行应用后会看到的文本。

在这里插入图片描述

在 Component Tree 中，点击 TextView。
找到右侧的 Attributes。
找到 Declared Attributes 部分。
10.注意，Declared Attributes 部分中的 text 属性包含 Hello World!。

在这里插入图片描述

text 属性会显示在 TextView 中输出的文本。

点击 Hello World! 文本所在的 text 属性。
将其更改为 Happy Birthday!，然后按 Enter 键。如果您看到有关硬编码字符串的警告，暂时先不用担心。您将在下一个 Codelab 中解决该警告所指出的问题。
注意，Design View 中的文本已经发生变化…（这很酷，您可以立即看到自己所做的更改！）
现在，您运行应用，就会显示 Happy Birthday!

在这里插入图片描述

非常棒！您对 Android 应用做出了第一次更改。

三、向布局添加 TextView

您正在构建的生日贺卡与您应用中现有的内容看起来不太一样。您需要的不是中心位置的小字体文本，而是要将两条字体更大的消息分别置于左上角和右下角。在此任务中，您将删除现有TextView，然后添加两个新的TextViews，并了解如何在 ConstraintLayout 中放置这些视图。

删除当前的 TextView

在布局编辑器中，点击以选择布局中心的 TextView。

在这里插入图片描述

按 Delete 键。Android Studio 即会删除 TextView，而您的应用在布局编辑器和 Component Tree 中现在也只会显示 ConstraintLayout。

在这里插入图片描述

提示： 如果您想放大布局，可以使用布局编辑器右下角的控件来调整大小。点击最底部的图
标可以恢复为整个布局铺满屏幕的缩放级别。

添加 TextView

在这一步，您将在应用左上角添加一个 TextView 来存放生日祝福。

在这里插入图片描述

布局编辑器左上角的 Palette 包含各种 Views 的列表（按类别整理），可供您添加到自己的应用中。

查找 TextView。您在 Common 类别和 Text 类别中都能找到它。

在这里插入图片描述

将 TextView 从 Palette 拖放到布局编辑器中设计界面的左上角。您不必做到精准到位，只需在左上角附近的位置放下即可。

在这里插入图片描述

您会看到添加了一个 TextView，并且 Component Tree 中出现了一个红色的感叹号。
将鼠标指针悬停在该感叹号上，您会看到一条警告消息，提示该视图未进行约束，在您运行应用时，该视图会跳到其他位置。在接下来的这一步，您将解决此问题。

在这里插入图片描述

放置 TextView

如果是制作生日贺卡，您需要将 TextView 置于左上角附近，并且周围要留出一些空间。为了解决前文警告中指出的问题，您需要向 TextView 中添加一些约束条件，以告知应用如何放置该视图。约束条件用于指定在布局中放置 View 的方向和限制。

向顶部和左侧添加的约束条件将带有外边距。外边距指定了 View 离它所在容器的边缘有多远。

在这里插入图片描述

在右侧的 Attributes 中，找到 Layout 部分中的 Constraint Widget。其中显示的方形代表您的视图。

在这里插入图片描述

点击方形顶部的 +。这会在文本视图的顶部与约束布局的上边缘之间添加约束条件。
系统会显示一个带数字的字段，用于设置上外边距。该外边距是指从 TextView 到容器（即 ConstraintLayout）边缘的距离。显示的数字会因您放下 TextView 的位置而有所不同。在您设置上外边距时，Android Studio 还会在文本视图的顶部和 ConstrainLayout 的顶部之间自动添加约束条件。

在这里插入图片描述

将上外边距更改为 16。

注意： 界面中的外边距和其他距离的单位是密度无关像素 (dp)。它与厘米或英寸类似，但表示的是屏幕上的距离。Android 会针对每种设备将此值转换为相应的实际像素数。通常，1dp 大约是 1 英寸的 1/160，但对于某些设备，该尺寸可能会有所不同。

对左外边距设置同样的数值。

在这里插入图片描述

在 text 字段中输入您对朋友的生日祝福（例如：“Happy Birthday, Sam!”），然后按 Enter 键。

在这里插入图片描述

添加并放置另一个 TextView

生日贺卡还需要在右下角附近显示另一行文本，您将在这一步中按照先前任务所采用的方法添加这行文本。您觉得这个 TextView 的外边距应该是多少呢？

将一个新的 TextView 从 Palette 拖放到布局编辑器中应用视图的右下角附近。

在这里插入图片描述

将右外边距设为 16。
将下外边距设为 16。

在这里插入图片描述

在 Attributes 中，将 text 属性设为您的贺卡签名，例如“From Emma”。
运行应用。您应该会在左上角看到您的生日祝福，并在右下角看到您的签名。

在这里插入图片描述

恭喜！您已经在应用中添加并放置了一些界面元素。

四、向文本添加样式

您已将文本添加到界面中，但它看起来和最终应用还不太一样。在此任务中，您将了解如何更改大小、文本颜色以及影响 TextView 外观的其他属性。此外，您还可以尝试使用不同的字体。

点击 Component Tree 中的第一个 TextView，然后找到 Attributes 窗口的 Common Attributes 部分。您可能需要向下滚动鼠标才能找到该部分。
注意各种属性，包括 fontFamily、textSize 和 textColor。

在这里插入图片描述

查找 textAppearance。
如果 textAppearance 未展开，请点击向下三角形。
将 textSize 设为 36sp。

注意： 就像 dp 是屏幕上距离的度量单位一样，sp 是字体大小的度量单位。Android 应用中的界面元素使用两种不同的度量单位：一种是您之前为布局使用的密度无关像素 (dp)，另一种是在设置字体大小时使用的可缩放像素 (sp)。默认情况下，sp 和 dp 大小相同，但前者的大小会根据用户的首选文本大小进行调整。

注意布局编辑器中出现的变化。

在这里插入图片描述

将 fontFamily 更改为 casual。
尝试使用一些不同的字体，看看它们各自的呈现效果。您还可以通过列表底部的 More Fonts… 选择其他字体。
尝试完不同的字体后，请将 fontFamily 设为 sans-serif-light。
10.点击 textColor 属性的编辑框，然后开始输入 black。请注意，在您输入的过程中，Android Studio 会显示包含到目前为止您已输入文字的颜色的列表。

在这里插入图片描述

从颜色列表中选择 @android:color/black，然后按 Enter 键。
在包含签名的 TextView 中，将 textSize、textColor 和 fontFamily 更改为匹配的值。
运行应用并查看结果。

在这里插入图片描述

恭喜，您已完成创建 Birthday Card 应用的前几步！

五、解决方案

解决方案代码网址： https://github.com/google-developer-training/android-basics-kotlin-birthday-card-app-solution

如需获取本文章的代码并在 Android Studio 中打开它，请执行以下操作。

获取代码

点击提供的网址。此时，项目的 GitHub 页面会在浏览器中打开。
在项目的 GitHub 页面上，点击 Code 按钮，以打开一个对话框。

在这里插入图片描述

在对话框中，点击 Download ZIP 按钮，将项目保存到计算机上。等待下载完成。
在计算机上找到该文件（可能在 Downloads 文件夹中）。
双击 ZIP 文件进行解压缩。系统将创建一个包含项目文件的新文件夹。

在 Android Studio 中打开项目

启动 Android Studio。
在 Welcome to Android Studio 窗口中，点击 Open an existing Android Studio project。

在这里插入图片描述

注意：如果 Android Studio 已经打开，请依次选择 File > New > Import Project 菜单选项。

在这里插入图片描述

在 Import Project 对话框中，转到解压缩的项目文件夹所在的位置（可能在 Downloads 文件夹中）。
双击该项目文件夹。
等待 Android Studio 打开项目。
点击 Run 按钮以构建并运行应用。请确保该应用按预期构建。
在 Project 工具窗口中浏览项目文件，了解应用的设置方式。

提醒： 在 Android Studio 中，如果您看到“Android framework is detected. Click to configure” 这条错误消息，则说明系统未检测到对应项目，或者“Run”按钮处于停用状态，请确保您在 Android Studio 中打开的是 HappyBirthday 这个子目录，而不是父目录。