L'agente AI è dotato di strumenti unici per aiutarti a realizzare la tua visione dell'interfaccia utente dell'app per Android utilizzando Jetpack Compose e seguendo le best practice di Android. Questa pagina descrive come creare e iterare l'interfaccia utente di un'app con l'AI.
Per generare un'interfaccia utente con l'AI, segui questi passaggi generali:
Crea un mockup dell'interfaccia utente dell'app che preferisci. Puoi esportare un PNG da uno strumento di progettazione o persino utilizzare un'immagine disegnata a mano.
Figura 1: 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 da screenshot direttamente dal riquadro Anteprima
in un file senza un'anteprima esistente.
Figura 2: genera il codice da uno screenshot in un riquadro Anteprima vuoto. Nel campo della chat, chiedi all'agente AI di generare il codice UI, ad esempio "Genera il codice Jetpack Compose per l'immagine fornita". Quando invii la query e l'immagine, l'agente AI suggerisce il codice per creare la UI proposta. L'agente AI di solito fornisce anche il codice per l'anteprima di Compose, così puoi visualizzare rapidamente la UI dopo averla importata nel progetto. Se non lo fa, chiedigli di generare le anteprime di Compose.
Figura 2: Gemini genera codice Jetpack Compose da un'immagine allegata. Una volta importato il codice e visualizzata l'anteprima di Compose nel riquadro di anteprima, puoi iterare l'interfaccia utente facendo clic direttamente sull'anteprima e chiedendo a Gemini di trasformarla. Se hai un'immagine di ciò che vuoi, puoi anche iterare sull'interfaccia utente facendo clic con il tasto destro del mouse sull'anteprima e selezionando Azioni AI > Abbina UI all'immagine di destinazione.
Figura 5: utilizzo di Gemini per trasformare gli elementi della UI direttamente dall'anteprima di Composizione. 
Figura 6: esempio di utilizzo di "Corrispondenza UI con immagine target"
Trovare e risolvere i problemi di qualità dell'interfaccia utente
L'agente AI può anche aiutarti a garantire che la tua UI sia di alta qualità e accessibile. Fai clic con il tasto destro del mouse sull'anteprima di Composizione e seleziona Azioni AI > Risolvi tutti i problemi di controllo dell'interfaccia utente. L'agente esegue l'audit della tua UI per rilevare problemi comuni, ad esempio quelli di accessibilità, e propone correzioni del codice per risolverli.
