Sviluppare un'interfaccia utente con Visualizzazioni

Implementazione di Jetpack Composearrow_forward

Il Layout Editor ti consente di creare rapidamente layout basati su View trascinando gli elementi UI in un editor di progettazione visiva anziché scrivere codice XML per il layout. L'editor di progettazione può visualizzare l'anteprima del layout su diversi dispositivi e versioni Android e puoi ridimensionare dinamicamente il layout per assicurarti che funzioni correttamente su schermi di dimensioni diverse.

L'editor di layout è particolarmente utile quando crei un layout con ConstraintLayout.

Questa pagina fornisce una panoramica del Layout Editor. Per saperne di più sui concetti di base del layout, consulta la pagina Layout.

Introduzione al Layout Editor

Il Layout Editor viene visualizzato quando apri un file di layout XML.

1. Tavolozza: contiene varie visualizzazioni e gruppi di visualizzazioni che puoi trascinare nel layout.
2. Albero dei componenti: mostra la gerarchia dei componenti nel layout.
3. Barra degli strumenti: contiene pulsanti che configurano l'aspetto del layout nell'editor e modificano gli attributi del layout.
4. Editor di progettazione: ti consente di modificare il layout nella visualizzazione struttura, nella visualizzazione progetto o in entrambe.
5. Attributi: contiene i controlli per gli attributi della visualizzazione selezionata.
6. Modalità di visualizzazione: ti consente di visualizzare il layout in modalità Codice , Divisa o Struttura . La modalità Dividi mostra le finestre Codice e Progettazione contemporaneamente.
7. Controlli di zoom e panoramica: controlla le dimensioni e la posizione dell'anteprima all'interno dell'editor.

Quando apri un file di layout XML, l'editor di progettazione si apre per impostazione predefinita, come mostrato nella figura 1. Per modificare l'XML del layout nell'editor di testo, fai clic sul pulsante Codice nell'angolo in alto a destra della finestra. Tieni presente che i riquadri Tavolozza, Albero dei componenti e Attributi non sono disponibili durante la modifica del layout in Vista Codice.

Suggerimento: per passare dall'editor di testo a quello di progettazione e viceversa, premi Alt (Control su macOS) più Shift e il tasto Freccia destra o sinistra.

Modificare l'aspetto dell'anteprima

I pulsanti nella riga superiore dell'editor di progettazione ti consentono di configurare l'aspetto del layout nell'editor.

1. Progettazione e bozza: seleziona la modalità di visualizzazione del layout nell'editor. Puoi anche premere B per scorrere questi tipi di visualizzazione.
   • Scegli Progetto per visualizzare un'anteprima renderizzata del layout.
   • Scegli Progetto per visualizzare solo i contorni di ogni prospettiva.
   • Scegli Progetto + Piantina per visualizzare entrambe le visualizzazioni una accanto all'altra.
2. Varianti di orientamento e layout dello schermo: scegli tra l'orientamento orizzontale o verticale dello schermo oppure scegli altre modalità dello schermo per cui la tua app fornisce layout alternativi, ad esempio la modalità notte. Questo menu contiene anche i comandi per creare una nuova variante di layout, come descritto in una sezione di questa pagina. Puoi anche premere la lettera O sulla tastiera per cambiare l'orientamento.

3. Modalità UI di sistema: se hai attivato il colore dinamico nella tua app, cambia gli sfondi e osserva come i layout reagiscono ai diversi sfondi scelti dagli utenti. Tieni presente che devi prima impostare un tema cromatico Material con colori dinamici, poi cambiare lo sfondo.

4. Tipo e dimensioni del dispositivo: seleziona il tipo di dispositivo (smartphone/tablet, Android TV o Wear OS) e la configurazione dello schermo (dimensioni e densità). Puoi scegliere tra diversi tipi di dispositivi preconfigurati e le tue definizioni di AVD e puoi creare un nuovo AVD selezionando Aggiungi definizione dispositivo dall'elenco, come mostrato nella figura 3.

   • Per ridimensionare il dispositivo, trascina l'angolo in basso a destra del layout.
   • Premi D per scorrere l'elenco dei dispositivi.

   Testare il layout rispetto ai dispositivi di riferimento in questo menu aiuta la tua app a scalare bene gli stati del layout su dispositivi reali.

   

5. Versione API: seleziona la versione di Android per visualizzare l'anteprima del layout. L'elenco delle versioni di Android disponibili dipende dalle versioni della piattaforma SDK che hai installato utilizzando SDK Manager.

6. Tema app: seleziona il tema dell'interfaccia utente da applicare all'anteprima. Questo funziona solo per gli stili di layout supportati, quindi molti temi di questo elenco generano un errore.

