Android Studio 工作流

导入界面软件包

在 Figma 中创建界面软件包后,您可以将其导入 Android Studio 项目。构建项目后,Relay 会生成 Jetpack Compose 代码。

如需将界面软件包导入 Android Studio 项目,请执行以下操作:

  1. 依次选择 File > New > Import UI Packages...

    “File”菜单中的“Import UI Packages...”选项
  2. 输入包含界面软件包的 Figma 文件的网址。

    “Import UI Packages”对话框
  3. 点击 Next

  4. 选择要导入的界面软件包。显示的组件取决于您粘贴的是组件、页面还是文件链接。如果界面软件包已导入,则它会被标记为“UPDATED”。否则,它会显示为“NEW”。

    组件预览
  5. 点击 Finish 即可将所选软件包及其依赖项导入 ui-packages 文件夹。

界面软件包导入屏幕

导入屏幕包含以下信息:

界面软件包导入屏幕
  • 组件及其变体的预览图片。
  • 标题和说明。
  • 变体及其属性的列表。
  • 内容参数及其类型的列表。
  • 互动处理程序及其类型的列表。

界面软件包工具窗口

界面软件包边栏

Android Studio 插件新增了一个名为 UI Package 的工具窗口。当您在界面软件包文件夹中选择某个文件(例如app/src/main/ui-packages/mycomponent/)时,该工具窗口就会打开。工具窗口会显示界面软件包及其内容的摘要。

构建 Android 项目

当您构建包含界面软件包的 Android Studio 项目时,Relay Gradle 插件会在界面软件包中生成代码并对其进行编译。系统还会下载字体素材资源并将其复制到您的项目中。

如果您只希望构建导入的界面软件包,而不是构建整个项目,则可以运行以下特定的 Gradle 任务:

  • generateDebugRelayCodegenerateReleaseRelayCode 会生成派生于界面软件包的调试版本或发布版本的代码。
  • generateRelayRuntimeCode 会创建由已生成代码使用的运行时库。

在构建流程中:

  1. 代码是从界面软件包生成的,并存储在单独的文件夹中。
  2. 图片和字体会复制到生成的通用资源文件夹中。

如需了解这些文件夹的位置,请参阅了解界面软件包和生成的代码

更新界面软件包

当新的设计版本准备就绪后,设计人员应创建一个新的已命名版本的 Figma 文件

在 Android Studio 中,确保“Project”工具窗口位于 Android 视图中。

  1. 在模块的 ui-packages 文件夹下,右键点击要更新的界面软件包文件夹,然后选择 Update UI Package(s)。在以下示例中,我们选择了五个要更新的界面软件包。

    上下文菜单中的“Update 5 UI Package”选项
  2. 您还可以右键点击 ui-packages 文件夹以更新所有界面软件包。

    上下文菜单中的“Update All UI Packages”选项