Design adattabile/adattivo con visualizzazioni

I layout adattabili/adattivi offrono un'esperienza utente ottimizzata indipendentemente dimensioni dello schermo. Implementare layout reattivi/adattivi per consentire basata sulla visualizzazione per supportare tutte le dimensioni, gli orientamenti e configurazioni, incluse le configurazioni ridimensionabili come multi-finestra .

Progettazione reattiva

La prima cosa da fare per supportare diversi fattori di forma dei dispositivi è creare una layout reattivo alle variazioni della quantità di spazio di visualizzazione disponibile alla tua app.

Layout vincolo

Il modo migliore per creare un layout adattabile è utilizzare ConstraintLayout come layout di base per la UI. ConstraintLayout consente di specificare posizione e dimensione di ciascuna vista in base alle relazioni spaziali visualizzazioni nel layout. Tutte le viste possono quindi essere spostate e ridimensionate insieme modifiche dello spazio di visualizzazione.

Il modo più semplice per creare un layout con ConstraintLayout è usare il layout Editor in Android Studio. L'editor del layout consente di trascinare nuove visualizzazioni layout, applicare vincoli relativi alle viste principale e di pari livello e impostare la vista senza dover modificare manualmente alcun XML.

Per maggiori informazioni, consulta la sezione Creare un'interfaccia utente adattabile con ConstraintLayout.

Larghezza e altezza adattabili

Per assicurarti che il layout sia reattivo a diverse dimensioni di display, utilizza wrap_content, match_parent o 0dp (match constraint) per la larghezza e altezza dei componenti della visualizzazione anziché valori impostati come hardcoded:

• wrap_content: le dimensioni della visualizzazione vengono impostate per adattarsi ai contenuti della visualizzazione.
• match_parent: la visualizzazione si espande il più possibile all'interno della vista principale.
• 0dp (match constraint): in un ConstraintLayout, simile a match_parent. La visualizzazione occupa tutto lo spazio disponibile all'interno del i vincoli.

Ad esempio:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/lorem_ipsum" />

La figura 4 mostra la regolazione della larghezza e dell'altezza di TextView in base al display la larghezza cambia in base all'orientamento del dispositivo.

TextView imposta la larghezza in modo da riempire tutto lo spazio disponibile (match_parent) e la sua altezza, esattamente a quanto spazio è richiesto dall'altezza del testo (wrap_content), che consente alla visualizzazione di adattarsi a diverse dimensioni e quantità di testo diverse.

Se utilizzi una LinearLayout, può anche espandere le viste secondarie in base al layout peso in modo che le visualizzazioni riempiano proporzionalmente lo spazio disponibile. Tuttavia, l'utilizzo dei pesi in un elemento LinearLayout nidificato richiede al sistema di eseguire più passaggi di layout per determinare le dimensioni di visualizzazione, con un conseguente rallentamento delle prestazioni dell'interfaccia utente.

ConstraintLayout può creare quasi tutti i layout possibili con LinearLayout senza influire sul rendimento, quindi converti le query nidificate LinearLayout per ConstraintLayout Poi possono definire layout ponderati con vincoli o entusiasmanti.

Design adattivo

Il layout dell'app deve sempre adattarsi alle diverse dimensioni del display. Tuttavia, anche un layout adattabile non può offrire la migliore esperienza utente possibile su tutti i dispositivi o in modalità multi-finestra. Ad esempio, l'interfaccia utente progettato per uno smartphone, probabilmente non offre un'esperienza utente ottimale tablet. Il design adattivo offre layout alternativi ottimizzati per dimensioni di visualizzazione.

Layout SlidingPane per UI con dettagli elenco

Un'interfaccia utente di tipo elenco dettagliato solitamente offre un'esperienza utente diversa schermi di dimensioni diverse. Sugli schermi grandi, i riquadri dell'elenco e dei dettagli vengono di solito una accanto all'altra. Quando selezioni un articolo dell'elenco, le relative informazioni vengono visualizzato nel riquadro dei dettagli senza modificare l'interfaccia utente: i due riquadri rimangono uno accanto all'altro. Sugli schermi di piccole dimensioni, invece, i due riquadri vengono visualizzati separatamente ogni riquadro che occupa l'intera area di visualizzazione. Quando un elemento del riquadro dell'elenco viene selezionato, il riquadro dei dettagli (contenente le informazioni sull'elemento selezionato) sostituisce nel riquadro dell'elenco. La navigazione a ritroso sostituisce il riquadro dei dettagli con l'elenco.

SlidingPaneLayout gestisce la logica per determinare quale delle due esperienze utente appropriato per le dimensioni correnti della finestra:

<?xml version="1.0" encoding="utf-8"?>
<androidx.slidingpanelayout.widget.SlidingPaneLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="start" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        app:defaultNavHost="true"
        app:navGraph="@navigation/item_navigation" />

</androidx.slidingpanelayout.widget.SlidingPaneLayout>