7. Lingua: seleziona la lingua da mostrare per le stringhe dell'interfaccia utente. Questo elenco mostra solo le lingue disponibili nelle risorse stringa. Se vuoi modificare le traduzioni, fai clic su Modifica traduzioni dal menu. Per saperne di più su come lavorare con le traduzioni, consulta Localizzare la UI con l'editor di traduzioni.

Creare un nuovo layout

Quando aggiungi un nuovo layout per la tua app, crea prima un file di layout predefinito nella directory layout/ predefinita del progetto in modo che venga applicato a tutte le configurazioni dei dispositivi. Una volta creato un layout predefinito, puoi creare varianti del layout, come descritto in una sezione di questa pagina, per configurazioni specifiche dei dispositivi, ad esempio per schermi di grandi dimensioni.

Puoi creare un nuovo layout in uno dei seguenti modi:

Utilizzare il menu principale di Android Studio

1. Nella finestra Progetto, fai clic sul modulo a cui vuoi aggiungere un layout.
2. Nel menu principale, seleziona File > Nuovo > XML > File XML di layout.
3. Nella finestra di dialogo visualizzata, fornisci il nome del file, il tag di layout radice e il set di risorse a cui appartiene il layout.
4. Fai clic su Fine per creare il layout.

Utilizzare la visualizzazione Progetto

1. Scegli la visualizzazione Progetto all'interno della finestra Progetto.
2. Fai clic con il tasto destro del mouse sulla directory del layout in cui vuoi aggiungere il layout.
3. Nel menu contestuale visualizzato, fai clic su Nuovo > File di risorse di layout.

Utilizzare la visualizzazione Android

1. Scegli la visualizzazione Android dalla finestra Progetto.
2. Fai clic con il tasto destro del mouse sulla cartella layout.
3. Nel menu contestuale visualizzato, seleziona Nuovo > File di risorse di layout.

Utilizzare Resource Manager

1. In Resource Manager, seleziona la scheda Layout.
2. Fai clic sul pulsante +, quindi su File di risorse di layout.

Utilizzare le varianti di layout per l'ottimizzazione per schermi diversi

Una variante di layout è una versione alternativa di un layout esistente ottimizzata per una determinata dimensione o orientamento dello schermo.

Utilizzare una variante di layout suggerita

Android Studio include varianti di layout comuni che puoi utilizzare nel tuo progetto. Per utilizzare una variante di layout suggerita:

1. Apri il file di layout predefinito.
2. Fai clic sull'icona Design nell'angolo in alto a destra della finestra.
3. Il nome del file di layout viene visualizzato nel menu a discesa Azione per cambiare e creare qualificatori per i file di layout. Seleziona il menu a discesa.
4. Nell'elenco a discesa, seleziona una variante come Crea qualificatore orizzontale o Crea qualificatore tablet.

   

Viene creata una nuova directory di layout.

Creare una variante del layout

Se vuoi creare una tua variante di layout:

1. Apri il file di layout predefinito.
2. Fai clic sull'icona Design nell'angolo in alto a destra della finestra.
3. Il nome del file di layout viene visualizzato nel menu a discesa Azione per cambiare e creare qualificatori per i file di layout. Seleziona il menu a discesa.

4. Nell'elenco a discesa, seleziona Aggiungi qualificatore risorsa. (vedi la figura 4 sopra).

   Viene visualizzata la finestra di dialogo Seleziona directory delle risorse.

5. Nella finestra di dialogo Seleziona directory delle risorse, definisci i qualificatori delle risorse per la variante:

   1. Seleziona un qualificatore dall'elenco Qualificatori disponibili.
   2. Fai clic sul pulsante Aggiungi .
   3. Inserisci i valori obbligatori.
   4. Ripeti questi passaggi per aggiungere altri qualificatori.

6. Dopo aver aggiunto tutti i qualificatori, fai clic su Ok.

Se hai più varianti dello stesso layout, puoi passare da una all'altra selezionando una variante dal menu a discesa Azione per cambiare e creare qualificatori per i file di layout.

Per ulteriori informazioni su come creare layout per display diversi, vedi Supportare diverse dimensioni del display.

Convertire una visualizzazione o un layout

Puoi convertire una visualizzazione in un altro tipo di visualizzazione e un layout in un altro tipo di layout:

1. Fai clic sul pulsante Design nell'angolo in alto a destra della finestra dell'editor.
2. Nell'albero dei componenti, fai clic con il tasto destro del mouse sulla visualizzazione o sul layout, quindi fai clic su Converti visualizzazione.
3. Nella finestra di dialogo visualizzata, scegli il nuovo tipo di visualizzazione o layout, poi fai clic su Applica.

Convertire un layout in ConstraintLayout

Per migliorare le prestazioni del layout, converti i layout precedenti in ConstraintLayout. ConstraintLayout utilizza un sistema di layout basato su vincoli che ti consente di creare la maggior parte dei layout senza gruppi di visualizzazione nidificati.

