Oggi sono in uso più di 300 milioni di dispositivi Android con schermi di grandi dimensioni, tra cui tablet, pieghevoli, dispositivi ChromeOS, display per auto e TV, e il numero è in continua crescita. Per offrire un'esperienza utente ottimale sul numero e sulla varietà sempre maggiori di dispositivi con schermi di grandi dimensioni nonché sugli smartphone standard, creaapp adattive.
Che cosa sono le app adattive?
Le app adattive modificano i layout in base alle modifiche del display dell'app, principalmente le dimensioni della finestra dell'app. Tuttavia, le app adattive si adattano anche alle modifiche della postura dei dispositivi pieghevoli, ad esempio la postura da tavolo o da libro, e alle modifiche della densità dello schermo e delle dimensioni dei caratteri.
Anziché limitarsi a estendere o ridurre gli elementi dell'interfaccia utente in risposta alle diverse dimensioni delle finestre, 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 verticale. Sugli schermi di grandi dimensioni, le app adattive mostrano più contenuti, ad esempio un layout a due riquadri, list-detail; sugli schermi piccoli, 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. Pertanto, anche su un singolo tipo di dispositivo, le app devono essere adattive.
Le app adattive hanno un aspetto fantastico e funzionano bene su qualsiasi dispositivo in qualsiasi configurazione.
Perché creare interfacce utente adattive?
Gli utenti si aspettano che la tua app funzioni perfettamente su tutti i loro dispositivi e fornisca funzionalità avanzate sugli schermi di grandi dimensioni. Gli utenti eseguono il multitasking in modalità multi-finestra per un'esperienza app migliorata e una maggiore produttività.
Le app limitate al multitasking su smartphone standard perdono una base di 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 più in alto rispetto alle app non ottimizzate. Google Play basa la classificazione sulle norme sulla qualità delle app per schermi di grandi dimensioni. Una classificazione più alta 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 bene 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 alla progettazione adattiva in tutte le fasi di sviluppo dell'app, dalla pianificazione al deployment. Informa i grafici della progettazione adattiva. Progetta la tua app in modo che sia adattiva e creerai un'app gestibile, estensibile e pronta per i fattori di forma e le modalità di visualizzazione a finestre future.
Per creare un'app adattiva che supporti tutte le dimensioni e le configurazioni del display:
- Utilizza le classi di dimensioni delle finestre per prendere decisioni sul layout
- Crea con la libreria adattiva Compose Material 3
- Supporta l'input oltre al tocco
- Esegui test su tutti i tipi di dispositivi
Classi di dimensioni delle finestre
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 dei dispositivi producono proporzioni diverse. In modalità multi-finestra, le dimensioni, le proporzioni e l'orientamento della finestra dell'app possono essere diversi da quelli dello schermo del dispositivo.
Le app adattive semplificano e generalizzano il problema della determinazione e della gestione delle dimensioni, delle proporzioni e dell'orientamento delle finestre considerando solo la finestra dell'app durante il rendering dei layout, 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 estese in base alla larghezza o all'altezza della finestra.
Calcola la WindowSizeClass della tua app utilizzando la
currentWindowAdaptiveInfo() funzione di primo livello della libreria adattiva Compose
Material 3. 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 a volte chiamato schermata. Ad esempio, la tua app potrebbe avere una schermata Home, una schermata dell'elenco e una schermata dei dettagli dell'elemento. La terminologia implica che ogni attività riempia lo schermo del dispositivo.
Tuttavia, sugli schermi dei dispositivi sufficientemente grandi da supportare la classe di dimensioni delle finestre a larghezza estesa, più schermate di attività possono essere visualizzate contemporaneamente sullo schermo. Riquadro è un termine più preciso per i display dei contenuti delle singole attività.
Le classi di dimensioni delle finestre ti consentono di determinare il numero di riquadri dei contenuti da mostrare nei layout a più riquadri, come specificato in Material Design.
I riquadri sono navigabili. Nelle classi di dimensioni delle finestre compatte e medie, le app mostrano un singolo riquadro; pertanto, la navigazione verso qualsiasi destinazione mostra un riquadro.
Nella classe di dimensioni delle finestre estesa, le app possono mostrare 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 cambiano in 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 adattiva Compose Material 3 contiene composable che gestiscono le classi di dimensioni delle finestre, i componenti di navigazione, i layout a più riquadri e le posture e la posizione della cerniera dei pieghevoli, ad esempio:
NavigationSuiteScaffold: passa automaticamente dalla barra di navigazione alla barra di navigazione verticale a seconda della classe di dimensioni della finestra dell'app e della postura 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 delle finestre estesa, ma solo l'elenco o i dettagli nelle classi di dimensioni delle finestre compatte e medie.
SupportingPaneScaffold: implementa il layout canonico del riquadro di supporto.Presenta il riquadro dei contenuti principale e un riquadro di supporto nella classe di dimensioni delle finestre estesa, ma solo il riquadro dei contenuti principale nelle classi di dimensioni delle finestre compatte e medie.
La libreria adattiva Compose Material 3 è 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 alla configurazione si verifica quando la finestra dell'app viene ridimensionata, la postura di un pieghevole cambia o la densità dello schermo o il carattere cambia.
Per impostazione predefinita, le modifiche alla configurazione ricreano l'attività dell'app e tutto lo stato dell'attività viene perso. 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 postura dei dispositivi pieghevoli. Le posture includono la postura da tavolo e da libro.
L'interfaccia WindowInfoTracker in Jetpack WindowManager 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 adattiva Compose Material 3 fornisce la
currentWindowAdaptiveInfo() funzione di primo livello, che restituisce un'
istanza di WindowAdaptiveInfo contenente windowPosture.
Input oltre al tocco
Gli utenti spesso collegano tastiere, trackpad, mouse e stilo esterni ai dispositivi con schermi di grandi dimensioni. Le periferiche migliorano la produttività, la precisione dell'input, l'espressione personale e l'accessibilità degli utenti. 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 la 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.Assistente per le scorciatoie da tastiera: consente agli utenti di scoprire le scorciatoie da tastiera della piattaforma e delle app Android. Pubblica le scorciatoie da tastiera della tua app in Assistente scorciatoie da tastiera sostituendo il
onProvideKeyboardShortcuts()callback della finestra.
Per supportare completamente 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 dello schermo e delle finestre e diverse configurazioni dei dispositivi. Utilizza gli screenshot lato host e le anteprime di Compose per controllare i layout delle app. Esegui l'app sugli emulatori di Android Studio e sui 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 di grandi dimensioni ti aiutano a verificare che la tua app adattiva funzioni bene su tablet, pieghevoli e dispositivi ChromeOS. Le norme includono test che consentono di verificare la funzionalità dell'app per i percorsi utente critici. Sebbene le norme si concentrino sugli schermi di grandi dimensioni, sono compatibili con tutte le dimensioni dello schermo.
Più configurazioni
L'interfaccia DeviceConfigurationOverride in Compose 1.7 e versioni successive
consente di sostituire vari aspetti della configurazione del dispositivo. L'API simula diverse configurazioni dei dispositivi in modo localizzato per qualsiasi contenuto composable che vuoi testare. Ad esempio, puoi testare più dimensioni dell'interfaccia utente arbitrarie in una singola esecuzione della suite di test su un singolo dispositivo o emulatore.
Con la funzione di estensione DeviceConfigurationOverride.then(), puoi
testare più parametri di configurazione, come dimensioni dei caratteri, lingua, tema e
dimensioni del layout, contemporaneamente.
Screenshot lato host
I test degli screenshot lato host sono un modo rapido e scalabile per verificare l'aspetto visivo dei layout delle app. Utilizza gli screenshot lato host per testare l'interfaccia utente 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 l'interfaccia utente della tua app nella visualizzazione Progettazione di Android Studio. Le anteprime utilizzano annotazioni, come @PreviewScreenSizes,
@PreviewFontScale e @PreviewLightDark, per consentirti di visualizzare i contenuti composable
in varie configurazioni. Puoi persino interagire con le anteprime.
Android Studio evidenzia anche i problemi di usabilità comuni nelle anteprime, ad esempio pulsanti o campi di testo troppo larghi.
Per saperne di più, consulta Visualizzare l'anteprima dell'interfaccia utente con le anteprime composable.
Emulatori
Android Studio offre una varietà di emulatori per testare diverse dimensioni del layout:
- Emulatore ridimensionabile: emula uno smartphone, un tablet o un dispositivo pieghevole e ti consente di passare da uno all'altro in tempo reale
- Emulatore Pixel Fold: emula lo smartphone pieghevole con schermo di grandi dimensioni Pixel Fold
- Emulatore Pixel Tablet: emula il dispositivo con schermo di grandi dimensioni Pixel Tablet
- Emulatore desktop: consente di testare la visualizzazione a finestre a forma libera, il passaggio del mouse e le scorciatoie da tastiera
Streaming dispositivo remoto
Connettiti in modo sicuro ai dispositivi Android remoti ospitati nei data center di Google ed esegui la tua app sugli ultimi dispositivi Pixel e Samsung. Installa ed esegui il debug delle app, esegui i comandi ADB e ruota e piega i dispositivi per verificare che la tua app funzioni bene su una varietà di dispositivi reali.
Lo streaming dispositivo remoto è integrato in Android Studio. Per saperne di più, consulta Streaming dispositivo Android, basato su Firebase.
Risorse aggiuntive
- Presentazione I/O: Building adaptive Android apps