资讯详情

【为您的 Android 应用添加图片】

上一篇:【创建 Birthday Card 应用】

一、简介

在本文中，您将学习如何使用它 ImageView 向应用程序添加图片。

  • 了解如何在 Android Studio 创建和运行新的应用。
  • 了解如何使用布局编辑器 TextViews 添加、删除和设置属性。

  • 如何向 Android 添加图片或照片。
  • 如何使用 ImageView 图片显示在应用中。
  • 如何将文本提取到字符串资源中，以便更容易地翻译应用程序并重复使用字符串。
  • 如何让应用程序尽可能多地用户使用。

  • 扩展 Happy Birthday 应用，以添加图片。

  • 一台安装了 Android Studio 的计算机。
  • 在“创建 Birthday Card 文章中创建的应用程序。

二、设置应用

  1. 在 Android Studio 打开您在前一篇文章中使用的项目。您可以使用解决方案代码或您创建的代码。操作应用程序后，将显示以下内容。

在这里插入图片描述

在这个任务中，你将从互联网上下载一张图片，然后添加到你身上 Happy Birthday 应用中。

  1. 点击此处，以此为在 GitHub 查看生日贺卡的图片。
  2. 点击右侧的 按钮，图片将立即显示在界面上。

  1. 右键单击图片，并将文件存储在计算机中 。请记下保存位置(例如:文件夹）。
  2. 在 Android Studio 在菜单中依次单击 ，或者点击 窗口左侧的 标签页。
  3. 点击 中左上角的 ，然后选择 。该系统将立即打开文件浏览器。

  1. 在文件浏览器中找到下载的图片文件，然后单击 。
  2. 点击 。Android Studio 会向您显示该图片的预览。
  3. 点击 。
  4. 若图片导入成功，Android Studio 添加此图片 列表中。该列表包含了该应用程序的所有图片和图标。现在，您可以在应用程序中使用此图片。

  1. 在菜单中依次点击 或最左侧的 将标签页切换回项目视图。
  2. 展开 ，确认图片位于应用程序中 文件夹中。

三、添加 ImageView

要在应用中显示图片，需要有一个显示位置。就像使用一样 TextView 您可以使用相同的显示文本 ImageView 显示图片。

您将在此任务中添加应用程序 ImageView，并将其图片设置为您下载的纸杯蛋糕图片。然后，您将图片放置并调整其大小，以填充整个屏幕。

  1. 在 打开窗户 （依次点击 ）。

如果您没有看到布局编辑器，请单击右上角 Design 模式按钮。

  1. 在中，转到 并将 ImageView 将其拖到应用程序上，放在靠近中心的位置，不与任何文本重叠

此时，系统将打开 对话框。这个对话框列出了所有图片资源用的图片资源。请注意，生日图片列在生日图片中 标签页下。可绘资源是图形的一般概念，是指可在屏幕上绘制的图形，包括图片、位图、图标和许多其他类型的图形资源。

  1. 在 从对话框中 在列表中找到蛋糕图片。
  2. 点击图片，然后点击 。

系统会立即将图片添加到应用程序中，但位置可能不正确，图片不会填充屏幕。在下一步，您将解决这个问题。

  1. 在点击并拖动中间 ImageView。拖动时，你会看到 粉色矩形框将显示在视图中应用屏幕的周围。粉色矩形框表示放置 ImageView 屏幕边界。
  2. 拖动 ImageView，使其左右边缘与粉色矩形对齐。当你靠近时，Android Studio 会让图片贴边缘。

ConstraintLayout 中的 Views 通知需要水平和垂直约束 ConstraintLayout 如何放置这些视图。接下来，您将添加这些约束。

在在环境中，约束条件表示视图与其他视图、父亲布局或隐形导线之间的连接或对齐。例如，视图可以被限制为与容器边缘保持一定距离，或总是位于另一个视图的右侧，或总是作为容器中的顶部视图。

  1. 悬挂指针 ImageView 在轮廓顶部的圆上，这个圆将与另一个圆一起突出。
  2. 如果将圆圈拖到应用屏幕的顶部，当您拖动时，将有箭头将圆圈连接到指针。请拖动它，直到它靠近屏幕的顶部。这样，你就在那里 ImageView 的顶部与 ConstraintLayout 在顶部之间增加了约束。

  1. 在 ImageView 的底部和 ConstraintLayout 的底部之间添加约束条件。有可能会因为距离边缘太近而无法像对顶部那样进行拖动。在这种情况下，您可以点击 窗口中 底部的 ，添加约束条件。请务必将外距设置为 0。

您在屏幕上添加的 Views 添加约束条件越多，就越难。如果你错了 View 添加约束条件，可使用 Control Z（在 Mac 上，使用 Comand+Z）进行撤消。或者，右键点击相应的 View，在弹出的菜单中选择 ，从而移除针对该 View 的所有约束条件。

现在，图片已经居中，但尚未占据整个屏幕。在接下来的步骤中，您将解决此问题。

  1. 在 下的 部分，将 设为 。0dp 是一种简写形式，用于指示 Android Studio 对 ImageView 的宽度使用匹配约束条件。由于您刚刚添加了约束条件，这会让它与 ConstraintLayout 一样宽，所有外边距都会被减去。

  1. 将 layout_height 设为 0dp (match constraint)。由于您添加了约束条件，这会让 ImageView 与 ConstraintLayout 一样高，所有外边距都会被减去。

  2. ImageView 与应用屏幕一样高、一样宽，但图片位于 ImageView 的中心，并且图片的上方和下方还有很多空白区域。这看起来不太好看，因此请调整 ImageView 的 ，告知系统如何调整图片的大小和对齐方式。如需详细了解 ScaleType，请参阅开发者参考指南。现在，应用应如下所示。

找到 属性。您可能需要向下滚动或搜索该属性。尝试为 设置不同的值，看看不同值的效果。

若要在所有属性的列表中找到某个属性，请点击“Attributes”右侧的放大镜图标，然后开始输入该属性的名称。Android Studio 只会显示包含所输入字符串的属性。

完成后，请将 设为 。这样一来，图片将填满整个屏幕，而不会变形。

现在，蛋糕图片应该会填满整个屏幕，如下所示。

但现在您就看不到生日祝福和签名了。在接下来的这一步，您将解决此问题。

让 ImageView 填满整个屏幕后，您便无法再看到文本。这是因为图片现在盖住了文本。因此，界面元素的顺序很重要。您先添加了 TextViews，然后添加了 ImageView，这就意味着图片视图会位于顶部。当您向布局添加视图后，这些视图将添加到视图列表的末尾，并会按照它们在列表中的顺序进行绘制。ImageView 被添加到 ConstraintLayout 中 Views 列表的末尾，这意味着这个视图会在最后绘制，并且是在 TextViews 的上面进行绘制。若要解决此问题，您需要更改各个视图的顺序，将 ImageView 移至列表开头。这样，系统就会首先绘制该视图。

在 中，点击 ImageView，将它拖动到 TextViews 的上面、ConstraintLayout 的正下方。系统会显示一个带三角形的蓝色线条，指示 ImageView 的目标位置。请将 ImageView 拖至 ConstraintLayout 的正下方。

现在，ImageView 应该位于 ConstraintLayout 下方列表的首位，后面是 TextViews。您就应该能够看到“Happy Birthday, Sam!”和“From Emma.”这两条文本了。（请暂时忽略有关缺少内容说明的警告。）

祝贺您！您已经为自己的 Android 应用添加了图片！

四、采用规范的编码做法

您在前面的文章中添加 TextViews 时，Android Studio 显示了三角形警告标记。在此步骤中，您将解决这些警告中指出的问题，同时还会解决 ImageView 上所显示警告中指出的问题。

在编写应用时，请务必注意，应用在某些情况下可能会被翻译成其他语言。正如您在先前的文章中学到的那样，一个字符串就是一连串的字符，如“Happy Birthday, Sam!”。

硬编码字符串是直接在应用的代码中写入的字符串。它会让应用难以翻译成其他语言，也很难在应用中的其他位置重复使用字符串。您可以通过“将字符串提取到资源文件中”来解决这类问题。也就是说，您不必在代码中硬编码字符串，而是将字符串放在一个文件中，并为该文件命名，然后在想要使用这个字符串时使用此名称即可。即使您更改字符串或将字符串翻译成其他语言，名称仍将保持不变。

  1. 点击第一个 TextView（带有“Happy Birthday, Sam!”）旁边的橙色三角形。Android Studio 将打开一个窗口，其中包含了更多相关信息和建议的修正方法。您可能需要向下滚动才能看到 （）。

  1. 点击 按钮。Android Studio 将打开 对话框。在此对话框中，您可以自定义在调用字符串资源时所用的名称以及有关如何存储该资源的一些详细信息。 是在调用字符串时所用的名称。 则是字符串本身的实际内容。
  2. 在 对话框中，将 更改为。字符串资源应该使用小写名称，并且多个单词应使用下划线分隔。将其他设置保留为默认值。

  1. 点击 按钮。
  2. 在 窗格中，找到 属性，您会发现 Android Studio 已将其自动设置为 。

  1. 打开 )，您会发现 Android Studio 已创建一个名为 的字符串资源。
