Creazione di app adattive

Più di 300 milioni di dispositivi Android con schermi di grandi dimensioni, inclusi tablet, i pieghevoli, i dispositivi ChromeOS, i display per auto e le TV sono oggi in uso, con una maggiore sono sempre disponibili. Per offrire un'esperienza utente ottimale in questo numero in costante aumento, e la varietà di dispositivi con schermi grandi, oltre che sui telefoni standard, le app adattive.

Cosa sono le app adattive?

Le app adattive riorganizzano i layout in base ai cambiamenti nella visualizzazione delle app, principalmente modifiche alle dimensioni della finestra dell'app. Ma le app adattive supportano anche cambiamenti nella postura dei dispositivi pieghevoli, come la postura da un tavolo o un libro, e modifiche alla densità dello schermo e alle dimensioni dei caratteri.

Invece di limitarsi ad allungare o ridurre gli elementi UI in risposta a dimensioni delle finestre, le app adattive sostituiscono i componenti di layout e mostrano o nascondono i contenuti. Ad esempio, sui telefoni standard, un'app adattiva potrebbe mostrare una barra di navigazione, ma su schermi di grandi dimensioni è prevista una barra di navigazione. Su schermi di grandi dimensioni, le app adattive visualizzano più contenuti, ad esempio un layout a due riquadri con elenco dettagliato; attivo schermi piccoli, meno contenuti (l'elenco o i dettagli).

Figura 1. L'app adattiva ottimizza il layout per finestre di dimensioni diverse.

In un passato in rapida evoluzione e incentrato sullo smartphone, le app venivano eseguite a schermo intero. Oggi le app vengono eseguite in modalità multi-finestra in finestre di dimensioni arbitrarie indipendenti dallo schermo del dispositivo dimensioni. Gli utenti possono modificare la dimensione della finestra in qualsiasi momento. Quindi anche su un solo dispositivo le app devono essere adattive.

Le app adattive hanno un ottimo aspetto e funzionano bene su qualsiasi dispositivo e in qualsiasi configurazione.

Perché creare UI adattive?

Gli utenti si aspettano che la tua app funzioni perfettamente su tutti i loro dispositivi e forniscano con funzionalità avanzate su schermi di grandi dimensioni. Gli utenti svolgono più attività contemporaneamente in modalità multi-finestra per un'esperienza con le app migliorata e una maggiore produttività.

Le app limitate a singole attività sui telefoni standard perdono un utente in espansione di diverse possibilità.

Google Play

Google Play offre raccolte di app specifiche per tablet e pieghevoli, oltre che consentono agli utenti di scoprire app di alta qualità.

Google Play classifica le app e i giochi ottimizzati per schermi grandi e non ottimizzati app. Il ranking si basa sulle norme sulla qualità delle app per schermi di grandi dimensioni. Superiore il ranking aumenta la rilevabilità, consentendo agli utenti multi-dispositivo di vedere valutazioni e recensioni su schermi di grandi dimensioni.

Per le app che non soddisfano gli standard di qualità degli schermi di grandi dimensioni del Play Store viene visualizzata una nella pagina dei dettagli dell'app. L'avviso informa gli utenti che l'app potrebbe non funzionano bene sui loro dispositivi con schermi grandi.

. Figura 2. Avviso di qualità tecnica nella pagina dei dettagli dell'app.

Crea app adattive per aumentare la rilevabilità su Google Play e massimizzare numero di dispositivi su cui è possibile scaricare la tua app.

Come iniziare

Pensa alla progettazione adattiva in tutte le fasi dello sviluppo di un'app, dalla pianificazione alla progettazione e deployment continuo. Informa i progettisti grafici sul design adattivo. Progetta la tua app per adattivo e creerai un'app gestibile, estensibile e pronta per i futuri fattori di forma e le modalità windowing.

Per creare un'app adattiva che supporti tutte le dimensioni e le configurazioni del display, procedi nel seguente modo: le seguenti:

  • Utilizzare le classi di dimensioni delle finestre per prendere decisioni relative al layout
  • Crea con la libreria adattiva Compose Material 3
  • Input di supporto oltre il 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 nel caso dei pieghevoli, anche quando l'app è a schermo intero. Diversi orientamenti del dispositivo producono proporzioni diverse. Nella la modalità multi-finestra, le dimensioni della finestra dell'app, le proporzioni e l'orientamento possono diverso da quello dello schermo del dispositivo.

Le app adattive semplificano e generalizzano il problema di determinare e gestire dimensioni, proporzioni e orientamento della finestra 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 espanso in base alla larghezza o all'altezza della finestra.