Per convertire un layout esistente in un ConstraintLayout:

1. Apri un layout esistente in Android Studio.
2. Fai clic sull'icona Design nell'angolo in alto a destra della finestra dell'editor.
3. Nell'albero dei componenti, fai clic con il tasto destro del mouse sul layout e poi fai clic su Converti your-layout-type in ConstraintLayout.

Per scoprire di più su ConstraintLayout, consulta Creare un'interfaccia utente reattiva con ConstraintLayout.

Trovare elementi nella tavolozza

Per cercare una visualizzazione o un gruppo di oggetti View per nome nella Tavolozza, fai clic sul pulsante Cerca nella parte superiore della tavolozza. In alternativa, puoi digitare il nome dell'elemento ogni volta che la finestra Tavolozza è attiva.

Nella tavolozza puoi trovare gli elementi utilizzati di frequente nella categoria Comune. Per aggiungere un elemento a questa categoria, fai clic con il tasto destro del mouse su una visualizzazione o un gruppo di visualizzazioni nella tavolozza e poi fai clic su Preferiti nel menu contestuale.

Aprire la documentazione dalla tavolozza

Per aprire la documentazione di riferimento per Android for Developers per una visualizzazione o un gruppo di oggetti View, seleziona l'elemento UI nella Tavolozza e premi Shift+F1.

Per visualizzare la documentazione delle linee guida di Material per una visualizzazione o un gruppo di oggetti View, fai clic con il tasto destro del mouse sull'elemento UI nella Palette e seleziona Linee guida di Material dal menu contestuale. Se non esiste una voce specifica per l'elemento, il comando apre la home page della documentazione delle linee guida di Material.

Aggiungere visualizzazioni al layout

Per iniziare a creare il layout, trascina le visualizzazioni e i gruppi di visualizzazioni dalla tavolozza nell'editor di progettazione. Quando inserisci una visualizzazione nel layout, l'editor mostra informazioni sulla relazione della visualizzazione con il resto del layout.

Se utilizzi ConstraintLayout, puoi creare automaticamente vincoli utilizzando le funzionalità Deduci vincoli e Connessione automatica.

Modificare gli attributi dell'area di modifica

Puoi modificare gli attributi della visualizzazione dal riquadro Attributi nel Layout Editor. Questa finestra è disponibile solo quando l'editor di progettazione è aperto, quindi visualizza il layout in modalità Progettazione o Divisa per utilizzarla.

Quando selezioni una vista, facendo clic sulla vista nell'albero dei componenti o nell'editor di progettazione, il riquadro Attributi mostra quanto segue, come indicato nella figura 5:

1. Attributi dichiarati: elenca gli attributi specificati nel file di layout. Per aggiungere un attributo, fai clic sul pulsante Aggiungi nella parte superiore della sezione.
2. Layout: contiene i controlli per la larghezza e l'altezza della visualizzazione. Se la visualizzazione si trova in un ConstraintLayout, questa sezione mostra anche il bias dei vincoli ed elenca i vincoli utilizzati dalla visualizzazione. Per maggiori informazioni sul controllo delle dimensioni delle visualizzazioni con ConstraintLayout, consulta Regolare le dimensioni della visualizzazione.
3. Attributi comuni: elenca gli attributi comuni per la visualizzazione selezionata. Per visualizzare tutti gli attributi disponibili, espandi la sezione Tutti gli attributi nella parte inferiore della finestra.
4. Cerca: ti consente di cercare un attributo di visualizzazione specifico.

5. Le icone a destra di ogni valore dell'attributo indicano se i valori dell'attributo sono riferimenti alle risorse. Questi indicatori sono solidi quando il valore è un riferimento alla risorsa e vuoti quando il valore è hardcoded per aiutarti a riconoscere i valori hardcoded a colpo d'occhio.

   Fai clic sugli indicatori in uno dei due stati per aprire la finestra di dialogo Risorse, in cui puoi selezionare un riferimento alla risorsa per l'attributo corrispondente.

6. L'evidenziazione rossa intorno a un valore dell'attributo indica un errore nel valore. Ad esempio, un errore potrebbe indicare una voce non valida per un attributo che definisce il layout.

   L'evidenziazione arancione indica un avviso per il valore. Ad esempio, potrebbe essere visualizzato un avviso quando utilizzi un valore hardcoded in cui è prevista un riferimento alla risorsa.

Aggiungere dati di esempio alla visualizzazione

Poiché molti layout Android si basano su dati di runtime, può essere difficile visualizzare l'aspetto di un layout durante la progettazione dell'app. Puoi aggiungere dati di anteprima di esempio a un TextView, a un ImageView o a un RecyclerView dall'editor del layout.

