Best practice per lo sviluppo di app per schermi di varie dimensioni, basate su Good Lock

A causa dell’ampia varietà di dispositivi Android, il supporto di più dimensioni dello schermo e modalità di visualizzazione è una parte essenziale dello sviluppo di applicazioni Android moderne. Un’interfaccia utente reattiva e adattabile offre un’esperienza utente fluida per le persone che utilizzano l’applicazione su diversi dispositivi, come telefoni, dispositivi pieghevoli e tablet.

Questo articolo offre alcuni suggerimenti e trucchi per lo sviluppo di applicazioni adattabili che supportano funzionalità specifiche dei dispositivi pieghevoli e con schermo di grandi dimensioni:

Uno dei maggiori punti di forza dei dispositivi Android è la personalizzazione. Con Good Lock, gli utenti possono personalizzare One UI per soddisfare le proprie esigenze individuali, come aggiungere widget alla schermata di copertina.

Nell’agosto 2023, Samsung ha rilasciato il Galaxy Z Flip5, uno smartphone pieghevole con display cover. Lo schermo di copertura da 3,4 pollici può essere utilizzato per fornire all’utente l’accesso diretto alle informazioni e alle funzionalità più importanti delle proprie applicazioni. Offre inoltre nuove opportunità di personalizzazione e personalizzazione. La schermata di copertina è progettata per visualizzare widget personalizzabili, come orologi, sfondi, elenchi di notifiche e calendari. Per informazioni di base sulla creazione di widget Android, vedere Creare un widget semplice.

Puoi anche creare widget per la tua applicazione che possono essere visualizzati sulla schermata di copertina. Ad esempio, se stai sviluppando un’applicazione di messaggistica, puoi migliorare la tua applicazione creando un widget che visualizzi i messaggi recenti o non letti sulla schermata di copertina.

Per abilitare la visualizzazione del widget sullo schermo della cover del Galaxy Z Flip5 (chiamato anche Flex Window):

1. Crea un nuovo file di risorse XML all’interno del file della tua applicazione res/xml cartella. Incolla il seguente codice per configurare la visualizzazione del tuo widget per Flex Window:

   <samsung-appwidget-provider
       display="sub_screen">
   </samsung-appwidget-provider>
   

2. Nel file manifest del tuo progetto, aggiungi i metadati per il file XML appena creato all’interno del file <receiver> elemento per il widget dell’applicazione:

   <meta-data
    android:name="com.samsung.android.appwidget.provider"
    android:resource="@xml/samsung_meta_info_sample_widget" />
   

3. Nel file XML contenente i metadati per il widget dell’applicazione, modifica gli attributi del widget con questi valori consigliati:

   <appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
       android:initialLayout="@layout/test_widget"
       android:minHeight="352dp"
       android:minWidth="339dp"
       android:resizeMode="vertical|horizontal"
       android:widgetCategory="keyguard">
   </appwidget-provider>
   

Una volta installata l’applicazione, il widget viene visualizzato nell’elenco dei widget della schermata di copertina sul dispositivo. L’utente può visualizzare il widget nella Flex Window andando su Impostazioni > Schermata di copertina > Widget e selezionando il widget dall’elenco.

Per ulteriori informazioni sullo sviluppo del widget per la schermata di copertina, consulta Sviluppare un widget per Flex Window Code Lab.

Sebbene la schermata di copertina sia destinata principalmente ai widget, gli utenti possono anche utilizzare l’applicazione MultiStar in Good Lock per avviare applicazioni complete sulla schermata di copertina. Per avviare un’applicazione nella schermata di copertina:

1. Installa Good Lock dal Galaxy Store.
2. Nell’applicazione Good Lock, vai a Life Up > MultiStar > I ♡ Galaxy Foldable > Widget Launcher.
3. Dall’elenco selezionare l’applicazione che si desidera avviare nella schermata di copertina e toccare Abilita il widget di avvio.

È fondamentale che le tue applicazioni possano adattarsi sia agli schermi piccoli che a quelli grandi. Le due sezioni successive riassumono brevemente come adattare le tue applicazioni sia alla modalità Flex che alla modalità multi-finestra.

Adatta la tua applicazione alla modalità Flex

Il layout dei vincoli è consigliato per implementare un’interfaccia utente reattiva nelle tue applicazioni. Il layout dei vincoli offre una gerarchia di visualizzazione piatta, evitando fastidiose visualizzazioni nidificate. È possibile assegnare una dimensione e una distanza relativa tra i gruppi di visualizzazione, in modo che i componenti si ridimensionino in base al dispositivo su cui è in esecuzione l’applicazione.

Supponiamo che tu voglia creare un’applicazione che visualizzi un elenco di immagini al centro dello schermo, equidistanti. Per fare ciò, puoi utilizzare le linee guida, ovvero guide virtuali che ti aiutano ad allineare le visualizzazioni.

Per aggiungere linee guida e adattare la tua interfaccia utente ad esse:

1. In Android Studio, vai a Aiutanti > Linee guida(orizzontale) O Linea guida (verticale) e trascina le linee guida sul tuo layout.
2. Modificare il valore di app:layout_constraintGuide_begin da un valore statico ad un valore percentuale.
3. Allinea le tue opinioni alle nuove linee guida vincolandole alle linee guida.

Per ulteriori informazioni sull’implementazione dei layout utilizzando le linee guida e una dimostrazione, vedere Progettare un layout reattivo singolo per telefoni pieghevoli utilizzando le linee guida Android.

Puoi anche utilizzare la libreria Jetpack WindowManager di Android, che supporta vari fattori di forma, incluso il multi-finestra, per fornire supporto per la modalità Flex nella tua applicazione:

