Sviluppa per schermi di dimensioni diverse

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

Per scoprire di più sui principi di progettazione dei layout adattabili, leggi le linee guida per la progettazione.

Creare layout adattabili utilizzando Material 3

Il seguente snippet di codice utilizza un componente TransformingLazyColumn per creare contenuti che abbiano un bell'aspetto su una varietà di dimensioni dello schermo di Wear OS:

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,
                )
            }
        }
    }
}
List.kt

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

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

• La specifica del primo e dell'ultimo ItemType, per determinare il padding corretto.
• L'utilizzo di ListHeader per il primo elemento dell'elenco, perché le intestazioni Text non devono avere padding.

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

• La libreria Horologist: fornisce helper per aiutarti a 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 funzionare con diverse dimensioni dello schermo, utilizzando la libreria Horologist.

Utilizzare layout di scorrimento nell'app

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

L'effetto di diverse dimensioni del dispositivo e del ridimensionamento dei caratteri.

Finestre di dialogo

Anche le finestre di dialogo devono essere scorrevoli, a meno che non ci sia un motivo 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 non scorrevoli

Alcune schermate potrebbero comunque essere adatte a layout non scorrevoli. Diversi esempi includono la schermata del player principale in un'app multimediale e la schermata di allenamento in un'app per il fitness.

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

Offrire 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.
    }
    // ...
List.kt

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

Testare 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 del ridimensionamento dei caratteri per visualizzare quanto segue:

• L'aspetto delle schermate agli estremi delle dimensioni, ad esempio il carattere più grande abbinato allo schermo più piccolo.
• Il comportamento dell'esperienza differenziata tra i punti di interruzione.

Assicurati di implementare le anteprime utilizzando WearPreviewDevices e WearPreviewFontScales per tutte le schermate dell'app.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}
List.kt

Test con screenshot

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

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

I nostri esempi utilizzano Roborazzi per i test con screenshot:

1. Configura i file build.gradle progetto e app per utilizzare Roborazzi.
2. Crea un test con screenshot per ogni schermata dell'app. Ad esempio, il seguente codice mostra un test con 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
    }
}
ListTest.kt

Alcuni punti importanti da notare:

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

Generare immagini di riferimento

Per generare immagini per le schermate, esegui il seguente comando in un terminale:

./gradlew recordRoborazziDebug

Verificare le immagini

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

./gradlew verifyRoborazziDebug

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