生成带有图片附件的界面

AI 代理经过独特训练,能够帮助您使用 Jetpack Compose 并遵循 Android 最佳实践,将 Android 应用界面愿景变为现实。本页介绍了如何使用 AI 创建应用界面并对其进行迭代。

如需使用 AI 生成界面,请按以下常规步骤操作:

  1. 创建所需应用界面的模拟。您可以从设计工具中导出 PNG,甚至可以使用手绘图片。

    应用界面的手绘线框图
    图 1:应用界面的线框图。
  2. 点击附加图片文件按钮 “附加图片文件”图标,将图片附加到您的查询中。您还可以直接从没有现有预览的文件的预览面板中点击根据屏幕截图生成代码

    图 2:在空白的“预览”面板中根据屏幕截图生成代码。
  3. 在聊天字段中,让 AI 代理生成界面代码,例如“为提供的图片生成 Jetpack Compose 代码”。提交查询和图片后,AI 代理会建议用于创建建议的界面的代码。AI 代理通常也会提供 Compose 预览的代码,因此您可以在将代码导入项目后快速直观地了解界面;如果 AI 代理未提供代码,请让它生成 Compose 预览

    Gemini 对话界面,显示根据图片生成的 Jetpack Compose 代码。
    图 2:Gemini 根据附加的图片生成 Jetpack Compose 代码。
  4. 导入代码后,您可以在预览面板中看到 Compose 预览,然后可以直接点击预览让 Gemini 转换界面,从而迭代界面。如果您有想要实现的界面效果的图片,还可以通过以下方式在界面上进行迭代:右键点击预览,然后依次选择 AI Actions > Match UI to Target Image

    Android Studio 显示了 Compose 预览,其中包含所选的界面元素和 Gemini 对话。
    图 5:使用 Gemini 直接从 Compose 预览中转换界面元素。
    图 6:使用“将界面与目标图片相匹配”功能的示例

查找并修正界面质量问题

AI 代理还可以帮助您确保界面具有高质量和无障碍性。 右键点击您的 Compose 预览,然后依次选择 AI 操作 > 修复所有界面检查问题。 该代理会审核您的界面是否存在常见问题(例如无障碍功能问题),并提出代码修复建议来解决这些问题。

图 7:使用 AI 修复界面问题
图 8:应用修复后的界面示例。