Sviluppa per schermi di dimensioni diverse

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

L'app deve 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 per i layout adattivi, consulta 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 appaiono perfettamente su una serie 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 si coordinano tra l'app e le singole schermate (percorsi di navigazione) per garantire il corretto comportamento di scorrimento e TimeText il posizionamento.

Per i margini superiore e inferiore, tieni presente 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.

Puoi trovare le specifiche complete nei kit di design di Figma. Per ulteriori dettagli ed esempi, consulta:

• La libreria Horologist fornisce helper 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 che funzioni con dimensioni dello schermo diverse, utilizzando la libreria Horologist.

Utilizzare i layout con scorrimento nell'app

Utilizza un layout scorrevole, 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.

Finestre di dialogo

Le finestre di dialogo devono essere anche scorrevoli, a meno che non ci sia un motivo molto valido per non farlo. Il componente AlertDialog è adattabile e può essere scorrere 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 del player principale in un'app multimediale e la schermata dell'allenamento in un'app per il fitness.

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

Offrire esperienze differenziate tramite i breakpoint

Con i display più grandi, puoi introdurre contenuti e funzionalità aggiuntivi. Per implementare questo tipo di esperienza differenziata, utilizza i breakpoint 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 di queste opportunità.

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

Le anteprime di composizione ti aiutano a sviluppare app per schermi di Wear OS di varie dimensioni. Utilizza sia le definizioni di anteprima dei dispositivi sia quelle di ridimensionamento dei caratteri per visualizzare quanto segue:

• L'aspetto delle schermate agli estremi delle dimensioni, ad esempio il carattere più grande associato allo schermo più piccolo.
• Il comportamento dell'esperienza differenziata nei diversi breakpoint.

Assicurati di implementare le anteprime utilizzando WearPreviewDevices e WearPreviewFontScales per tutte le schermate della tua app.

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

Test degli screenshot

Oltre ai test di anteprima, i test degli screenshot ti consentono di eseguire test su una serie di dimensioni hardware esistenti. Questa operazione è particolarmente utile se i dispositivi in questione non sono immediatamente disponibili e il problema potrebbe non verificarsi su altre dimensioni dello schermo.

I test degli screenshot ti aiutano anche a identificare le regressioni in posizioni specifiche della base di codice.

I nostri esempi utilizzano Roborazzi per i test degli screenshot:

1. Configura i file build.gradle del progetto e dell'app per utilizzare Roborazzi.
2. Crea un test di screenshot per ogni schermata della tua app. Ad esempio, nel sample ComposeStarter è implementato un test per GreetingScreen, 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
    }
}

Ecco alcuni punti importanti da tenere a mente:

• WearDevice.entries contiene le definizioni dei 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 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 degli screenshot, consulta l'esempio ComposeStarter.