L'agente AI è dotato di funzionalità uniche che ti aiutano a trasformare la tua visione dell'UI dell'app per Android in realtà, utilizzando Jetpack Compose e seguendo le best practice di Android. Questa pagina descrive come creare e perfezionare l'UI di un'app con l'AI.
Per generare un'UI con l'AI, segui questi passaggi generali:
Crea un mockup dell'UI dell'app che vuoi. Puoi esportare un PNG da uno strumento di progettazione o persino utilizzare un'immagine disegnata a mano.
Figura 1: un wireframe dell'interfaccia utente di un'app. Allega l'immagine alla query facendo clic sul pulsante Allega file immagine
. Puoi anche fare clic su Genera codice dallo screenshot direttamente dal riquadro Anteprima in un file senza un'anteprima esistente.
Figura 2: genera codice da uno screenshot in un riquadro Anteprima vuoto. Nel campo della chat, chiedi all'agente AI di generare il codice dell'UI, ad esempio "Genera codice Jetpack Compose per l'immagine fornita". Quando invii la query e l'immagine, l'agente AI suggerisce il codice per creare l'UI proposta. In genere, l'agente AI fornisce anche il codice per l'anteprima di Compose, in modo che tu possa visualizzare rapidamente l'UI dopo averla importata nel progetto. In caso contrario, chiedi di generare le anteprime di Compose.
Figura 2: Gemini genera codice Jetpack Compose da un'immagine allegata. Dopo aver importato il codice e visualizzato l'anteprima di Compose nel riquadro di anteprima, puoi perfezionare l'UI facendo clic direttamente sull'anteprima e chiedendo a Gemini di trasformarla. Se hai un'immagine di ciò che vuoi, puoi anche perfezionare l'UI facendo clic con il tasto destro del mouse sull'anteprima e selezionando Azioni AI > Abbina l'UI all'immagine di destinazione.
Figura 5: utilizzo di Gemini per trasformare gli elementi dell'UI direttamente dall'anteprima di Compose. 
Figura 6: esempio di utilizzo di "Abbina l'UI all'immagine di destinazione"
Trovare e risolvere i problemi di qualità dell'UI
L'agente AI può anche aiutarti a garantire che l'UI sia di alta qualità e accessibile. Fai clic con il tasto destro del mouse sull'anteprima di Compose e seleziona Azioni AI > Correggi tutti i problemi di controllo dell'UI. L'agente esegue un controllo dell'UI per individuare problemi comuni, come quelli di accessibilità, e propone correzioni del codice per risolverli.