Gli attributi layout_width e layout_weight delle due viste contenute in SlidingPaneLayout determina il comportamento di SlidingPaneLayout. In questo esempio, Se la finestra è abbastanza grande (larghezza di almeno 580 dp) da visualizzare entrambe le visualizzazioni, verrà i riquadri vengono visualizzati affiancati. Ma se la larghezza della finestra è inferiore a 580 dp, i riquadri scorrono l'uno sull'altro per occupare singolarmente l'intera app. finestra.

Se la larghezza della finestra è superiore alla larghezza minima totale specificata (580 dp), È possibile utilizzare i valori layout_weight per ridimensionare i due riquadri in modo proporzionale. Nella Ad esempio, il riquadro dell'elenco ha sempre una larghezza di 280 dp perché non ha una ponderazione. Il riquadro dei dettagli, tuttavia, riempie sempre lo spazio orizzontale oltre i 580 dp perché dell'impostazione layout_weight della vista.

Risorse di layout alternative

Per adattare il design dell'interfaccia utente a dimensioni di visualizzazione molto diverse, utilizza layout alternativi identificati dalla risorsa qualificatori.

Puoi fornire layout adattivi specifici per lo schermo creando altri res/layout/ directory nel codice sorgente della tua app. Crea una directory per ogni configurazione dello schermo che richiede un layout diverso. Poi aggiungi una schermata qualificatore di configurazione al nome della directory layout (ad esempio, layout-w600dp per gli schermi con 600 dp di larghezza disponibile).

I qualificatori di configurazione rappresentano lo spazio di visualizzazione visibile dell'interfaccia utente dell'app. Il sistema prende in considerazione eventuali decorazioni (come barra di navigazione) e modifiche alla configurazione delle finestre (ad esempio, multi-finestra ) quando selezioni il layout dell'app.

Per creare layout alternativi in Android Studio, consulta l'articolo Utilizzare le varianti di layout per: per ottimizzare gli annunci per diversi schermi in Sviluppa una UI con viste.

Qualificatore larghezza minima

Il qualificatore per le dimensioni dello schermo più piccola consente di fornire alternative layout per i display con una larghezza minima misurata indipendentemente dalla densità pixel (dp).

Descrivendo le dimensioni dello schermo come misura di dp, Android consente di creare layout progettati per dimensioni di visualizzazione specifiche senza preoccuparsi di densità di pixel diverse.

Ad esempio, puoi creare un layout denominato main_activity ottimizzato per smartphone e tablet creando versioni diverse del file in diversi directory:

res/layout/main_activity.xml           # For phones (smaller than 600dp smallest width)
res/layout-sw600dp/main_activity.xml   # For 7" tablets (600dp wide or wider)

Il qualificatore di larghezza più piccola specifica il più piccolo dei due lati del display, a prescindere dall'orientamento corrente del dispositivo, quindi è un modo per specificare le dimensioni di visualizzazione complessive disponibili per il layout.

Di seguito viene spiegato in che modo gli altri valori di larghezza più piccoli corrispondono alle dimensioni tipiche degli schermi:

• 320 dp: schermo piccolo del telefono (240 x 320 ldpi, 320 x 480 mdpi, 480 x 800 hdpi, ecc.)
• 480 dp: schermo del telefono grande ~5" (480x800 mdpi)
• 600 dp: 7" tablet (600x1024 mdpi)
• 720 dp: 10" tablet (720 x 1280 mdpi, 800 x 1280 mdpi, ecc.)

La figura riportata di seguito offre una visione più dettagliata dei diversi tipi di Dp le larghezze corrispondono a dimensioni e orientamenti diversi dello schermo.

I valori del qualificatore di larghezza minima sono dp, perché ciò che conta è quantità di spazio di visualizzazione disponibile dopo che il sistema tiene conto della densità dei pixel (non la risoluzione in pixel non elaborati).

Le dimensioni specificate utilizzando i qualificatori delle risorse come la larghezza più piccola sono non le dimensioni effettive degli schermi. Piuttosto, le dimensioni specificano la larghezza o l'altezza in Le unità dp disponibili nella finestra dell'app. Il sistema Android potrebbe utilizzare alcune delle schermate dell'interfaccia utente di sistema (come la barra di sistema nella parte inferiore schermo o la barra di stato in alto), quindi alcune schermate potrebbero non essere disponibili per il tuo layout. Se l'app viene utilizzata in modalità multi-finestra, il app ha accesso soltanto alle dimensioni della finestra che la contiene. Quando viene ridimensionata, attiva una configurazione cambia con la nuova dimensione della finestra, consente al sistema di selezionare un file di layout appropriato. Quindi, la risorsa le dimensioni dei qualificatori dichiarati devono specificare solo lo spazio necessario dalla tua app. Il sistema tiene conto di tutto lo spazio utilizzato dall'UI di sistema quando fornisce spazio per il layout.

Qualificatore larghezza disponibile

Invece di modificare il layout in base alla larghezza minima del display, potresti voler modificare il layout in base alla larghezza o all'altezza disponibili. Ad esempio, potresti voler utilizzare un layout a due riquadri ogni volta che lo schermo fornisce almeno 600 dp di larghezza, che potrebbe variare a seconda che il il dispositivo è in orientamento orizzontale o verticale. In questo caso, devi utilizzare qualificatore available width come segue:

