Sviluppa per schermi di dimensioni diverse

L'app dovrebbe funzionare bene su dispositivi Wear OS di tutte le dimensioni, sfruttando i vantaggi se disponibile e di avere un aspetto ottimale anche sugli schermi più piccoli. Questa guida fornisce consigli per realizzare questa esperienza utente.

Per saperne di più sui principi di progettazione dei layout adattivi, leggi le guida alla progettazione.

Crea layout reattivi con Horologist

I layout devono avere margini basati sulla percentuale. Poiché Compose funziona per impostazione predefinita in valori assoluti, utilizza i componenti Horologist, che contiene le seguenti funzionalità:

• I margini orizzontali sono impostati correttamente in base a una percentuale dello schermo del dispositivo dimensioni.
• La spaziatura superiore e inferiore è impostata correttamente. Ciò presenta particolari sfide poiché la spaziatura consigliata in alto e in basso può dipendere dai componenti in uso. Ad esempio, Chip deve avere una spaziatura diversa per un Text quando utilizzato in un elenco.
• TimeText margini sono impostati correttamente.

Lo snippet di codice riportato di seguito utilizza la versione di Horologist del Layout di ScalingLazyColumn per creare contenuti perfetti per un'ampia gamma di contenuti delle dimensioni dello schermo di Wear OS:

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

Questo esempio mostra anche ScreenScaffold e AppScaffold. Si coordina tra l'app e le singole schermate (percorsi di navigazione) per garantire il corretto comportamento di scorrimento e Posizionamento TimeText.

Per la spaziatura interna superiore e inferiore, tieni presente anche quanto segue:

• Specifica il primo e l'ultimo ItemType, per determinare il corretto spaziatura interna.
• L'utilizzo di ResponsiveListHeader per il primo elemento dell'elenco, perché Le intestazioni Text non devono avere spaziatura interna.

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

• La raccolta Horologo: fornisce componenti per aiutarti a costruire ottimizzate e differenziate per Wear OS.
• L'esempio di ComposeStarter è un esempio che mostra il principi descritti in questa guida.
• L'esempio di JetCaster è un esempio più complesso di creazione di una per lavorare su schermi di diverse dimensioni, utilizzando la libreria Horologist.

Utilizzare i layout a scorrimento nell'app

Usa un layout a scorrimento, come mostrato in precedenza in questa pagina, come scelta predefinita quando implementi i tuoi schermi. Questo consente agli utenti di 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 la scalabilità dei caratteri.

Finestre di dialogo

Le finestre di dialogo dovrebbero essere scorrevoli, a meno che non ci sia un'ottima ragione per non farlo. Il componente ResponsiveDialog, fornito da Horologist, aggiunge il parametro seguenti:

• Scorrimento per impostazione predefinita.
• Correggi i margini basati su percentuale.
• Pulsanti che si adattano alla propria larghezza dove lo spazio lo consente, per offrire una maggiore target dei tocchi.

Finestre di dialogo adattabili, che offrono scorrimento per impostazione predefinita e pulsanti che si adattano allo spazio disponibile.

Le schermate personalizzate potrebbero richiedere layout senza scorrimento

Alcuni schermi potrebbero comunque essere adatti a layout non scorrevoli. Diversi esempi includi la schermata principale del player in un'app multimediale e la schermata dell'allenamento in un app per l'attività fisica.

In questi casi, consulta le indicazioni canoniche fornite nella Kit di design Figma e implementano un design che si adatti alle dimensioni dello schermo, usando i margini corretti.

Offri esperienze differenziate tramite punti di interruzione

Con i display più grandi, puoi introdurre funzionalità e contenuti aggiuntivi. A implementare questo tipo di esperienza differenziata, utilizzare punti di interruzione relativi alle dimensioni dello schermo, che mostra un layout diverso quando le dimensioni dello schermo superano 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 linee guida sulla progettazione illustrano meglio queste opportunità.

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

Le anteprime di Scrivi ti aiutano a sviluppare schermi di Wear OS di diverse dimensioni. Utilizza le definizioni di anteprima per i dispositivi e per la scalabilità del carattere per vedere quanto segue:

• L'aspetto degli schermi agli estremi delle dimensioni, ad esempio il carattere più grande accoppiato con uno schermo più piccolo.
• Il comportamento dell'esperienza differenziata sui punti di interruzione.

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

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ListScreenPreview() {
    ListScreen()
}

Test degli screenshot

Oltre al test delle anteprime, il test degli screenshot ti consente di eseguire test su una serie dimensioni hardware esistenti. Ciò è particolarmente utile quando questi dispositivi potrebbero non sarà immediatamente disponibile e il problema potrebbe non presentarsi di per sé schermi di altre dimensioni.

Il test degli screenshot è utile anche per identificare le regressioni in località specifiche in il tuo codebase.

Nei nostri esempi viene utilizzato Roborazzi per il test degli screenshot:

1. Configura i file del progetto e dell'app build.gradle da utilizzare Roborazzi.
2. Crea un test degli screenshot per ogni schermata della tua app. Ad esempio: nell'esempio di ComposeStarter, viene eseguito un test per GreetingScreen implementato come mostrato in GreetingScreenTest:

@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun greetingScreenTest() = runTest {
        AppScaffold(
            timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
        ) {
            GreetingScreen(greetingName = "screenshot", onShowList = {})
        }
    }

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

Alcuni punti importanti da ricordare:

• FixedTimeSource ti consente di generare screenshot in cui TimeText non variare e causare inavvertitamente errori dei test.
• WearDevice.entries contiene le definizioni dei dispositivi Wear OS più popolari, quindi i test devono essere eseguiti su schermi di dimensioni rappresentative.

Genera immagini dorate

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

./gradlew recordRoborazziDebug

Verifica 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, vedi l'esempio di ComposeStarter.