I layout canonici sono layout collaudati e versatili che offrono un'esperienza utente ottimale su una varietà di fattori di forma.
I layout canonici supportano gli smartphone con schermi piccoli, nonché tablet, dispositivi pieghevoli e dispositivi ChromeOS. Derivati dalle indicazioni di Material Design, i layout sono sia estetici che funzionali.
Il framework Android include componenti specializzati che rendono l'implementazione dei layout semplice e affidabile.
I layout canonici creano UI coinvolgenti e che migliorano la produttività, che costituiscono la base di app di alta qualità.
Se hai già familiarità con i layout canonici delle app adattive, ma non individuare le API Android da utilizzare, passa alla sezione Applicabilità per determinare il layout adatto ai casi d'uso della tua app.
Elenco-dettagli
Il layout elenco-dettagli consente agli utenti di esplorare elenchi di elementi che contengono informazioni descrittive, esplicative o altre informazioni supplementari, ovvero i dettagli dell'elemento.
Il layout divide la finestra dell'app in due riquadri affiancati: uno per l'elenco e uno per i dettagli. Gli utenti selezionano gli elementi dall'elenco per visualizzarne i dettagli. I link diretti nei dettagli rivelano contenuti aggiuntivi nel riquadro dei dettagli.
I display con larghezza espansa (vedi Utilizzare le classi di dimensioni delle finestre) possono ospitare contemporaneamente sia l' elenco che i dettagli. La selezione di una voce dell'elenco aggiorna il riquadro dei dettagli per mostrare i contenuti correlati dell'elemento selezionato.
I display con larghezza media e compatta mostrano l'elenco o i dettagli, a seconda dell'interazione dell'utente con l'app. Quando è visibile solo l'elenco, la selezione di una voce dell'elenco mostra i dettagli al posto dell'elenco. Quando sono visibili solo i dettagli, se premi il pulsante Indietro viene visualizzato di nuovo l'elenco.
Le modifiche alla configurazione, come i cambiamenti di orientamento del dispositivo o delle dimensioni della finestra dell'app, possono modificare la classe di dimensioni della finestra del display. Un layout elenco-dettagli risponde di conseguenza, mantenendo lo stato dell'app:
- Se un display con larghezza espansa che mostra sia l'elenco che i riquadri dei dettagli si restringe a una larghezza media o compatta, il riquadro dei dettagli rimane visibile e il riquadro dell'elenco viene nascosto.
- Se un display con larghezza media o compatta ha visibile solo il riquadro dei dettagli e la classe di dimensioni della finestra si espande, l'elenco e i dettagli vengono mostrati insieme e l'elenco indica che è selezionato l'elemento corrispondente ai contenuti nel riquadro dei dettagli.
- Se un display con larghezza media o compatta ha visibile solo il riquadro dell'elenco e si espande, l'elenco e un riquadro dei dettagli segnaposto vengono mostrati insieme.
list-detail è ideale per le app di messaggistica, i gestori di contatti, i browser di contenuti multimediali interattivi o qualsiasi app in cui i contenuti possono essere organizzati come un elenco di elementi che rivelano informazioni aggiuntive.
Implementazione
Un layout di elenco dettagliato può essere creato con una serie di tecnologie, tra cui Compose, le visualizzazioni e l'inserimento di attività (per le app precedenti). Consulta la sezione Applicabilità per decidere quale tecnologia è più adatta alla tua app.
La libreria SlidingPaneLayout è progettata per l'implementazione di layout elenco-dettaglio basati su visualizzazioni o frammenti.
Innanzitutto, dichiara un SlidingPaneLayout come elemento principale del layout XML.
Aggiungi poi i due elementi secondari, visualizzazioni o frammenti, che rappresentano i contenuti dell'elenco e dei dettagli.
Implementa una metodologia di comunicazione per trasmettere i dati tra le visualizzazioni elenco-dettaglio o i frammenti. ViewModel è consigliato per la sua capacità di memorizzare la logica di business e resistere alle modifiche alla configurazione.
SlidingPaneLayout determina automaticamente se visualizzare l'elenco e i dettagli insieme o singolarmente. In una finestra con spazio orizzontale sufficiente per ospitarli entrambi, l'elenco e i dettagli vengono visualizzati affiancati. In una finestra con spazio insufficiente, viene visualizzato l'elenco o i dettagli a seconda dell'interazione dell'utente con l'app.
Per un esempio di implementazione, consulta l'esempio di elenco dettagliato con riquadro scorrevole.
Incorporamento delle attività
Utilizza l'inserimento di attività per consentire alle app precedenti con più attività di mostrare due attività affiancate nella stessa schermata o una sopra l'altra. Se la tua app implementa l'elenco e i dettagli di un layout elenco-dettagli in attività separate, l'inserimento di attività ti consente di creare un layout elenco-dettagli con un refactoring del codice minimo o nullo.
Implementa l'inserimento di attività specificando una suddivisione della finestra delle attività utilizzando un file di configurazione XML. La suddivisione definisce l'attività principale, che avvia la suddivisione, e un'attività secondaria. Specifica la larghezza minima di visualizzazione per la suddivisione usando i punti di interruzione classe dimensioni finestra. Quando la larghezza del display scende al di sotto del breakpoint minimo, le attività vengono visualizzate una sopra l'altra. Ad esempio, se la larghezza minima del display è 600 dp, le attività vengono visualizzate una sopra l'altra sui display compatti, ma una accanto all'altra sui display medi e espansi.
L'inserimento di attività è supportato su Android 12L (livello API 32) e versioni successive, ma potrebbe essere disponibile anche su livelli API inferiori se implementato dai produttori di dispositivi. Quando l'incorporamento dell'attività non è disponibile su un dispositivo, il comportamento di riserva comporta l'attività dell'elenco o l'attività dei dettagli che occupa l'intera finestra dell'app in base all'interazione dell'utente con l'app.
Per maggiori informazioni, consulta la sezione Incorporamento delle attività.
Per un esempio di implementazione, consulta l'esempio List-detail with activity embedding.
Feed
Un layout feed dispone gli elementi di contenuti equivalenti in una griglia configurabile per una visualizzazione rapida e comoda di una grande quantità di contenuti.
Le dimensioni e la posizione stabiliscono le relazioni tra gli elementi di contenuti.
I gruppi di contenuti vengono creati rendendo gli elementi delle stesse dimensioni e posizionandoli insieme. L'attenzione viene attirata sugli elementi rendendoli più grandi degli elementi vicini.
Le schede e gli elenchi sono componenti comuni dei layout feed.
Un layout feed supporta display di quasi tutte le dimensioni perché la griglia può adattarsi da una singola colonna scorrevole a un feed di contenuti scorrevole a più colonne.
I feed sono particolarmente adatti per le app di notizie e social media.
Implementazione
Un RecyclerView consente di visualizzare in modo efficiente un numero elevato di elementi in una singola colonna. Un GridLayoutManager dispone gli elementi in una griglia, consentendo la configurazione delle dimensioni e degli intervalli degli elementi.
Configura le colonne della griglia in base alle dimensioni dell'area di visualizzazione disponibile per impostare la larghezza minima consentita per gli elementi.
La strategia di estensione predefinita GridLayoutManager, che è un intervallo per elemento,
può essere ignorata creando un elemento SpanSizeLookup personalizzato. Modifica l'intervallo per mettere in evidenza alcuni elementi rispetto ad altri.
Sui display di larghezza compatta con spazio sufficiente per una sola colonna, utilizza LinearLayoutManager anziché GridLayoutManager.
Per un esempio di implementazione, consulta l'esempio di feed con visualizzazioni.
Riquadro di supporto
Il layout del riquadro di supporto organizza i contenuti dell'app in aree di visualizzazione primarie e secondarie.
L'area di visualizzazione principale occupa la maggior parte della finestra dell'app (in genere circa due terzi) e contiene i contenuti principali. L'area di visualizzazione secondaria è un riquadro che occupa la parte rimanente della finestra dell'app e presenta contenuti che supportano i contenuti principali.
I layout del riquadro di supporto funzionano bene sui display con larghezza espansa (vedi Utilizzare le classi di dimensioni delle finestre) in orientamento orizzontale. I display con larghezza media o compatta supportano la visualizzazione sia delle aree di visualizzazione primarie che secondarie se i contenuti sono adattabili a spazi di visualizzazione più stretti o se i contenuti aggiuntivi possono essere inizialmente nascosti in un foglio inferiore o laterale accessibile tramite un controllo come un menu o un pulsante.
Un layout del riquadro di supporto differisce da un layout elenco-dettagli nella relazione tra i contenuti primari e secondari. I contenuti del riquadro secondario sono significativi solo in relazione ai contenuti primari; ad esempio, una finestra degli strumenti del riquadro di supporto è irrilevante di per sé. I contenuti supplementari nel riquadro dei dettagli di un layout elenco-dettagli, tuttavia, sono significativi anche senza i contenuti primari, ad esempio la descrizione di un prodotto da una scheda di prodotto.
I casi d'uso del riquadro di supporto includono:
- App per la produttività: un documento o un foglio di lavoro accompagnato dai commenti dei revisori in un riquadro di supporto.
- App per contenuti multimediali: un video in streaming e un elenco di video correlati in un riquadro di supporto oppure la rappresentazione di un album musicale integrato da una playlist.
- Strumenti e impostazioni: uno strumento di modifica dei contenuti multimediali con tavolozze, effetti e altre impostazioni in un riquadro di supporto.
Implementazione
Un layout riquadro di supporto viene implementato utilizzando un layout di supporto come
LinearLayout oppure ConstraintLayout. Stabilire le classi di dimensioni delle finestre
che dividono la quantità di spazio di visualizzazione orizzontale disponibile per la tua app in
tre categorie: compatto (< 600 dp), medio (>= 600 dp) ed espanso
(>= 840 dp).
Per ogni classe di dimensioni della finestra, definisci i layout come segue:
- Compatto: nella cartella
layoutdelle risorse dell'app, posiziona i contenuti che visualizzano il riquadro di supporto sotto i contenuti principali o all'interno di un riquadro in basso - Medio: nella cartella
layout-w600dp, fornisci i contenuti del riquadro di supporto in modo che i contenuti principali e il riquadro di supporto vengano visualizzati affiancati, dividendo lo spazio di visualizzazione orizzontale in modo uniforme - Espanso: nella cartella
layout-w840dp, includi i contenuti del riquadro di supporto che comporta il rendering dei contenuti principali e del riquadro di supporto affiancati; il riquadro di supporto occupa solo il 30% dello spazio orizzontale, lasciando il restante 70% per i contenuti principali
Utilizza un ViewModel per la comunicazione tra i contenuti principali e il riquadro di supporto, indipendentemente dall'utilizzo di visualizzazioni, frammenti o una combinazione.
Per esempi di implementazione, consulta i seguenti esempi:
Applicabilità
I layout canonici creano presentazioni sfaccettate dei contenuti per un facile accesso ed esplorazione approfondita. Utilizza il seguente diagramma di flusso per determinare quale strategia di layout e implementazione è la migliore per i casi d'uso della tua app.
Per esempi dei layout canonici implementati in diversi tipi di app, consulta la galleria per schermi di grandi dimensioni.
Risorse aggiuntive
- Material Design: layout canonici