Sviluppare un'interfaccia utente con Visualizzazioni

L'Editor di layout ti consente di creare rapidamente layout basati su View trascinando elementi dell'interfaccia utente in un editor di progettazione visiva anziché scrivere in XML di layout. L'editor di progettazione può visualizzare l'anteprima del layout su diversi dispositivi Android e versioni e puoi ridimensionarlo in modo dinamico per assicurarti che funzioni correttamente su schermi di dimensioni diverse.

L'Editor di layout è particolarmente efficace durante la creazione di un layout con ConstraintLayout.

Questa pagina fornisce una panoramica dell'Editor layout. Per scoprire di più sulle nozioni di base del layout, consulta la sezione Layout.

Introduzione all'Editor di layout

L'Editor di layout viene visualizzato quando apri un file di layout XML.

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

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

Suggerimento: per spostarti tra gli editor di design e di testo, 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. Design e blueprint: seleziona come visualizzare il layout nell'editor. Puoi anche premere B per scorrere questi tipi di visualizzazione.
   • Scegli Design per visualizzare un'anteprima visualizzata del layout.
   • Scegli Struttura per vedere solo i contorni per ciascuna visualizzazione.
   • Scegli Design + Progetto per vedere entrambe le viste affiancate.
2. Varianti dell'orientamento e del layout dello schermo: scegli tra l'orientamento orizzontale o verticale oppure altre modalità dello schermo per le quali la tua app fornisce layout alternativi, ad esempio la modalità notturna. Questo menu contiene anche i comandi per creare una nuova variante del 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 nell'app, cambia sfondo e osserva come i layout reagiscono ai diversi sfondi scelti dagli utenti. Tieni presente che devi prima cambiare il tema impostandolo su un tema Materiale dinamico, quindi cambiare lo sfondo.

4. Tipo e dimensioni del dispositivo: seleziona il tipo di dispositivo (telefono/tablet, Android TV o Wear OS) e la configurazione dello schermo (dimensioni e densità). Puoi scegliere tra vari tipi di dispositivi preconfigurati e le tue definizioni della durata di visualizzazione media e puoi creare una nuova durata di visualizzazione media 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.

   Testando il layout rispetto ai Dispositivi di riferimento di questo menu, l'app scala bene gli stati del layout sui 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. Questa operazione funziona solo per gli stili di layout supportati, pertanto molti temi in questo elenco generano un errore.

7. Lingua: seleziona la lingua di visualizzazione per le stringhe dell'interfaccia utente. Questo elenco mostra solo le lingue disponibili nelle risorse per le stringhe. Se vuoi modificare le tue traduzioni, fai clic su Modifica traduzioni nel menu. Per ulteriori informazioni sull'uso delle traduzioni, consulta la sezione Localizzare l'interfaccia utente con l'editor di traduzioni.

Crea 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 si applichi a tutte le configurazioni dei dispositivi. Una volta ottenuto un layout predefinito, puoi creare varianti di layout, come descritto in una sezione di questa pagina, per configurazioni dispositivo specifiche, ad esempio 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, specifica il nome del file, il tag di layout principale e il set di origine a cui appartiene il layout.
4. Fai clic su Fine per creare il layout.

Utilizzare la visualizzazione Progetto

1. Scegli la vista Project dalla finestra Project.
2. Fai clic con il pulsante destro del mouse sulla directory di layout in cui vuoi aggiungerlo.
3. Nel menu contestuale visualizzato, fai clic su Nuovo > File risorsa di layout.

Utilizzare la visualizzazione Android

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

Utilizzare Resource Manager

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

Usa le varianti del layout per eseguire l'ottimizzazione in base ai diversi schermi

Una variante del layout è una versione alternativa di un layout esistente ottimizzato per determinate dimensioni dello schermo o orientamenti.

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, ad esempio Crea qualificatore orizzontale o Crea qualificatore per tablet.

   

Viene creata una nuova directory di layout.

Creare la tua variante di layout

Se vuoi creare una variante di layout personalizzata:

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 di risorse. (vedi la figura 4 qui sopra).

   Viene visualizzata la finestra di dialogo Seleziona directory di risorse.

5. Nella finestra di dialogo Seleziona directory di 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 richiesti.
   4. Ripeti questi passaggi per aggiungere altri qualificatori.

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

Quando sono presenti 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 schermi diversi, consulta Supporto di schermi di dimensioni diverse.

Convertire una visualizzazione o un layout

Puoi convertire una vista in un altro tipo di visualizzazione e puoi convertire 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. Nella struttura dei componenti, fai clic con il tasto destro del mouse sulla visualizzazione o sul layout, poi fai clic su Converti visualizzazione.
3. Nella finestra di dialogo visualizzata, scegli il nuovo tipo di visualizzazione o layout e poi fai clic su Applica.

Converti 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 consente di creare la maggior parte dei layout senza gruppi di visualizzazioni nidificati.

Per convertire un layout esistente in un formato 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. Nella struttura dei componenti, fai clic con il tasto destro del mouse sul layout, poi fai clic su Converti your-layout-type in ConstraintLayout.

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

Trova elementi nella tavolozza

Per cercare una vista o un gruppo di visualizzazioni 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 lo stato attivo della finestra Tavolozza è attivo.