<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
</resources>

strings.xml 包含用户将在应用中看到的所有字符串。请注意，应用的名称也是一个字符串资源。通过将所有字符串集中放置在一处，您可以更轻松地翻译应用中的所有文本，同时也能更轻松地在应用的不同部分重复使用字符串。

  1. 按照相同的步骤提取签名 TextView 的文本，然后将该字符串资源命名为 。

完成后的文件应如下所示。

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
    <string name="signature_text">From Emma.</string>
</resources>
  1. 如果TextView旁边没有橙色三角形，可能是你的警告级别的设置问题，或者是某个插件的问题。可以直接打开)，在里边添加代码：<string name="happy_birthday_text">Happy Birthday, Sam!</string> 添加完成后的代码如第六步中的代码所示，再来到 Attributes 窗格中，找到 text 属性，将其设置为 @string/happy_birthday_text。第二个TextView设置同理

如果您能遵循良好的无障碍功能编码做法，那么您所有的用户（包括残障用户）便能更轻松地浏览您的应用并与之互动。

Android 为用户提供了许多工具。例如，TalkBack 是 Android 设备随附的 Google 屏幕阅读器。TalkBack 可为用户提供语音反馈，以便用户无需查看屏幕即可使用他们的设备。如需详细了解无障碍功能，请参阅开发者参考指南。

