Der KI-Agent ist einzigartig ausgestattet, um Ihnen dabei zu helfen, Ihre Android-App-UI-Vision mit Jetpack Compose und den Best Practices für Android zu verwirklichen. Auf dieser Seite wird beschrieben, wie Sie mit KI eine App-UI erstellen und iterieren.
So generieren Sie eine UI mit KI:
Erstellen Sie ein Mock-up der gewünschten App-UI. Sie können eine PNG-Datei aus einem Designtool exportieren oder sogar ein handgezeichnetes Bild verwenden.
Abbildung 1: Ein Wireframe einer App-Benutzeroberfläche. Hängen Sie das Bild an Ihre Abfrage an, indem Sie auf die Schaltfläche Bilddatei anhängen
klicken. Sie können auch direkt im Bereich Vorschau einer Datei ohne vorhandene Vorschau auf Code aus Screenshot generieren klicken.
Abbildung 2: Code aus einem Screenshot in einem leeren Vorschaufenster generieren. Bitten Sie den KI-Agenten im Chatfeld, den UI-Code zu generieren, z. B. „Jetpack Compose-Code für das bereitgestellte Bild generieren“. Wenn Sie die Abfrage und das Bild senden, schlägt der KI-Agent Code vor, um die vorgeschlagene UI zu erstellen. Der KI Agent stellt in der Regel auch den Code für die Compose-Vorschau bereit, damit Sie sich die UI schnell ansehen können, nachdem Sie sie in Ihr Projekt importiert haben. Wenn das nicht der Fall ist, bitten Sie ihn, die Compose-Vorschau zu generieren.
Abbildung 2: Gemini generiert Jetpack Compose-Code aus einem angehängten Bild. Nachdem Sie den Code importiert haben und die Compose-Vorschau im Vorschau fenster sehen, können Sie die UI iterieren, indem Sie direkt auf die Vorschau klicken und Gemini bitten, sie zu transformieren. Wenn Sie ein Bild von dem haben, was Sie möchten, können Sie die UI auch iterieren, indem Sie mit der rechten Maustaste auf die Vorschau klicken und KI-Aktionen > UI an Zielbild anpassen auswählen.
Abbildung 5: UI-Elemente mit Gemini direkt aus der Compose-Vorschau transformieren. 
Abbildung 6: Beispiel für die Verwendung von „UI an Zielbild anpassen“
Probleme mit der UI-Qualität finden und beheben
Der KI-Agent kann Ihnen auch dabei helfen, sicherzustellen, dass Ihre UI von hoher Qualität und barrierefrei ist. Klicken Sie mit der rechten Maustaste auf die Compose-Vorschau und wählen Sie KI-Aktionen > Alle Probleme bei der UI-Prüfung beheben aus. Der Agent prüft Ihre UI auf häufige Probleme wie Barrierefreiheitsprobleme und schlägt Codekorrekturen vor, um sie zu beheben.