Rappresentazione delle classi di dimensioni delle finestre compatta, media ed estesa.
. Figura 3. Classi di dimensioni delle finestre in base alla larghezza di visualizzazione.
.

Calcola il valore WindowSizeClass dell'app utilizzando currentWindowAdaptiveInfo() funzione di primo livello della funzionalità Compose libreria adattiva Material 3. La funzione restituisce un'istanza WindowAdaptiveInfo, che contiene windowSizeClass. La tua app riceve aggiornamenti ogni volta che la classe delle dimensioni della finestra cambia:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

Riquadri di contenuti

Il layout di un'attività è a volte indicato come schermo. Ad esempio, potrebbe avere una schermata Home, una schermata con elenco e una schermata con i dettagli dell'elemento. La implica che ogni attività riempie lo schermo del dispositivo.

Tuttavia, sugli schermi dei dispositivi di dimensioni sufficientemente grandi da supportare la larghezza espansa dimensione della finestra, possono essere visualizzate più schermate di attività contemporaneamente. Pane è un termine più preciso per indicare la visualizzazione di contenuti di singole attività.

Le classi di dimensioni delle finestre consentono di stabilire in quanti riquadri di contenuti mostrare layout a più riquadri, come specificato in Material Design.

Gli schermi dei dispositivi sono suddivisi in riquadri: un riquadro per le classi di dimensioni compatte e medie, due riquadri per le classi di dimensioni delle finestre estese.
. Figura 4. Numero di riquadri di contenuti per classe di dimensioni della finestra.

I riquadri sono navigabili. Nelle classi di finestre compatte e medie, le app mostrano riquadro singolo; e per navigare verso una destinazione viene visualizzato un unico riquadro.

Nella classe delle dimensioni della finestra espansa, le app possono mostrare contenuti correlati in più come un layout elenco dettagli. Navigazione in uno dei riquadri visualizzati il layout a due riquadri. Se le dimensioni della finestra diventano compatte o medie, le app adattive mostrano solo un riquadro: la destinazione di navigazione, l'elenco o i dettagli.

Figura 5. Layout elenco dettagliato con riquadro elenco come destinazione della navigazione.
Figura 6. Layout elenco dettagli con riquadro dei dettagli come destinazione della navigazione.

Compose Material 3 Adaptive

Jetpack Compose è l'approccio moderno e dichiarativo alla creazione di app adattive senza la duplicazione e la manutenzione di più file di layout.

La libreria adattiva Compose Material 3 contiene elementi componibili che gestiscono classi di dimensioni delle finestre, componenti di navigazione, layout a più riquadri posizioni pieghevoli e posizione delle cerniere, ad esempio:

  • NavigationSuiteScaffold: passa automaticamente da una barra di navigazione all'altra e barra di navigazione, a seconda della classe delle dimensioni della finestra dell'app e della postura del dispositivo.

  • ListDetailPaneScaffold: implementa la canonica elenco-dettaglio layout.

    Adatta il layout alle dimensioni della finestra dell'app. Presenta un elenco e i dettagli un elemento dell'elenco in riquadri affiancati con dimensioni della finestra espansa ma solo l'elenco o il dettaglio delle finestre di dimensioni compatte e medie .

  • SupportingPaneScaffold: implementa il riquadro di supporto canonico layout.

    Presenta il riquadro dei contenuti principale e un riquadro di supporto nella finestra espansa ma solo il riquadro principale dei contenuti nelle finestre compatte e di medie dimensioni .

La libreria adattiva Compose Material 3 è una dipendenza indispensabile per sviluppare app adattive.

Configurazione e continuità

Le app adattive mantengono la continuità durante le modifiche alla configurazione.

Si verifica una modifica alla configurazione quando la finestra dell'app viene ridimensionata, viene modifiche pieghevoli oppure modifiche alla densità dello schermo o al carattere.

Per impostazione predefinita, le modifiche alla configurazione ricreano l'attività nell'app e tutte le attività viene perso. Per mantenere la continuità, le app adattive salvano lo stato nel del metodo onSaveInstanceState() dell'attività o in un ViewModel.

Postura

Le app adattive rispondono ai cambiamenti nella postura dei dispositivi pieghevoli. Posture includi la postura del libro e del tavolino.

. Figura 7. Dispositivo pieghevole in posizione da tavolo.

L'interfaccia di WindowInfoTracker di Jetpack WindowManager ti consente di: recupera un elenco di oggetti DisplayFeature per il dispositivo. Tra i display è FoldingFeature.State, che indica se il dispositivo è aperta completamente o parzialmente.

La libreria adattiva Compose Material 3 fornisce currentWindowAdaptiveInfo() funzione di primo livello, che restituisce una dell'istanza di WindowAdaptiveInfo contenente windowPosture.

