Layout

Il framework adattivo di Android Auto adatta i layout delle app a qualsiasi dimensione dello schermo dell'auto.

Anche l'interfaccia utente e le funzionalità delle app, come la navigazione multimediale e le azioni di riproduzione, vengono adattate automaticamente in Android Auto, compatibili con le app per le app proiettate dal telefono dell'utente.

In sintesi

  • I layout si adattano alle dimensioni dello schermo in punti di interruzione specifici.
  • Applica spaziatura interna con incrementi di 8 dp
  • Posizionare la spaziatura interna a 12 dp tra i componenti più piccoli con moderazione

Come viene determinato il layout

Il framework AR di Android Auto utilizza sia il design adattivo che il responsive design:

  • Il responsive design (le dimensioni esatte dello schermo determinano il layout) viene utilizzato per i margini sinistro e destro
  • Per il layout viene utilizzato il design adattivo (intervalli di altezza e larghezza dello schermo)

Il layout viene determinato utilizzando misurazioni chiamate punti di interruzione. I punti di interruzione sono misurazioni strategiche dell'altezza e della larghezza dello schermo, che determinano quando mostrare un layout specifico. Per ogni intervallo dei punti di interruzione, il layout si adatta alle dimensioni e all'orientamento dello schermo.

Animazione adattiva del punto di interruzione

Adattiva

La progettazione adattiva utilizza i punti di interruzione per determinare il layout dello schermo. Per un intervallo definito di dimensioni dello schermo (ad esempio, larghezza inferiore a 1280 dp), viene visualizzato un layout specifico.
Animazione con punto di interruzione adattabile

Adattabile

Il responsive design adatta il layout in modo proporzionale alle dimensioni esatte dello schermo. I componenti presentano aree flessibili che possono essere espanse o ridotte a dimensioni appropriate per lo schermo di ogni auto.

Punti di interruzione adattivi

Android Auto si basa sui punti di interruzione adattivi per determinare il layout dello schermo, che viene calcolato in base alle dimensioni della finestra dell'app anziché all'intero schermo.

Punti di interruzione su schermi di dimensioni diverse
Punti di interruzione adattivi sulle dimensioni dello schermo ristrette (0-600 dp), standard (600-930 dp), larghe (930-1280 dp) e extra larghe (1280 dp+)

Margini adattabili

Android Auto utilizza i margini adattabili in base alle dimensioni dell'intero schermo dell'auto. I margini sinistro e destro si adattano al 12% della larghezza dello schermo e di solito contengono barre di scorrimento e controlli di navigazione. Lo spazio rimanente sullo schermo, chiamato tela dell'app, include i contenuti dell'app.

Per liberare spazio, è possibile rimuovere il margine laterale destro su schermi più piccoli. Questo spazio può essere utilizzato dall'app come area secondaria per mostrare informazioni aggiuntive.

Animazione dei margini adattabili
I margini adattabili modificano la loro larghezza in base alle dimensioni dello schermo.

La griglia di layout

I layout di Android Auto allineano gli elementi UI lungo una griglia 8 dp, con alcuni componenti più piccoli che si allineano a una griglia 4 dp.

Spaziatura interna

La spaziatura interna si riferisce allo spazio tra gli elementi dell'interfaccia utente. La scala di spaziatura interna di Android Auto viene applicata in multipli di 8 dp, fino a dimensioni di spaziatura interna di 96 dp. Qualsiasi quantità maggiore di spaziatura interna deve essere aggiunta anche in multipli di 8 dp.

Questa tabella elenca i valori di spaziatura interna tipici visualizzati nell'interfaccia utente di Auto. Gli incrementi di dimensione sono elencati in ordine crescente e sono contrassegnati da etichette che iniziano con la lettera "P".

P0 P1 P2 P3 P4 P5 P6 P7 P8
4dp 8 DP 12dp 16dp 24dp 32dp 48dp 64dp 96dp
Inserimento di valori in un layout
In questo layout, i valori di spaziatura interna sono rappresentati da P1, P3 e P5 nella tabella precedente.

Spaziatura interna per componenti più piccoli

Per creare un allineamento migliore e consentire una spaziatura sufficiente, i componenti più piccoli potrebbero utilizzare 12 dp di spaziatura interna con moderazione.

Inserimento di valori in un componente
In questo widget, gli elementi utilizzano valori di spaziatura interna rappresentati da P2, P3, P4 e P5 nella tabella riportata sopra.

Keyline

Le linee guida sono misurazioni che organizzano un'interfaccia utente mostrando dove gli elementi e i componenti devono essere posizionati orizzontalmente in un layout (lungo l'asse x). Sono contrassegnati da etichette che iniziano con la lettera "KL".

Le linee chiave possono essere posizionate in qualsiasi punto di un layout. Possono essere utilizzati per indicare la distanza tra due bordi verticali diversi (di elementi, componenti o lo schermo stesso). I componenti e gli elementi allineano il bordo sinistro o destro alla linea di tasti più vicina.

Linee chiave all'interno di un componente
In questo componente, KL0 allinea tutti i testi e le icone dell'elenco a una distanza costante l'uno dall'altro. KL1 allinea tutti gli elementi dell'elenco ai bordi sinistro e destro del componente.

Misurazione con le linee chiave

Le dimensioni dei tasti variano in base alla larghezza dello schermo, consentendo agli elementi dell'interfaccia utente di scalare in modo coerente il posizionamento su schermi di dimensioni diverse.

I seguenti valori chiave sono consigliati per dimensioni di schermi diversi, rappresentati da etichette contrassegnate con "KL(n)". Vengono mostrati in ordine di dimensione principale:

KL(n) Schermi stretti
(0-600 dp)
Schermate standard
(600-930 dp)
Schermi larghi
(930-1280 dp)
Schermi extra larghi
(almeno 1280 dp)
KL0 16dp 24dp 24dp 32dp
KL1 24dp 32dp 32dp 48dp
KL2 96dp 112dp 112dp N/D
KL3 112dp 128dp 128dp 152dp
KL4 148dp 168dp 168dp N/D