Nel Tavolozza puoi trovare gli elementi utilizzati di frequente nella categoria Common. Per aggiungere un elemento a questa categoria, fai clic con il pulsante destro del mouse su una visualizzazione o un gruppo di visualizzazioni nel Tavolozza, quindi fai clic su Preferiti nel menu contestuale.

Apri la documentazione dalla Palette

Per aprire la documentazione di riferimento per gli sviluppatori Android relativa a una vista o un gruppo di visualizzazioni, seleziona l'elemento UI nella tavolozza e premi Shift+F1.

Per visualizzare la documentazione relativa alle linee guida sui materiali per una vista o un gruppo di viste, fai clic con il tasto destro del mouse sull'elemento UI nella tavolozza e seleziona Linee guida per i materiali dal menu di contesto. Se non esiste una voce specifica per l'elemento, il comando apre la home page della documentazione relativa alle linee guida sui materiali.

Aggiungere visualizzazioni al layout

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

Se utilizzi ConstraintLayout, puoi creare automaticamente vincoli utilizzando le funzionalità Deduci vincoli e Collegamento automatico.

Modifica attributi vista

Puoi modificare gli attributi delle viste dal riquadro Attributi dell'Editor layout. Questa finestra è disponibile solo quando l'editor di progettazione è aperto, quindi visualizza il layout in modalità Design o Dividi per utilizzarlo.

Quando selezioni una vista, sia facendo clic sulla vista nella struttura ad albero dei componenti che 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 vista. Se la vista è in un elemento ConstraintLayout, questa sezione mostra anche il bias di vincolo ed elenca i vincoli utilizzati dalla vista. Per saperne di più sul controllo delle dimensioni delle visualizzazioni con ConstraintLayout, consulta la sezione Regolare le dimensioni delle visualizzazioni.
3. Attributi comuni: elenca gli attributi comuni per la vista 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 vista specifico.

5. Le icone a destra del valore di ogni attributo indicano se i valori degli attributi sono riferimenti alle risorse. Questi indicatori sono solidi quando il valore è un riferimento a una risorsa e vuoto quando il valore è impostato come hardcoded per aiutarti a riconoscere a colpo d'occhio i valori impostati come hardcoded.

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

6. Un'evidenziazione in rosso intorno al valore di un attributo indica un errore in quel valore. Ad esempio, un errore potrebbe indicare una voce non valida per un attributo definitivo del layout.

   L'evidenziazione arancione indica un avviso relativo al valore. Ad esempio, potrebbe essere visualizzato un avviso quando utilizzi un valore hardcoded in cui è previsto un riferimento a una risorsa.

Aggiungere dati di esempio alla vista

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, un ImageView o un RecyclerView dall'editor di layout.

Per visualizzare la finestra Attributi vista design-time, 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 TextView, puoi scegliere tra diverse categorie di testi di esempio. Quando utilizzi il testo di esempio, Android Studio completa l'attributo text del TextView con i dati di esempio che hai scelto. Tieni presente che puoi scegliere un testo di esempio tramite la finestra Attributi visualizzazione tempo 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 dell'elemento ImageView (o tools:srcCompat se utilizzi AndroidX).

Per RecyclerView, puoi scegliere da un insieme 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 a RecyclerView per visualizzare correttamente i dati di esempio.

Mostra errori ed avvisi di layout

L'Editor di layout ti avvisa in caso di problemi di layout accanto alla vista corrispondente nella struttura dei componenti utilizzando un'icona a forma di punto esclamativo rosso circolare per gli errori o un'icona punto esclamativo a forma di triangolo arancione 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

Se usi 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 Design per visualizzare il tuo layout nell'editor di progettazione.
2. Seleziona una visualizzazione testo.
3. Nel riquadro Attributi, espandi textAspetto ed espandi la casella fontFamily.
4. Scorri fino alla fine dell'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 nella sezione Scaricabile, puoi fare clic su Crea carattere scaricabile per caricare il carattere in fase di runtime come carattere scaricabile oppure fai clic su Aggiungi carattere al progetto per pacchettizzare il file dei caratteri TTF nel tuo APK. I caratteri elencati in Android sono forniti dal sistema Android, quindi non devono essere scaricati o raggruppati nell'APK.
6. Fai clic su OK per terminare.

Convalida del layout

Layout Validation è uno strumento visivo che consente di visualizzare contemporaneamente l'anteprima dei layout per diversi dispositivi e configurazioni di visualizzazione, aiutandoti a individuare i problemi nei tuoi 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 IDE:

Figura 10. Scheda Convalida layout.

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

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

Figura 11. Dispositivi di riferimento.

Dispositivi di riferimento

I dispositivi di riferimento sono un insieme di dispositivi su cui consigliamo di eseguire il test. Includono le interfacce per smartphone, pieghevoli, tablet e desktop. Dovresti visualizzare l'anteprima di come apparirà il layout su questo insieme di dispositivi di riferimento:

Figura 12. Anteprime dei dispositivi di riferimento nello strumento Convalida del layout.

Personalizzato

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

Figura 16. Configura una visualizzazione personalizzata nello strumento Convalida del layout.

Daltonismo

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

Figura 13. Anteprime della simulazione del daltonismo nello strumento Convalida del layout.

Dimensioni dei caratteri

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

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