Sviluppa per schermi di dimensioni diverse

La tua app deve funzionare bene 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 per i layout adattivi, leggi le indicazioni per la progettazione.

Crea layout adattabili utilizzando Material 3

Il seguente snippet di codice utilizza un componente TransformingLazyColumn per creare contenuti dall'aspetto ottimale 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 corretto comportamento di scorrimento e il posizionamento TimeText.

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 spaziatura interna.

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

• La libreria Horologist fornisce helper per creare app ottimizzate e differenziate per Wear OS.
• Il sample 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 schermi di dimensioni diverse, utilizzando la libreria Horologist.

Utilizzare layout scorrevoli nell'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 del ridimensionamento dei caratteri.

Finestre di dialogo

Anche le finestre di dialogo devono essere scorrevoli, a meno che non ci sia un ottimo motivo 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 essere ancora adatte a layout non scorrevoli. Alcuni esempi includono la schermata principale del player in un'app multimediale e la schermata di allenamento in un'app per il fitness.

In questi casi, consulta le indicazioni canoniche fornite nei kit di progettazione Figma e implementa un design che si adatti 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 breakpoint delle dimensioni dello schermo, che mostrano 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à.

Testare le combinazioni di dimensioni dello schermo e del carattere utilizzando le anteprime

Le anteprime di composizione ti aiutano a sviluppare per una serie di dimensioni dello schermo di Wear OS. Utilizza le definizioni di anteprima sia dei dispositivi sia del ridimensionamento dei caratteri per visualizzare quanto segue:

• Come appaiono gli schermi nelle dimensioni estreme, ad esempio il carattere più grande abbinato allo schermo più piccolo.
• Come si comporta l'esperienza differenziata nei vari punti di interruzione.

Assicurati di implementare le anteprime utilizzando WearPreviewDevices e WearPreviewFontScales per tutte le schermate della tua app. Per informazioni complete sulla configurazione delle anteprime di Wear OS, delle specifiche hardware personalizzate e dell'anteprima delle liste scorrevoli, consulta Visualizzare l'anteprima della UI in Compose per Wear OS.

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

Test degli screenshot

Oltre al test di anteprima, il test con screenshot ti consente di eseguire test su una gamma di dimensioni hardware esistenti. Ciò è particolarmente utile quando questi dispositivi potrebbero non essere immediatamente disponibili e il problema potrebbe non presentarsi su altre dimensioni dello schermo.

Il test degli screenshot ti aiuta anche a identificare le regressioni in posizioni specifiche del tuo codebase.

I nostri esempi utilizzano Roborazzi per il test degli screenshot:

1. Configura i file progetto e 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
    }
}
ListTest.kt

Alcuni aspetti importanti da tenere a mente:

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

Generare immagini dorate

Per generare immagini per le tue schermate, esegui questo comando in un terminale:

./gradlew recordRoborazziDebug

Verificare 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.