Per visualizzare la finestra Attributi visualizzazione in fase di progettazione, fai clic con il tasto destro del mouse su uno di questi tipi di visualizzazione e scegli Imposta dati di esempio, come mostrato nella figura 6.

Per un TextView, puoi scegliere tra diverse categorie di testo di esempio. Quando utilizzi il testo di esempio, Android Studio compila l'attributo text di TextView con i dati di esempio che hai scelto. Tieni presente che puoi scegliere un testo di esempio tramite la finestra Attributi visualizzazione in fase di progettazione solo se l'attributo text è vuoto.

Per un ImageView, puoi scegliere tra diverse immagini di esempio. Quando scegli un'immagine di esempio, Android Studio compila l'attributo tools:src di ImageView (o tools:srcCompat se utilizzi AndroidX).

Per un RecyclerView, puoi scegliere tra una serie di modelli che contengono immagini e testi di esempio. Quando utilizzi questi modelli, Android Studio aggiunge un file alla directory res/layout, recycler_view_item.xml, che contiene il layout per i dati di esempio. Android Studio aggiunge anche metadati al RecyclerView per visualizzare correttamente i dati di esempio.

Mostra avvisi ed errori di layout

Il Layout Editor ti avvisa di eventuali problemi di layout accanto alla visualizzazione corrispondente nell'albero dei componenti utilizzando un'icona a forma di cerchio rosso con punto esclamativo per gli errori o un'icona a forma di triangolo arancione con punto esclamativo per gli avvisi. Fai clic sull'icona per visualizzare ulteriori dettagli.

Per visualizzare tutti i problemi noti in una finestra sotto l'editor, fai clic su Mostra avvisi ed errori ( o ) nella barra degli strumenti.

Scaricare i caratteri e applicarli al testo

Quando utilizzi Android 8.0 (livello API 26) o la libreria Jetpack Core, puoi scegliere tra centinaia di caratteri seguendo questi passaggi:

1. Nell'editor di layout, fai clic sull'icona Progettazione per visualizzare il layout nell'editor di progettazione.
2. Seleziona una visualizzazione testo.
3. Nel riquadro Attributi, espandi textAppearance e poi la casella fontFamily.
4. Scorri fino in fondo all'elenco e fai clic su Altri caratteri per aprire la finestra di dialogo Risorse.
5. Nella finestra di dialogo Risorse, per selezionare un carattere, sfoglia l'elenco o digita nella barra di ricerca in alto. Se selezioni un carattere in Scaricabile, puoi fare clic su Crea carattere scaricabile per caricare il carattere in fase di runtime come carattere scaricabile oppure su Aggiungi carattere al progetto per inserire il file del carattere TTF nel tuo APK. I caratteri elencati in Android sono forniti dal sistema Android, pertanto non devono essere scaricati o inclusi nel tuo APK.
6. Fai clic su Ok per terminare.

Convalida del layout

La convalida del layout è uno strumento visivo per visualizzare in anteprima contemporaneamente i layout per diverse configurazioni di dispositivi e display, aiutandoti a individuare i problemi nei layout nelle prime fasi del processo. Per accedere a questa funzionalità, fai clic sulla scheda Convalida layout nell'angolo in alto a destra della finestra dell'IDE:

Figura 10. Scheda Convalida del layout.

Per passare da un insieme di configurazioni all'altro, seleziona una delle seguenti opzioni dal menu a discesa Dispositivi di riferimento nella parte superiore della finestra di convalida del layout:

• Dispositivi di riferimento
• Personalizzato
• Daltonico
• Dimensioni dei caratteri

Figura 11. Menu a discesa Dispositivi di riferimento.

Dispositivi di riferimento

I dispositivi di riferimento sono un insieme di dispositivi che ti consigliamo di testare. Sono incluse interfacce per smartphone, dispositivi pieghevoli, tablet e computer. Dovresti visualizzare l'anteprima del layout su questo insieme di dispositivi di riferimento:

Figura 12. Visualizza le anteprime dei dispositivi di riferimento nello strumento di convalida del layout.

Personalizzato

Per personalizzare una configurazione di visualizzazione da visualizzare in anteprima, scegli tra una serie di impostazioni, tra cui lingua, dispositivo o orientamento dello schermo:

Figura 16. Configura un display personalizzato nello strumento di convalida del layout.

Daltonico

Per rendere la tua app più accessibile agli utenti daltonici, convalida il layout con simulazioni dei tipi più comuni di daltonismo:

Figura 13. Anteprime della simulazione di cecità ai colori nello strumento di convalida del layout.

Dimensioni dei caratteri

Convalida i layout a varie dimensioni del carattere e migliora l'accessibilità della tua app per gli utenti con disabilità visive testando i layout con caratteri più grandi:

Figura 14. Anteprime delle dimensioni variabili dei caratteri nello strumento di convalida del layout.