练习:Compose 基础知识

1. 开始之前

恭喜!您已经构建了您的第一个应用,并掌握了 Jetpack Compose 的基础知识。现在,您可以将学到的知识付诸实践了。

这些练习重点介绍如何使用您已学习的 UI 可组合项构建应用。这些练习的灵感来自现实世界的用例,其中一些您可能以前遇到过。

这些练习为您提供实现所需资源,例如图像和字符串。字符串资源包含在 UI 中显示的文本。您将这些字符串添加到 strings.xml 文件中并在代码中使用它们。

此外,这些练习还为您提供了一组规范,例如文本内容的字体大小或 UI 组件周围的填充。这些规范可帮助您构建一致的 UI,并经常指导开发者可视化和构建屏幕。在与组织团队合作时,您可能会遇到类似的规范。

某些练习可能需要您使用 Modifier。在这种情况下,请参阅每个问题提供的**参考**部分,您可以在其中找到与修饰符或属性相关的文档链接。您可以阅读文档并确定如何在应用中整合这些概念。理解文档的能力是您应该培养的重要技能之一,以提升您的知识。

解决方案代码在最后提供,但在查看答案之前,请尝试解决练习。将解决方案视为实现应用的一种方法。解决方案代码使用了您目前学到的基本可组合项和概念。还有很大的改进空间,因此请随意尝试和体验不同的方法。

按照您舒适的速度完成这些问题。我们鼓励您花尽可能多的时间认真解决每个问题。

最后,您应该使用 Android Studio 为这些练习创建单独的项目。

先决条件

您需要什么

  • 一台连接互联网并安装了 Android Studio 的电脑。

2. Compose 文章

Learn Together 应用显示关于多个 Jetpack 库的文章列表。用户可以选择他们感兴趣的主题并了解其最新进展。

在本练习中,您将为该应用构建一个屏幕,该屏幕显示 Jetpack Compose 的教程。您将使用此问题**资源**部分中提供的图像和字符串资源。

最终屏幕截图

完成实现后,您的设计应与该屏幕截图匹配

c8c16974d0aef074.png

UI 规范

遵循此 UI 规范

UI specification for building the Compose article screen.

  1. 将图像设置为填充整个屏幕的宽度。
  2. 将第一个 Text 可组合项的字体大小设置为 24sp,填充设置为 16dp(开始、结束、底部和顶部)。
  3. 将第二个 Text 可组合项的字体大小设置为默认值,填充设置为 16dp(开始和结束),文本对齐方式设置为 Justify
  4. 将第三个 Text 可组合项的字体大小设置为默认值,填充设置为 16dp(开始、结束、底部和顶部),文本对齐方式设置为 Justify

资源

您需要 此图像 导入您的项目 并使用这些字符串

  • Jetpack Compose 教程
  • Jetpack Compose 是用于构建原生 Android UI 的现代工具包。Compose 通过更少的代码、强大的工具和直观的 Kotlin API 简化并加快了 Android 上的 UI 开发。
  • 在本教程中,您将使用声明式函数构建简单的 UI 组件。您调用 Compose 函数来指定所需的元素,Compose 编译器将完成其余工作。Compose 基于可组合函数构建。这些函数允许您以编程方式定义应用的 UI,因为它们允许您描述 UI 的外观并提供数据依赖项,而不是关注 UI 构造过程,例如初始化元素然后将其附加到父元素。要创建可组合函数,请在函数名称中添加 @Composable 注解。

提示:哪个可组合项垂直对齐其子项?

参考

3. 任务管理器

任务管理器应用允许用户管理他们的日常任务并检查他们需要完成的任务。

在本练习中,您将构建用户在完成当天所有任务时看到的屏幕。

最终屏幕截图

完成实现后,您的设计应与该屏幕截图匹配

b5a2de2b0064e729.png

UI 规范

遵循这些 UI 规范

UI specification for task completed screen.

  1. 垂直和水平居中对齐屏幕上的所有内容。
  2. 将第一个 Text 可组合项的字体粗细设置为 Bold,顶部填充设置为 24dp,底部填充设置为 8dp
  3. 将第二个 Text 可组合项的字体大小设置为 16sp

资源

此图像(您需要下载然后导入到您的项目中)和这些字符串

  • 所有任务已完成
  • 干得好!

4. Compose 象限

在本练习中,您需要应用您目前学到的几乎所有概念,然后更进一步探索新的 Modifier 和属性。这看起来可能是一个额外的挑战,但不用担心!您可以查看此问题的**参考**部分,您可以在其中找到这些 Modifier 类和属性的链接,并将其用于实现。

您需要构建一个应用,显示您已学习的 Composable 函数的相关信息。

屏幕被分成四个象限。每个象限都提供一个 Composable 函数的名称,并用一句话对其进行描述。

最终屏幕截图

完成实现后,您的设计应与该屏幕截图匹配

c0c70117bbd3b5b5.png

UI 规范

遵循整个屏幕的这些 UI 规范

  • 将整个屏幕分成四个相等的部分,每个部分都包含一个 Compose 卡片,并显示关于 Composable 函数的信息。

5b11c91ad6a356eb.png

遵循每个象限的这些规范

e6befaa575985819.png

  1. 将整个象限(开始、结束、顶部和底部)的填充设置为 16dp
  2. 垂直和水平居中对齐每个象限中的所有内容。
  3. 将第一个 Text 可组合项格式设置为粗体,底部填充设置为 16dp
  4. 将第二个 Text 可组合项的字体大小设置为 Default

资源

这些颜色

  • Color(0xFFEADDFF)
  • Color(0xFFD0BCFF)
  • Color(0xFFB69DF8)
  • Color(0xFFF6EDFF)

这些字符串

  • Text 可组合项
  • 显示文本并遵循推荐的 Material Design 指南。
  • Image 可组合项
  • 创建一个可组合项,用于布局和绘制给定的 Painter 类对象。
  • Row 可组合项
  • 一个布局可组合项,它将子项水平排列。
  • Column 可组合项
  • 一个布局可组合项,它将子项垂直排列。

参考

5. 解决方案代码