作者 / Android Studio 開發(fā)者產(chǎn)品經(jīng)理 Paris Hsu

在開發(fā)生命周期的每個階段，Android Studio 中的 Gemini 都已成為您的 AI 助手，助您更輕松地構(gòu)建高質(zhì)量的應(yīng)用。我們很高興地與您分享一項重大升級：Android Studio 中的 Gemini 現(xiàn)已支持多模態(tài)輸入，您可在提示中直接添加圖像!這為團隊協(xié)作和界面開發(fā)工作流程解鎖了更多新的可能性。

您可以下載最新的 Android Studio Canary 版來體驗這項新功能。我們列舉了一些可以嘗試的用例，目前仍在努力將此功能引入未來的穩(wěn)定版本。在此過程中，我們十分期待了解您的想法與反饋。

圖像附件 - 交互新維度

我們在 2024 Google I/O 大會上首次預(yù)覽了 Gemini 的多模態(tài)功能。借助這項技術(shù)，Android Studio 中的 Gemini 能夠理解簡單的線框圖，并將其轉(zhuǎn)換為可運行的 Jetpack Compose 代碼。

現(xiàn)在，您可以在 Gemini 聊天窗口中找到圖像附件圖標。只需將 JPEG 或 PNG 文件作為附件添加到提示中，即可靜待 Gemini 理解并響應(yīng)視覺信息。我們觀察到，具有強烈色彩對比度的圖像效果最佳。

我們建議您嘗試各種提示和圖像。您可從以下這些引人注目的用例入手：

快速界面原型設(shè)計和迭代：將應(yīng)用界面的簡單線框圖或高保真原型轉(zhuǎn)換為可運行的代碼。

圖表說明和文檔：讓 Gemini 解釋復(fù)雜架構(gòu)或數(shù)據(jù)流程圖的組成部分和關(guān)系，從而獲得更深入的理解。

界面問題排查：捕獲界面錯誤屏幕截圖，并向 Gemini 尋求解決方案。

快速界面原型設(shè)計和迭代

Gemini 的多模態(tài)支持可讓您將視覺設(shè)計轉(zhuǎn)換為可運行的界面代碼。您只需上傳圖像并使用清晰的提示即可。無論您是提供自己制作的草圖還是設(shè)計師的模型圖，這一功能都可以發(fā)揮作用。

以下是一個示例提示："請根據(jù)提供的圖像編寫 Android Jetpack Compose 代碼，生成一個盡可能接近該圖像的界面。請確保包括導(dǎo)入語句、使用 Material3 并添加代碼注釋。" 然后，您可以根據(jù)需要添加與圖像相關(guān)的特定或附加說明。

對于更復(fù)雜的界面，請優(yōu)化您的提示以明確所需的特定功能。例如，在轉(zhuǎn)換計算器原型時，添加 "使交互和計算按預(yù)期工作" 的提示，會生成一個功能完備的計算器：

請注意：此功能提供的是一個初始的設(shè)計框架。這是一個很好的 "初稿"，需要您進行編輯和調(diào)整。常見的優(yōu)化包括確保導(dǎo)入正確的可繪制資源和圖標。您可以將生成的代碼理解為高效的起點，從而加快您的界面開發(fā)工作流程。

圖表說明和文檔

借助 Gemini 的多模態(tài)能力，您還可以嘗試上傳圖表圖像，并要求提供解釋或生成文檔。

提示示例：上傳 Now in Android 架構(gòu)圖，并輸入 "解釋此圖中的組件和數(shù)據(jù)流" 或 "撰寫有關(guān)此圖的文檔"。

界面問題排查

利用 Gemini 的視覺分析能力來快速識別和解決 bug。上傳有問題的界面屏幕截圖，Gemini 將分析圖像并提供潛在的解決方案。您還可以添加相關(guān)的代碼片段，以獲得更精確的幫助。

在下面的示例中，我們使用了 Compose 界面檢查，發(fā)現(xiàn)按鈕在平板電腦屏幕上拉伸得太寬，因此我們截取了屏幕截圖并要求 Gemini 提供解決方案——它能夠利用窗口大小類別 (Window Size Classes) 來提供正確的解決方案。