Android Studio 会提供相应的提示和警告，以帮助您提高应用的无障碍性。

  1. 在 中，请注意您之前添加的 ImageView 旁边的橙色三角形。如果您将指针悬停在这个三角形上，将看到一条提示，其中会显示有关图片缺少“contentDescription”属性的警告。内容说明可帮助您定义界面元素的用途，从而让应用更易于在 TalkBack 中使用。

不过，在此应用中添加图片只是为了进行装饰。因此，您不必设置会向用户进行公布的内容说明，而只需将其 属性设为 ，让 TalkBack 跳过该 ImageView 即可。

  1. 在 中，选择 ImageView。
  2. 在 窗口的 部分中，找到 ，并将其设为 。ImageView 旁边的橙色三角形便会消失。
  3. 再次运行应用，确认它是否仍可正常运行。

恭喜！您已在 Happy Birthday 应用中添加了图片，并按照无障碍功能指南做出了调整，同时还让应用更易于翻译成其他语言！

五、解决方案代码

Happy Birthday 应用的解决方案代码已上传到 GitHub 中，如果您想了解我们最终采用的代码，可以去查看。

GitHub 这项服务可供开发者管理自己软件项目的代码。该服务所采用的 Git 是一个版本控制系统，可跟踪对每个代码版本进行的更改。如果您见过 Google 文档的版本记录，则可以看到过去什么时候对文档做出了哪些修改。同理，您可以跟踪项目中代码的版本记录。无论您是以个人还是团队的身份参与项目，这都非常有用。

GitHub 还有一个网站，您可以在其中查看和管理自己的项目。您可以通过下面的 GitHub 链接在线浏览 Happy Birthday 项目文件，或将这些文件下载到计算机上。

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

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

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

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

  1. 启动 Android Studio。
  2. 在 窗口中，点击 。

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

  1. 在 对话框中，转到解压缩的项目文件夹所在的位置（可能在 文件夹中）。
  2. 在项目文件夹中，选择 Happy Birthday 文件夹。
  3. 点击“Open”。
  4. 等待 Android Studio 打开项目。
  5. 点击 按钮以构建并运行应用。请确保该应用按预期构建。
  6. 在 工具窗口中浏览项目文件，了解应用的设置方式。

六、总结

  • Android Studio 中的 可帮助您添加和整理图片及其他资源。
  • ImageView是在应用中显示图片的界面元素。
  • ImageViews 应包含内容说明，以便提高应用的无障碍性。
  • 向用户显示的文本（例如生日祝福）应提取到字符串资源中，以便让应用更容易翻译成其他语言。

七、了解详情

《Android 之 Kotlin 开发基础》相关词汇 Android Studio 中的 Resource Manager [ImageView]类 无障碍功能 支持不同的语言 开始使用 GitHub

八、自行练习

联系是可选的。您可以借此机会练习您在此文章中学到的知识。

  1. 根据您的设计创建自己的生日贺卡应用。
  2. 首先考虑一下您将需要哪些 Views。
  3. 采用什么样的顺序添加起来最容易？
  4. 您需要将哪些图片添加到可绘制对象文件夹中？

Android 应用中通常会使用 JPEG 文件和 PNG 文件这两类位图图片。PNG 文件可以包含透明（空白）区域。如需详细了解图片格式，请参阅面向开发者的参考资料。

  1. 务必先使用约束条件和外边距来放置 Views，然后再设置其样式。
  2. 若要让文本在一些图片上更加突出，请尝试使用 。

您完成的应用应能正常运行（不出现错误）并展示您设计的生日贺卡。

恭喜，您已创建自己的 Birthday Card 应用！

下一篇：【 Kotlin 中的类和对象实例】

标签： 卡边缘连接器card

锐单商城拥有海量元器件数据手册、 IC替代型号，打造 电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台