Sviluppare un'interfaccia utente con Visualizzazioni

Nota: se possibile, ti consigliamo di creare l'interfaccia utente con Scrivi anziché con Viste. Per scoprire come visualizzare l'anteprima dell'interfaccia utente di Scrivi, consulta Anteprime di Scrivi.

L'editor di layout ti consente di creare rapidamente layout basati su View trascinando gli 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 del layout è particolarmente efficace durante la creazione di un layout con ConstraintLayout.

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

Introduzione all'editor del layout

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

Figura 1. Editor del layout.

1. Tavolozza: contiene vari gruppi di viste e viste che puoi trascinare nel layout.
2. Struttura ad albero dei componenti: mostra la gerarchia dei componenti nel layout.
3. Barra degli strumenti: contiene pulsanti che consentono di configurare l'aspetto del layout nell'editor e modificare gli attributi di layout.
4. Editor progettazione: ti consente di modificare il layout in Vista struttura, Blueprint o 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 di panoramica e zoom: consentono di stabilire la posizione e le dimensioni 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 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.

Figura 2. Pulsanti della barra degli strumenti dell'editor del layout che configurano l'aspetto del layout.

1. Design e progetto: 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 Progetto base per vedere solo i contorni per ciascuna visualizzazione.
   • Scegli Design + Blueprint per vedere entrambe le visualizzazioni affiancate.
2. Varianti per l'orientamento e il layout dello schermo: scegli tra l'orientamento orizzontale o verticale oppure altre modalità dello schermo per cui 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 tuoi layout reagiscono ai diversi sfondi scelti da utenti. Ricorda che devi prima cambiare il tema impostandolo su un tema a colori 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 diversi tipi di dispositivi preconfigurati e definizioni di AVD personalizzate 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.

   Testare il layout rispetto ai Dispositivi di riferimento di questo menu aiuta l'app a scalare adeguatamente gli stati del layout sui dispositivi reali.

   

   Figura 3. L'elenco dei dispositivi che mostra i dispositivi di riferimento.

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 installate utilizzando SDK Manager.

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

7. Lingua: seleziona la lingua da visualizzare per le stringhe UI. Questo elenco mostra solo le lingue disponibili nelle risorse stringa. Se vuoi modificare le tue traduzioni, fai clic su Modifica traduzioni dal menu. Per ulteriori informazioni sull'utilizzo delle traduzioni, consulta Localizzare l'interfaccia utente con l'editor delle traduzioni.

Nota: se non aggiungi un nuovo file di layout da Varianti di layout, queste configurazioni non influiscono sul codice o sul manifest della tua app. Hanno effetto solo sull'anteprima del layout.

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. Quando disponi di un layout predefinito, puoi creare varianti di layout, come descritto in una sezione di questa pagina, per configurazioni di dispositivi 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, indica il nome 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 visualizzazione Progetto dalla finestra Progetto.
2. Fai clic con il pulsante destro del mouse sulla directory di layout in cui vuoi aggiungere il layout.
3. Nel menu contestuale che compare, fai clic su Nuovo > File di risorsa del layout.

Utilizzare la visualizzazione Android

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

Utilizzo di Resource Manager

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

Utilizza varianti di layout per l'ottimizzazione in base a schermi diversi

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

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.

   

   Figura 4. Elenco a discesa dei qualificatori di layout.

Viene creata una nuova directory di layout.

Creare una variante di layout

Se vuoi creare una variante del 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 Add Resource Qualifier (Aggiungi qualificatore risorsa). (vedi la figura 4 sopra).

   Viene visualizzata la finestra di dialogo Seleziona directory di 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.

Quando sono presenti più varianti dello stesso layout, puoi passare da una variante 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 la pagina Supportare schermi di dimensioni diverse.

Convertire una visualizzazione o un layout

Puoi convertire una vista in un altro tipo di vista 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. Nella struttura ad albero dei componenti, fai clic con il pulsante 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 e 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 layout 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 pulsante destro del mouse sul layout, quindi fai clic su Converti your-layout-type in ConstraintLayout.

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

Trovare elementi nella tavolozza

Per cercare una visualizzazione 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 è attiva la finestra Tavolozza.

Nella Palette puoi trovare gli elementi utilizzati di frequente nella categoria Comuni. 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 tavolozza

Per aprire la documentazione di riferimento per gli sviluppatori Android relativa a un gruppo di viste o di visualizzazioni, seleziona l'elemento UI nel 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 sui materiali dal menu contestuale. 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 nell'editor di progettazione. Quando posizioni una vista nel layout, l'editor mostra informazioni sulla relazione della vista con il resto del layout.

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

Modifica attributi vista

Figura 5. Il riquadro Attributi.

Puoi modificare gli attributi di una vista dal riquadro Attributi dell'editor di 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, facendo clic sulla vista nella struttura ad 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 vista. Se la vista è in un tipo ConstraintLayout, anche questa sezione mostra la differenziazione del vincolo ed elenca i vincoli utilizzati dalla vista. Per ulteriori informazioni sul controllo delle dimensioni delle viste con ConstraintLayout, consulta la sezione Regolare le dimensioni delle viste.
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. Ricerca: 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 è hardcoded per aiutarti a riconoscere a colpo d'occhio i valori impostati come hardcoded.

   Fai clic sugli indicatori in entrambi gli stati per aprire la finestra di dialogo Risorse, in cui puoi selezionare un riferimento a una risorsa per l'attributo corrispondente.

6. Un'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 layout-defining.

   Un'evidenziazione arancione indica un avviso per il 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 TextView, ImageView o RecyclerView dall'editor del layout.

Nota: quando aggiungi dati di esempio a un View, Android Studio apporta modifiche al progetto come se stessi utilizzando dati tuoi. Puoi quindi modificare queste modifiche come necessario.

Per visualizzare la finestra Attributi della vista 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.

Figura 6. La finestra Visualizzazione attributi in fase di progettazione.

Per un TextView, puoi scegliere tra diverse categorie di testo di esempio. Quando utilizzi il testo di esempio, Android Studio completa 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 Visualizza attributi in fase di progettazione solo se l'attributo text è vuoto.

Figura 7. Un TextView con dati di esempio.

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

Figura 8. Un elemento ImageView con dati di esempio.

Per RecyclerView, puoi scegliere da un insieme di modelli che contengono immagini e testi di esempio. Quando utilizzi questi modelli, Android Studio aggiunge alla directory res/layout, recycler_view_item.xml, un file contenente il layout per i dati di esempio. Android Studio aggiunge inoltre metadati a RecyclerView per visualizzare correttamente i dati di esempio.

Figura 9. Un RecyclerView con dati di esempio.

Mostra avvisi ed errori di layout

L'Editor del layout segnala eventuali problemi di layout accanto alla vista corrispondente nella struttura dei componenti utilizzando un'icona a forma di punto esclamativo rosso a forma di cerchio per gli errori o un'icona a forma di 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 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 Design per visualizzare il layout nell'editor di progettazione.
2. Seleziona una visualizzazione di testo.
3. Nel riquadro Attributi, espandi textAspetto, quindi 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, sfoglia l'elenco o digita nella barra di ricerca in alto per selezionare un carattere. 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 del carattere TTF nel tuo APK. I caratteri elencati in Android vengono forniti dal sistema Android, quindi non devono essere scaricati o raggruppati nell'APK.
6. Fai clic su OK per terminare.