res/layout/main_activity.xml         # For phones (smaller than 600dp available width)
res/layout-w600dp/main_activity.xml  # For 7" tablets or any screen with 600dp available width
                                     # (possibly landscape phones)

Se la tua app preoccupa l'altezza disponibile, puoi utilizzare qualificatore altezza disponibile. Ad esempio, layout-h600dp per gli schermi con al almeno 600 dp di altezza dello schermo.

Qualificatori di orientamento

Anche se potresti riuscire a supportare tutte le varianti di dimensioni utilizzando solo combinazioni dei qualificatori di larghezza minima e larghezza disponibile, puoi Vuoi modificare l'esperienza utente anche quando passa dalla modalità verticale e orientamenti orizzontali.

A questo scopo, puoi aggiungere i qualificatori port o land alla directory del layout i nomi degli utenti. È sufficiente che i qualificatori di orientamento siano posizionati dopo i qualificatori per le dimensioni. Ad esempio:

res/layout/main_activity.xml                # For phones
res/layout-land/main_activity.xml           # For phones in landscape
res/layout-sw600dp/main_activity.xml        # For 7" tablets
res/layout-sw600dp-land/main_activity.xml   # For 7" tablets in landscape

Per ulteriori informazioni su tutti i qualificatori di configurazione dello schermo, consulta la sezione App Panoramica delle risorse.

Classi di dimensioni delle finestre

Le classi di dimensioni delle finestre sono punti di interruzione dell'area visibile che aiutano a creare adattivi layout. I punti di interruzione identificano l'area di visualizzazione disponibile per l'app compact, medium o Expanded. Larghezza e altezza sono specificate separatamente. in modo che l'app abbia sempre una classe di dimensioni della finestra per la larghezza e una classe di dimensioni della finestra per altezza.

Per applicare in modo programmatico i layout adattivi:

• Crea risorse di layout in base ai punti di interruzione della classe delle dimensioni della finestra
• Calcola le classi di larghezza e altezza della finestra dell'app utilizzando WindowSizeClass#compute() da Jetpack WindowManager libreria
• Aumenta il livello della risorsa di layout per le classi di dimensioni delle finestre attuali

di Gemini Advanced.

Per ulteriori informazioni, consulta Dimensioni della finestra .

Componenti dell'interfaccia utente modulari con frammenti

Quando progetti la tua app per più dimensioni di visualizzazione, utilizza i frammenti per estrarre la logica dell'interfaccia utente in componenti separati per assicurarti la duplicazione del comportamento dell'interfaccia utente nelle varie attività. Poi puoi combinare i frammenti crea layout a più riquadri su schermi di grandi dimensioni oppure puoi inserire frammenti attività separate su schermi di piccole dimensioni.

Ad esempio, il pattern dell'elenco di dettagli (vedi SlidingPaneLayout precedente) può essere implementato con una frammento contenente l'elenco e un altro frammento contenente l'elemento elenco i dettagli. Su schermi di grandi dimensioni, i frammenti potevano essere visualizzati uno accanto all'altro; attivo piccoli schermi, che riempiono singolarmente gli schermi.

Per scoprire di più, consulta la panoramica sui frammenti.

Incorporamento delle attività

Se la tua app è costituita da più attività, l'incorporamento delle attività ti consente di: creare facilmente un'interfaccia utente adattiva.

L'incorporamento delle attività visualizza più attività o più istanze dei la stessa attività contemporaneamente nella finestra dell'attività di un'applicazione. Su schermi di grandi dimensioni, le attività possono essere visualizzate una accanto all'altra; su schermi piccoli, uno sopra l'altro l'una dall'altra.

Puoi stabilire la modalità di visualizzazione delle attività dell'app creando un file XML di configurazione del deployment, che il sistema utilizza per determinare presentazione in base alle dimensioni di visualizzazione. In alternativa, puoi creare Jetpack API WindowManager chiamate.

L'incorporamento delle attività supporta le modifiche dell'orientamento dei dispositivi e i dispositivi pieghevoli. Impilare e rimuovere l'impilamento delle attività mentre il dispositivo ruota, si piega e si apre.

Per ulteriori informazioni, vedi Attività incorporamento.

Dimensioni e proporzioni dello schermo

Testa la tua app su schermi di diverse dimensioni e proporzioni per assicurarti che l'UI sia in grado di scalare correttamente.

Android 10 (livello API 29) e versioni successive supportano un'ampia gamma di proporzioni. I fattori di forma pieghevoli possono variare da schermi alti e stretti, ad esempio in 21:9 quando quando è aperto, in proporzioni quadrate di 1:1.

Per garantire la compatibilità con il maggior numero possibile di dispositivi, testa le tue app per alcune delle seguenti proporzioni dello schermo:

Se non hai accesso ai dispositivi per tutte le diverse dimensioni di schermo che vuoi puoi utilizzare l'emulatore Android per emulare schermi di qualsiasi dimensione.

Se preferisci eseguire il test su un dispositivo reale ma non hai il dispositivo, puoi utilizzare Firebase Test Lab per accedere in un data center di Google.

Risorse aggiuntive

• Material Design - Comprensione del layout