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 la guida alla 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 contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                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 elementi 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 la spaziatura corretta.
• 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 ulteriori 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.
• Il sample JetCaster, un esempio più complesso di creazione di un'app per funzionare con diverse dimensioni dello schermo, 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 del viewport.

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 reattivo 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 più in dettaglio queste 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 dei dispositivi e 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 dell'app.

@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 project e app build.gradle per utilizzare Roborazzi.
2. Crea un test degli screenshot per ogni schermata dell'app. Ad esempio, nell'esempio ComposeStarter, 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 {
            GreetingScreen(greetingName = "screenshot", onShowList = {})
        }
    }

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

Alcuni punti 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 il comando seguente in un terminale:

./gradlew recordRoborazziDebug

Verificare le immagini

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

./gradlew verifyRoborazziDebug

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