Sviluppa per schermi di dimensioni diverse

La tua app dovrebbe funzionare bene su dispositivi Wear OS di tutte le dimensioni, sfruttando lo spazio aggiuntivo, se disponibile, e avere un bell'aspetto anche su schermi più piccoli. Questa guida fornisce consigli per ottenere questa esperienza utente.

Per scoprire di più sui principi di progettazione dei layout adattivi, leggi le indicazioni per la progettazione.

Crea layout adattabili utilizzando Material 3

I layout devono avere margini basati su percentuali. In Wear Compose Material 3, ScreenScaffold calcola automaticamente il padding basato su percentuale e fornisce contentPadding alla relativa lambda dei contenuti; passa questo parametro contentPadding a TransformingLazyColumn.

Il seguente snippet di codice utilizza un componente TransformingLazyColumn per creare contenuti che hanno un aspetto ottimale su schermi Wear OS di varie dimensioni:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}

Questo esempio mostra anche ScreenScaffold e AppScaffold. Questi elementi coordinano l'app e le singole schermate (percorsi di navigazione) per garantire il corretto comportamento di scorrimento e il posizionamento di TimeText.

Per il padding superiore e inferiore, tieni presente anche quanto segue:

  • L'utilizzo di Modifier.minimumVerticalContentPadding (ad esempio ListHeaderDefaults.minimumTopListContentPadding e ButtonDefaults.minimumVerticalListContentPadding), in modo che TransformingLazyColumn utilizzi almeno il padding superiore e inferiore consigliato quando questi elementi vengono visualizzati sul bordo dell'elenco.
  • L'utilizzo di ListHeader per il primo elemento dell'elenco, anziché di un semplice componibile Text.

Le specifiche complete sono disponibili nei kit di progettazione Figma. Per ulteriori dettagli ed esempi, consulta:

  • La libreria Horologist fornisce strumenti di supporto per creare app ottimizzate e differenziate per Wear OS.
  • L'esempio ComposeStarter, un esempio che mostra i principi descritti in questa guida.
  • L'esempio JetCaster: un esempio più complesso di creazione di un'app per l'utilizzo con schermi di dimensioni diverse, utilizzando la libreria Horologist.

Utilizza i layout a scorrimento nella tua app

Utilizza un layout a scorrimento, come mostrato in precedenza in questa pagina, come scelta predefinita quando implementi le schermate. In questo modo, gli utenti possono raggiungere i componenti della tua app indipendentemente dalle preferenze di visualizzazione o dalle dimensioni dello schermo del dispositivo Wear OS.

L'effetto delle diverse dimensioni dei dispositivi e della scalabilità dei caratteri

L'effetto di diverse dimensioni dei dispositivi e della scalabilità dei caratteri.

Finestre di dialogo

Anche le finestre di dialogo devono essere scorrevoli, a meno che non ci sia un motivo molto valido per non farlo. Il componente AlertDialog è adattabile e scorrevole per impostazione predefinita se i contenuti superano l'altezza dell'area visibile.

Le schermate personalizzate potrebbero richiedere layout senza scorrimento

Alcune schermate potrebbero essere ancora adatte a layout senza scorrimento. Alcuni esempi includono la schermata principale del player in un'app multimediale e la schermata di allenamento in un'app di fitness.

In questi casi, consulta le indicazioni canoniche fornite nei kit di progettazione Figma e implementa un design adattabile alle dimensioni dello schermo, utilizzando i margini corretti.

Offri esperienze differenziate tramite i punti di interruzione

Con display più grandi, puoi introdurre contenuti e funzionalità aggiuntivi. Per implementare questo tipo di esperienza differenziata, utilizza i punti di interruzione delle dimensioni dello schermo, mostrando un layout diverso quando le dimensioni dello schermo superano i 225 dp:

const val LARGE_DISPLAY_BREAKPOINT = 225

@Composable
fun isLargeDisplay() =
    LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT

// ...
// ... use in your Composables:
    if (isLargeDisplay()) {
        // Show additional content.
    } else {
        // Show content only for smaller displays.
    }
    // ...

Le indicazioni per la progettazione illustrano altre opportunità di questo tipo.

Testa le combinazioni di dimensioni dello schermo e dei caratteri utilizzando le anteprime

Le anteprime di Compose ti aiutano a sviluppare per una varietà di dimensioni dello schermo di Wear OS. Utilizza le definizioni di anteprima dei dispositivi e della scalabilità dei caratteri per visualizzare quanto segue:

  • L'aspetto delle schermate alle dimensioni estreme, ad esempio il carattere più grande abbinato allo schermo più piccolo.
  • Come si comporta la tua esperienza differenziata nei vari breakpoint.

Assicurati di implementare le anteprime utilizzando WearPreviewDevices e WearPreviewFontScales per tutte le schermate della tua app. Per i dettagli completi sulla configurazione delle anteprime di Wear OS, sulle specifiche hardware personalizzate e sull'anteprima degli elenchi con scorrimento, consulta Visualizza l'anteprima della UI in Compose per Wear OS.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}

Test degli screenshot

Oltre ai test di anteprima, i test con screenshot ti consentono di eseguire test su una gamma di dimensioni hardware esistenti. Questo è particolarmente utile se questi dispositivi potrebbero non essere immediatamente disponibili e il problema potrebbe non presentarsi su altre dimensioni dello schermo.

I test degli screenshot ti aiutano anche a identificare le regressioni in posizioni specifiche del codebase.

I nostri esempi utilizzano Roborazzi per i test degli screenshot:

  1. Configura i file del progetto e dell'app build.gradle per utilizzare Roborazzi.
  2. Crea un test degli screenshot per ogni schermata dell'app. Ad esempio, il seguente codice mostra un test degli screenshot per una schermata contenente un elenco:
@RunWith(ParameterizedRobolectricTestRunner::class)
class ComposeListScreenTest(
    override val device: WearDevice
) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun myScreenTest() =
        runTest {
            AppScaffold {
                ComposeList()
            }
        }

    companion object {
        @JvmStatic
        @ParameterizedRobolectricTestRunner.Parameters
        fun devices() = WearDevice.entries
    }
}

Aspetti importanti da tenere in considerazione:

  • WearDevice.entries contiene le definizioni per i dispositivi Wear OS più diffusi, in modo che i test vengano eseguiti su una gamma rappresentativa di dimensioni dello schermo.

Genera immagini golden

Per generare immagini per gli schermi, esegui questo comando in un terminale:

./gradlew recordRoborazziDebug

Verifica le immagini

Per verificare le modifiche rispetto alle immagini esistenti, esegui questo comando in un terminale:

./gradlew verifyRoborazziDebug

Per un esempio completo di test degli screenshot, consulta l'esempio ComposeStarter.