1. Aggiungi le seguenti dipendenze a quelle dell’applicazione build.gradle file:

   implementation "androidx.window:window:1.0.0"
   implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.6.1"
   

2. Imposta un’attività sensibile al ciclo di vita in grado di ottenere informazioni sul layout delle finestre da WindowLayoutInfo oggetto. IL checkAndUpdateState() la funzione viene utilizzata per aggiornare l’interfaccia utente. Passa il newLayoutInfo opporsi a questa funzione e apportare le modifiche appropriate.

   lifecycleScope.launch(Dispatchers.Main) {
   lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
       WindowInfoTracker.getOrCreate(this @MainActivity)
           .windowLayoutInfo(this @MainActivity)
           .collect {
                   newLayoutInfo -> checkAndUpdateState(newLayoutInfo)
           }
       }
   }
   

3. IL WindowLayoutInfo l’oggetto contiene a displayFeatures oggetto che contiene lo stato corrente della tua applicazione. IL displayFeatures l’oggetto contiene anche il file FoldingFeature interfaccia, che descrive gli stati e gli orientamenti del dispositivo specifici dei dispositivi pieghevoli:

   • Se la displayFeatures l’oggetto è nullil dispositivo è chiuso o piegato.
   • Se FoldingFeature.State È HALF_OPENED E FoldingFeature.Orientation È VERTICALil dispositivo è un dispositivo Galaxy Flip in modalità Flex.
   • Se FoldingFeature.State È HALF_OPENED E FoldingFeature.Orientation È HORIZONTALil dispositivo è un dispositivo Galaxy Fold in modalità Flex.
   • Se FoldingFeature.State È Flatil dispositivo è completamente aperto.

   Per ulteriori informazioni sull’adattamento dell’interfaccia utente per diversi stati e orientamenti del dispositivo, vedi Rendere la tua app pieghevole consapevole.

4. Per configurare l’applicazione per la dimensione della finestra corrente, che sia verticale, orizzontale, piegata, aperta, multi-finestra o qualsiasi altra modalità, sovrascrivere la onConfigurationChanged() funzione e recuperare la dimensione corrente della finestra da windowMetricsCalculator interfaccia.

   override fun onConfigurationChanged(newConfig: Configuration) {
   super.onConfigurationChanged(newConfig)
   val windowMetrics = WindowMetricsCalculator.getOrCreate()
       .computeCurrentWindowMetrics(this@MainActivity)
   val bounds = windowMetrics.getBounds()
   ...
   }
   

Per ulteriori informazioni sull’implementazione della modalità Flex in un progetto Android esistente, vedere Implementare la modalità Flex su un lettore video in Code Lab.

Adatta la tua applicazione alla modalità multi-finestra

La modalità multi-finestra e la continuità delle app sono funzionalità chiave dei dispositivi pieghevoli che contribuiscono a un’esperienza più versatile e intuitiva. Migliorano le capacità multitasking e l’usabilità complessiva delle applicazioni su più fattori di forma.

La modalità Multi-Window consente di utilizzare due o più applicazioni contemporaneamente sullo stesso schermo. Le applicazioni possono essere utilizzate anche in visualizzazione popup, come popup mobile sopra un’altra applicazione aperta.

Per implementare il supporto per la modalità multi-finestra e la continuità dell’app:

1. Aggiungi i seguenti attributi a <activity> elemento nel tuo AndroidManifest.xml file:

   android:configChanges="screenSize|smallestScreenSize|screenLayout"
   android:resizeableActivity="true"
   

   Aggiungendo questi flag al file configChanges L’attributo tiene conto di ogni modifica rilevante alla configurazione del dispositivo, creando un’interfaccia utente più pieghevole.

   Collocamento resizeableActivity A true consente di avviare l’attività in modalità schermo diviso e pop-up.

2. Per ricordare lo stato dell’applicazione prima delle modifiche alla configurazione, è necessario utilizzare componenti sensibili al ciclo di vita:

   • Puoi salvare lo stato precedente dell’applicazione in un pacchetto all’interno del file onSaveInstanceState() funzionano come coppie chiave-valore. È quindi possibile verificare se esiste uno stato dell’applicazione salvato all’interno del file onCreate() funzione. Se la savedInstanceState bundle è nullo, non esiste uno stato dell’applicazione salvato. Se non è nullo, puoi recuperare lo stato precedente dell’applicazione e aggiornare di conseguenza l’interfaccia utente. Per ulteriori informazioni, consulta Elementi essenziali di Foldable Adaptation: continuità delle app e gestione di più finestre.

   • In alternativa, puoi utilizzare ViewModels. Un ViewModel consente di archiviare lo stato dell’interfaccia utente dell’applicazione e fornisce inoltre l’accesso alla logica aziendale principale. Per creare un ViewModel, crea una classe separata che estenda il file ViewModel classe e inizializzare MutableState oggetti che possono memorizzare lo stato. Crea un’istanza del tuo ViewModel nelle tue attività onCreate() funzione e utilizzala per aggiornare gli elementi dell’interfaccia utente. Per ulteriori informazioni, consulta Come aggiornare le app per i display pieghevoli.

Se non desideri supportare la modalità multi-finestra nella tua applicazione, puoi semplicemente impostare resizeableActivity A false nel <activity> elemento all’interno del AndroidManifest.xml file.

Conclusione

Questo articolo descrive alcune pratiche chiave per creare un’interfaccia utente reattiva e adattabile per la tua applicazione, come l’abilitazione dei widget della schermata di copertina e l’implementazione della modalità Flex e della modalità multi-finestra. Il rispetto di queste pratiche garantisce un’esperienza versatile e intuitiva sui dispositivi Android pieghevoli, migliorando le capacità multitasking e l’usabilità complessiva delle applicazioni in vari fattori di forma.

Contenuto relativo