Input oltre il tocco

Gli utenti spesso collegano tastiere esterne, trackpad, mouse e stilo a dispositivi di grandi dimensioni dispositivi con lo schermo. Le periferiche migliorano la produttività degli utenti, la precisione espressione personale ed accessibilità. La maggior parte dei dispositivi ChromeOS include tastiere e trackpad integrati.

Le app adattive supportano i dispositivi di input esterni, ma gran parte del lavoro viene svolto per il framework Android:

  • Jetpack Compose 1.7 e versioni successive: navigazione nelle schede con la tastiera e mouse oppure i clic, la selezione e lo scorrimento del trackpad sono supportati per impostazione predefinita.

  • Libreria Jetpack androidx.compose.material3: consente agli utenti di scrivere in un componente TextField utilizzando uno stilo.

  • Guida scorciatoie da tastiera: consente di utilizzare la piattaforma Android e la tastiera dell'app le scorciatoie rilevabili dagli utenti. Pubblica le scorciatoie da tastiera dell'app in Assistente scorciatoie da tastiera eseguendo l'override del Callback della finestra onProvideKeyboardShortcuts().

Per un supporto completo dei fattori di forma di tutte le dimensioni, le app adattive supportano l'input di tutti di testo.

Come testare le app adattive

Prova diverse dimensioni di schermi e finestre e configurazioni dei dispositivi differenti. Utilizza gli screenshot lato host e le anteprime di Compose per controllare i layout delle tue app. Esegui l'app su emulatori di Android Studio e dispositivi Android remoti in hosting su data center di Google.

Norme sulla qualità delle app per schermi di grandi dimensioni

Le norme sulla qualità delle app per schermi grandi assicurano il corretto funzionamento dell'app adattiva su tablet, pieghevoli e dispositivi ChromeOS. Le linee guida includono test ti consentono di verificare la funzionalità dell'app per i percorsi critici degli utenti. Sebbene le linee guida si concentrano sugli schermi di grandi dimensioni, pertanto sono compatibili con schermi di tutte le dimensioni.

Più configurazioni

L'interfaccia di DeviceConfigurationOverride in Compose 1.7 e versioni successive. consente di eseguire l'override di vari aspetti della configurazione del dispositivo. L'API simula diverse configurazioni del dispositivo in modo localizzato per qualsiasi componibili che vuoi testare. Ad esempio, puoi testare più query dimensioni di UI arbitrarie in un'unica esecuzione della suite di test su un singolo dispositivo oppure un emulatore.

Con la funzione di estensione DeviceConfigurationOverride.then(), puoi testare più parametri di configurazione, come dimensioni del carattere, impostazioni internazionali, tema e dimensioni del layout, il tutto contemporaneamente.

Screenshot lato host

I test degli screenshot lato host sono un modo rapido e scalabile per verificare l'immagine aspetto dei layout delle app. Utilizza gli screenshot lato host per testare l'UI per un di display di varie dimensioni.

Per ulteriori informazioni, consulta la sezione Creare il test dello screenshot di anteprima.

Crea anteprime

Le anteprime di Scrivi ti consentono di controllare l'UI della tua app nella visualizzazione Struttura di Android Studio. Le anteprime utilizzano annotazioni, ad esempio @PreviewScreenSizes, @PreviewFontScale e @PreviewLightDark per consentirti di visualizzare gli elementi componibili contenuti in varie configurazioni. Puoi anche interagire con le anteprime.

Android Studio evidenzia anche i problemi di usabilità più comuni, ad esempio: pulsanti o campi di testo troppo larghi.

Per ulteriori informazioni, consulta Visualizzare l'anteprima dell'interfaccia utente con 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 consente puoi passare da una all'altra al volo
  • Emulatore Pixel Fold: emula lo smartphone pieghevole a schermo ampio di Pixel Fold
  • Emulatore Pixel Tablet: emula il dispositivo Pixel Tablet con schermo grande
  • Emulatore desktop: consente di testare le funzionalità di windowing in formato libero, passaggio del mouse e scorciatoie da tastiera

Streaming dispositivo remoto

Connettiti in sicurezza ai dispositivi Android remoti ospitati nei data center di Google ed esegui la tua app sui dispositivi Pixel e Samsung più recenti. Installare ed eseguire il debug di app, eseguire nonché di ruotare e piegare i dispositivi per far sì che l'app funzioni correttamente una varietà di dispositivi reali.

Lo streaming da dispositivo remoto è integrato in Android Studio. Per ulteriori informazioni, consulta Streaming di dispositivi Android, con tecnologia Firebase.

Risorse aggiuntive