前语

相信很多人看到本次同享分标题，第一反响都和我相同：Relay是什么？有什么用？和Compose有什么关系？不要着急，看完这篇文章，这些你都会了解。

Relay是什么

官方一点说：Relay 能够在规划人员和开发者之间即时移送 Android 界面组件。

规划人员：运用 Relay for Figma 插件为界面组件增加注解并进行打包，包含布局、样式、动态内容和交互行为的相关信息，以便于开发者运用。

开发者：运用 Relay for Android Studio 插件导入界面软件包，并生成完美的 Jetpack Compose 代码。

说了这么多，晦涩难懂，简单的说便是凭借Relay能够直接根据UI图生成Compose代码，咱们来看怎么运用。

环境装备

根本装备

  • 创立一个Figma账号www.figma.com/signup

Figma是一个专业的原型图或UI规划东西，规划师通常用此用来为开发者供给UI图。

  • 最新版的Android Studio

  • 装置Relay for Android Studio 插件

前两步没有什么好说的，下载好Android Studio之后咱们来装置Relay插件。

设计图转Compose代码，Relay帮你轻松搞定

装置好Relay插件之后，咱们需求将Android Studio 相关到Figma，这要凭借根本装备中的第一步。

Android Studio相关Figma

  1. 在Figma 帐号中，点击页面顶部的个人资料图标，然后挑选 Settings，如下图所示。

设计图转Compose代码，Relay帮你轻松搞定

  1. 挑选 Personal access tokens ，生成Token，如下图所示。

设计图转Compose代码，Relay帮你轻松搞定

生成Token后咱们将token仿制下来。

  1. 设置Token

在Android Studio中挑选 Tool->Relay Setting，将上一过程生成的Token填入。

设计图转Compose代码，Relay帮你轻松搞定

这样咱们就将Android开发者的环境装备好了，除此之外，咱们还要装置Relay for Figma插件。

装置Relay for Figma插件

凭借 Relay for Figma 插件，运用 Figma 的任何用户都能够为其规划增加注解，并同享给运用 Android Studio 和 Jetpack Compose 的开发者。

咱们能够直接点击Relay for Figma | Figma Community页面中的Try it out。

设计图转Compose代码，Relay帮你轻松搞定

之后一向点击下一步即可。这一过程的教程实践开发中都是规划师需求操作的，咱们了解即可。

上述环境装备好之后咱们就能够来在项目中尝试了。

基础体会

创立Android项目

首要咱们来创立一个Compose项目，项目创立完成后，咱们在模块中的Gradle文件中增加Relay Gradle 插件。

plugins{
id'com.android.application'
id'org.jetbrains.kotlin.android'
id'com.google.relay'version'0.3.06'
}

Relay Gradle 插件能够确保在 Figma 中运用 Relay for Figma 插件增加规划 intent 信息注解的规划在构建期间能够正确转换为代码。

在 Figma 中创立 UI 包

由于我不是专业的规划师，所以这儿我运用官方供给的HelloFigma.fig示例组件来演示。

咱们直接将下载好的HelloFigma.fig拖入到Figma中，咱们能够看到示例是一个图片与文本组件笔直摆放。

设计图转Compose代码，Relay帮你轻松搞定

创立组件

咱们首要需求将其转换为一个组件。挑选 Hello Card 菜单，然后从东西栏中单击 Create Component。

设计图转Compose代码，Relay帮你轻松搞定

创立UI包

首要打开文件中的 Relay for Figma 插件。

设计图转Compose代码，Relay帮你轻松搞定

挑选Create UI Package.

设计图转Compose代码，Relay帮你轻松搞定

挑选 UI 包后，向“摘要”增加说明。这儿增加说明为：“图文笔直排列”。

设计图转Compose代码，Relay帮你轻松搞定

然后点击 Share with developer 与开发人员同享。然后输入文件称号和说明，如下图所示。

设计图转Compose代码，Relay帮你轻松搞定

填写完信息后点击保存，接着咱们就能够导入到Android Studio中了。

在Android Studio中导入UI包

导入UI包

首要咱们点击Figma平台中的Share按钮，并仿制地址。

设计图转Compose代码，Relay帮你轻松搞定

然后在Android Studio 中，顺次挑选 File > New > Import UI Packages

设计图转Compose代码，Relay帮你轻松搞定

在输入框中输入刚刚仿制的链接地址。

设计图转Compose代码，Relay帮你轻松搞定

等候文件下载，成功下载后，系统会显现组件预览。

设计图转Compose代码，Relay帮你轻松搞定

点击Create，生成的项目目录结构如下图所示。

设计图转Compose代码，Relay帮你轻松搞定

ui-packages中目录对应描绘如下表所示。

