Oggi sono in uso più di 300 milioni di dispositivi Android con schermo grande, tra cui tablet, pieghevoli, Googlebook, dispositivi ChromeOS, display per auto e TV, e il numero è in continua crescita. Per offrire un'esperienza utente ottimale sul numero e sulla diversità crescenti di dispositivi con schermi grandi, nonché sugli smartphone standard, crea app adattive.
Che cosa sono le app adattive?
Le app adattive modificano i layout in base alle modifiche alla visualizzazione dell'app, principalmente alle dimensioni della finestra dell'app. Tuttavia, le app adattive si adattano anche ai cambiamenti di posizione dei dispositivi pieghevoli, come la posizione da tavolo o da libro, e alle variazioni della densità dello schermo e delle dimensioni dei caratteri.
Invece di limitarsi ad allungare o rimpicciolire gli elementi UI in risposta alle diverse dimensioni della finestra, le app adattive sostituiscono i componenti del layout e mostrano o nascondono i contenuti. Ad esempio, sugli smartphone standard, un'app adattiva potrebbe mostrare una barra di navigazione in basso, mentre sugli schermi di grandi dimensioni una barra di navigazione laterale. Sui grandi schermi, le app adattive mostrano più contenuti, ad esempio un layout list-detail a due riquadri; sugli schermi piccoli, mostrano meno contenuti, ovvero l'elenco o i dettagli.
In passato, le app venivano in genere eseguite a schermo intero. Oggi le app vengono eseguite in modalità multi-finestra in finestre di dimensioni arbitrarie indipendenti dalle dimensioni dello schermo del dispositivo. Gli utenti possono modificare le dimensioni della finestra in qualsiasi momento. Quindi, anche su un singolo tipo di dispositivo, le app devono essere adattive.
Le app adattive hanno un bell'aspetto e funzionano bene su qualsiasi dispositivo in qualsiasi configurazione.
Perché creare UI adattive?
Gli utenti si aspettano che la tua app funzioni perfettamente su tutti i loro dispositivi e offra funzionalità avanzate su schermi di grandi dimensioni. Gli utenti eseguono il multitasking in modalità multi-finestra per un'esperienza con l'app migliorata e una maggiore produttività.
Le app limitate al single-tasking sugli smartphone standard perdono una base utenti in espansione con diverse possibilità.
Google Play
Google Play fornisce raccolte e consigli di app specifici per tablet e pieghevoli, che consentono agli utenti di scoprire app di alta qualità.
Google Play classifica le app e i giochi ottimizzati per schermi di grandi dimensioni in una posizione più alta rispetto alle app non ottimizzate. Play basa il ranking sulle norme sulla qualità delle app per schermi di grandi dimensioni. Un ranking più elevato aumenta la rilevabilità consentendo agli utenti multi-dispositivo di visualizzare valutazioni e recensioni specifiche per schermi di grandi dimensioni sui loro smartphone.
Le app che non soddisfano gli standard di qualità per schermi di grandi dimensioni del Play Store mostrano un avviso nella pagina dei dettagli dell'app. L'avviso informa gli utenti che l'app potrebbe non funzionare correttamente sui loro dispositivi con schermi di grandi dimensioni.
Crea app adattive per ampliare la rilevabilità su Google Play e massimizzare il numero di dispositivi che possono scaricare la tua app.
Come iniziare
Pensa al design adattivo in tutte le fasi di sviluppo dell'app, dalla pianificazione al deployment. Informare i graphic designer sul design adattivo. Progetta la tua app in modo che sia adattabile e creerai un'app gestibile, estensibile e pronta per i futuri fattori di forma e modalità di gestione delle finestre.
Per creare un'app adattiva che supporti tutte le dimensioni e le configurazioni di visualizzazione, segui questi passaggi:
- Utilizza le classi di dimensioni della finestra per prendere decisioni relative al layout
- Crea con la libreria Compose Material 3 Adaptive
- Supporta l'input oltre al tocco
- Esegui test su tutti i tipi di dispositivi
Competenze Android
Visualizza su GitHubRendi la tua app adattiva
adaptive competenza Android per aggiornare la UI della tua app in modo che si adatti a diversi dispositivi Android e display.android skills add adaptiveClassi di dimensioni della finestra
Le dimensioni della finestra dell'app possono essere diverse su dispositivi diversi o sullo stesso dispositivo nel caso dei pieghevoli, anche quando l'app è a schermo intero. Orientamenti diversi del dispositivo producono proporzioni diverse. In modalità multi-finestra, le dimensioni, le proporzioni e l'orientamento della finestra dell'app possono differire da quelli dello schermo del dispositivo.
Le app adattive semplificano e generalizzano il problema di determinare e gestire le dimensioni, le proporzioni e l'orientamento della finestra considerando solo la finestra dell'app durante il rendering dei layout, il che funziona anche quando la finestra dell'app è a schermo intero.
Le classi di dimensioni delle finestre classificano le finestre delle app come compatte, medie o espanse in base alla larghezza o all'altezza della finestra.
Calcola la WindowSizeClass della tua app utilizzando la funzione di primo livello currentWindowAdaptiveInfo() della libreria Compose Material 3 Adaptive. La funzione restituisce un'istanza di WindowAdaptiveInfo, che contiene windowSizeClass. La tua app riceve aggiornamenti ogni volta che la classe di dimensioni della finestra cambia:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Riquadri dei contenuti
Il layout di un'attività viene talvolta definito schermata. Ad esempio, la tua app potrebbe avere una schermata Home, una schermata con un elenco e una schermata con i dettagli degli elementi. La terminologia implica che ogni attività riempie lo schermo del dispositivo.
Tuttavia, sugli schermi dei dispositivi abbastanza grandi da supportare la classe di dimensioni della finestra con larghezza espansa, è possibile visualizzare contemporaneamente più schermate di attività. Riquadro è un termine più preciso per le visualizzazioni dei contenuti delle singole attività.
Le classi di dimensioni della finestra ti consentono di determinare quanti riquadri di contenuti mostrare nei layout con più riquadri, come specificato in Material Design.
I riquadri sono navigabili. Nelle classi di dimensioni della finestra compatte e medie, le app mostrano un singolo riquadro, pertanto la navigazione verso qualsiasi destinazione mostra un riquadro.
Nella classe di dimensioni della finestra espansa, le app possono visualizzare contenuti correlati in più riquadri, ad esempio un layout elenco-dettagli. La navigazione verso uno dei due riquadri mostra il layout a due riquadri. Se le dimensioni della finestra diventano compatte o medie, le app adattive mostrano un solo riquadro, la destinazione di navigazione, ovvero l'elenco o i dettagli.
|
|
|
Compose Material 3 Adaptive
Jetpack Compose è l'approccio moderno e dichiarativo per la creazione di app adattive senza l'onere di duplicazione e manutenzione di più file di layout.
La libreria Compose Material 3 Adaptive contiene elementi componibili che gestiscono le classi di dimensioni della finestra, i componenti di navigazione, i layout multi-riquadro, le posizioni pieghevoli e la posizione della cerniera, ad esempio:
NavigationSuiteScaffold: passa automaticamente dalla barra di navigazione alla barra laterale di navigazione a seconda della classe di dimensioni della finestra dell'app e della posizione del dispositivo.ListDetailPaneScaffold: implementa il layout canonico list-detail.Adatta il layout alle dimensioni della finestra dell'app. Presenta un elenco e i dettagli di un elemento dell'elenco in riquadri affiancati nella classe di dimensioni della finestra espansa, ma solo l'elenco o i dettagli nelle classi di dimensioni della finestra compatta e media.
SupportingPaneScaffold: implementa il layout canonico del riquadro di supporto.Presenta il riquadro dei contenuti principali e un riquadro di supporto nella classe di dimensioni della finestra espansa, ma solo il riquadro dei contenuti principali nelle classi di dimensioni della finestra compatta e media.
La libreria Compose Material 3 Adaptive è una dipendenza fondamentale per lo sviluppo di app adattive.
Configurazione e continuità
Le app adattive mantengono la continuità durante le modifiche alla configurazione.
Una modifica della configurazione si verifica quando la finestra dell'app viene ridimensionata, la posizione di un pieghevole cambia o la densità dello schermo o il carattere cambiano.
Per impostazione predefinita, le modifiche alla configurazione ricreano l'attività dell'app e tutti gli stati dell'attività vengono persi. Per mantenere la continuità, le app adattive salvano lo stato nel metodo onSaveInstanceState() dell'attività o in un ViewModel.
Postura
Le app adattive rispondono alle modifiche della posizione dei dispositivi pieghevoli. Le posizioni includono la posizione da tavolo e la posizione libro.
L'interfaccia WindowInfoTracker in Jetpack WindowManager ti consente di ottenere un elenco di oggetti DisplayFeature per il dispositivo. Tra le funzionalità del display c'è FoldingFeature.State, che indica se il dispositivo è completamente o parzialmente aperto.
La libreria Compose Material 3 Adaptive fornisce la funzione di primo livello currentWindowAdaptiveInfo(), che restituisce un'istanza di WindowAdaptiveInfo contenente windowPosture.
Input oltre il tocco
Gli utenti spesso collegano tastiere, trackpad, mouse e stilo esterni a dispositivi con schermi di grandi dimensioni. Le periferiche migliorano la produttività degli utenti, la precisione dell'input, l'espressione personale e l'accessibilità. La maggior parte dei dispositivi ChromeOS è dotata di tastiere e trackpad integrati.
Le app adattive supportano i dispositivi di input esterni, ma il framework Android svolge gran parte del lavoro per te:
Jetpack Compose 1.7 e versioni successive: la navigazione con il tasto Tab della tastiera e il clic, la selezione e lo scorrimento con il mouse o il trackpad sono supportati per impostazione predefinita.
Libreria Jetpack
androidx.compose.material3: consente agli utenti di scrivere in qualsiasi componenteTextFieldutilizzando uno stilo.Guida alle scorciatoie da tastiera: rende visibili agli utenti le scorciatoie da tastiera della piattaforma e delle app Android. Pubblica le scorciatoie da tastiera della tua app in Assistente per le scorciatoie da tastiera eseguendo l'override del callback della finestra
onProvideKeyboardShortcuts().
Per supportare appieno i fattori di forma di tutte le dimensioni, le app adattive supportano l'input di tutti i tipi.
Come testare le app adattive
Testa diverse dimensioni di schermo e finestra e diverse configurazioni dei dispositivi. Utilizza gli screenshot lato host e le anteprime di Compose per controllare i layout della tua app. Esegui la tua app su emulatori Android Studio e dispositivi Android remoti ospitati nei data center di Google.
Norme sulla qualità delle app per schermi di grandi dimensioni
Le norme sulla qualità delle app per schermi grandi ti aiutano a verificare che la tua app adattiva funzioni correttamente su tablet, pieghevoli e dispositivi ChromeOS. Le linee guida includono test che ti consentono di verificare la funzionalità dell'app per i Critical User Journey. Sebbene le linee guida si concentrino sugli schermi di grandi dimensioni, sono compatibili con tutte le dimensioni dello schermo.
Configurazioni multiple
L'interfaccia DeviceConfigurationOverride in Compose 1.7 e versioni successive consente di eseguire l'override di vari aspetti della configurazione dispositivo. L'API simula diverse configurazioni dispositivo in modo localizzato per qualsiasi contenuto componibile che vuoi testare. Ad esempio, puoi testare più dimensioni arbitrarie della UI in un'unica esecuzione della suite di test su un singolo dispositivo o emulatore.
Con la funzione di estensione DeviceConfigurationOverride.then(), puoi testare contemporaneamente più parametri di configurazione, come dimensione del carattere, impostazioni internazionali, tema e dimensione del layout.
Screenshot lato host
I test degli screenshot lato host sono un modo rapido e scalabile per verificare l'aspetto visivo dei layout della tua app. Utilizza gli screenshot lato host per testare la UI per una varietà di dimensioni del display.
Per saperne di più, consulta Test degli screenshot di anteprima di Compose.
Anteprime di Compose
Le anteprime di Compose ti consentono di controllare la UI della tua app nella visualizzazione struttura di Android Studio. Le anteprime utilizzano annotazioni come @PreviewScreenSizes,
@PreviewFontScale e @PreviewLightDark per consentirti di visualizzare i contenuti componibili in varie configurazioni. Puoi anche interagire con le anteprime.
Android Studio evidenzia anche i problemi di usabilità comuni nelle anteprime, come pulsanti o campi di testo troppo ampi.
Per saperne di più, consulta Visualizza l'anteprima della UI con le anteprime componibili.
Emulatori
Android Studio offre una serie di emulatori per testare diverse dimensioni di layout:
- Emulatore ridimensionabile: emula uno smartphone, un tablet o un dispositivo pieghevole e ti consente di passare da uno all'altro in un attimo
- Emulatore Pixel Fold: emula lo smartphone pieghevole con schermo grande Pixel Fold
- Emulatore di Pixel Tablet: emula il dispositivo con schermo grande Pixel Tablet
- Emulatore desktop: consente di testare le finestre in formato libero, il passaggio del mouse e le scorciatoie da tastiera
Streaming da dispositivo remoto
Connettiti in modo sicuro ai dispositivi Android remoti ospitati nei data center di Google ed esegui la tua app sui dispositivi Pixel e Samsung più recenti. Installa ed esegui il debug delle app, esegui comandi ADB, ruota e piega i dispositivi per verificare che la tua app funzioni correttamente su una varietà di dispositivi reali.
Lo streaming da dispositivo remoto è integrato in Android Studio. Per saperne di più, consulta Streaming dispositivo Android, basato su Firebase.
Risorse aggiuntive
- Presentazione I/O: Creazione di app per Android adattabili