称号 描绘
hello_card/* 用于描绘代码中的组件所需的一切源资源。这些文件用于在构建过程中生成代码。
hello_card.json 包含组件定义的 JSON 文件（包含其布局和其他属性）。
hello_card/fonts/* 在 Jetpack Compose 中支撑相应组件所需的一切字体文件。
hello_card/*.png 支撑相应组件所需的一切图片素材资源
hello_card/VERSION.txt 用于导入界面软件包的 Relay for Android Studio 插件版别
hello_card/config.json 用于预览的主题

此外，要注意的是这些文件需求作为项目的一部分提交到源代码控制系统。导入UI包之后咱们就能够构建生成代码。

构建项目

点击build直接构建，构建成功之后，生成的代码如下图所示。

设计图转Compose代码，Relay帮你轻松搞定

这儿咱们只需求关注com.example.hellofingma.hellocard目录下的文件即可，HelloCard.kt文件便是Relay插件为咱们生成的Compose代码。代码如下所示：

@Composable
funHelloCard(modifier:Modifier=Modifier){
TopLevel(modifier=modifier){
Image()
Title()
}  ...
}

代码整体来看和咱们自己写的差不多。

引证代码

主动生成代码之后，咱们就能够直接引证刚刚生成的HelloCard函数。

classMainActivity:ComponentActivity(){
overridefunonCreate(savedInstanceState:Bundle?){
super.onCreate(savedInstanceState)
setContent{
HelloFigmaTheme{
//A surface container using the'background'color from the theme
Surface(
modifier=Modifier.fillMaxSize(),
color=MaterialTheme.colors.background
){
HelloCard()
}
}
}
}
}

运行程序，成果如下图所示。

设计图转Compose代码，Relay帮你轻松搞定

咱们能够看到，凭借Relay插件为咱们生成了与UI一致的Compose代码。咱们在事务开发中可能会遇到UI图更新，咱们该怎么处理呢？

UI更新

咱们在Figma中将文字色彩改为赤色，并且再多增加一个文本显现恣意内容。

设计图转Compose代码，Relay帮你轻松搞定

更改完之后咱们重复上述过程，发布UI包。

设计图转Compose代码，Relay帮你轻松搞定

发布完之后咱们直接在Android Studio中更新UI包。

设计图转Compose代码，Relay帮你轻松搞定

更新之后，从头build，然后运行程序，成果如下图所示。

设计图转Compose代码，Relay帮你轻松搞定

生成的Compose代码也一起更新了，这样咱们就完成了运用Relay构建Compose使用的基础体会。非常的完美？等等，不对，咱们自己编写的Compose代码很多都是动态的，比方要有根本的点击事情，这个该怎么处理呢？

Relay的高档体会

首要咱们来看怎么传递文本参数，比方上图中的“阿黄哥”，这个文本内容让上层传递咱们需求怎么做。

文本内容

咱们选中显现“阿黄哥”的文本组件userName，右击挑选Relay for Figma。

设计图转Compose代码，Relay帮你轻松搞定

为userName增加text-content参数。

设计图转Compose代码，Relay帮你轻松搞定

设计图转Compose代码，Relay帮你轻松搞定

增加好之后依照之前的过程保存，然后通过Android Studio更新。从头build，生成的代码就会多一个userName参数，默认是空值。

@Composable
funHelloCard(
modifier:Modifier=Modifier,
username:String=""
){
TopLevel(modifier=modifier){
Image()
Title()
Username(username=username)
}
}

这样上层在调用的时分就能够传递自己的内容，不管是阿黄哥还是阿黄嫂。

setContent{
HelloFigmaTheme{
//A surface container using the'background'color from the theme
Surface(
modifier=Modifier.fillMaxSize(),
color=MaterialTheme.colors.background
){
HelloCard(username="阿黄嫂")
}
}
}

点击事情

在上面截图中大家应该看到了，增加参数的时分有文本内容、色彩、单机双击等。接着咱们来增加一个点击事情。相同的办法，就不详细为大家演示了。

设计图转Compose代码，Relay帮你轻松搞定

终究生成的代码如下所示。

@Composable
funHelloCard(
modifier:Modifier=Modifier,
username:String="",
onClick:()->Unit={}
){
TopLevel(modifier=modifier){
Image()
Title()
Username(
onClick=onClick,
username=username
)
}
}

上层调用的时分咱们能够传递自己的点击事情。

HelloCard(username="阿黄嫂",onClick={
//点击事情
})

除此之外Relay还有更多有趣的用法，需求咱们在实践项目运用过程中渐渐摸索。

总结

总的来看，Relay是一个好东西，但不是一个那么好的东西。

  • Relay 能够根据UI图生成Compose 代码，包含增加参数、点击事情等
  • Relay 当时不支撑支撑阴影、文字属性、图层旋转等，并且仅支撑Google fonts字体，要求较高时无法满意
  • 生成的Compose代码边距比Figma要略大
  • ….

纵使Relay当时存在一些问题，但是在某些情况下确实能够简化Compose使用的开发。总之，AI会写Compose，Relay也会写Compose。所以，你还不学习Compose吗？