Elenchi con Scrivi per Wear OS

Gli elenchi consentono agli utenti di selezionare un elemento da un insieme di scelte sui dispositivi Wear OS.

Molti dispositivi Wear OS utilizzano schermi rotondi, il che rende più difficile vedere gli elementi di elenco che vengono visualizzati nella parte superiore e inferiore dello schermo. Per questo motivo, Compose for Wear OS include una versione della classe LazyColumn chiamata TransformingLazyColumn, che supporta le animazioni di scalabilità e morphing. Quando gli elementi si spostano verso i bordi, diventano più piccoli e sbiadiscono.

Per applicare gli effetti di ridimensionamento e scorrimento consigliati:

  1. Utilizza Modifier.transformedHeight per consentire a Compose di calcolare la variazione di altezza mentre l'elemento scorre sullo schermo.
  2. Utilizza transformation = SurfaceTransformation(transformationSpec) per applicare gli effetti visivi, inclusa la riduzione dei contenuti dell'elemento.
  3. Utilizza un TransformationSpec personalizzato per i componenti che non accettano transformation come parametro, ad esempio Text.

La seguente animazione mostra come un elemento di elenco viene scalato e cambia forma quando si avvicina alla parte superiore e inferiore dello schermo:

Lo snippet di codice seguente mostra come creare un elenco utilizzando il layout TransformingLazyColumn per creare contenuti che hanno un aspetto ottimale su schermi Wear OS di varie dimensioni.

Lo snippet mostra anche l'utilizzo del modificatore minimumVerticalContentPadding, che devi impostare sugli elementi della lista per applicare la spaziatura interna corretta nella parte superiore e inferiore della lista.

Per mostrare l'indicatore di scorrimento, condividi columnState tra ScreenScaffold e TransformingLazyColumn:

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,
                )
            }
        }
    }
}

Aggiungere un effetto di scatto e lancio

Lo snapping assicura che, quando un utente termina un gesto di scorrimento o scorrimento rapido, l'elenco si stabilizzi con un elemento posizionato esattamente in un punto specifico, in genere il centro dello schermo. Sugli schermi rotondi, dove gli elementi vengono scalati e trasformati man mano che si allontanano dal centro, lo snapping è particolarmente utile per garantire che l'elemento più pertinente rimanga completamente visibile e leggibile nell'area di visualizzazione ottimale.

Per aggiungere un comportamento di scorrimento rapido, imposta il parametro flingBehavior su TransformingLazyColumnDefaults.snapFlingBehavior(columnState). Imposta rotaryScrollableBehavior in modo che corrisponda, utilizzando RotaryScrollableDefaults.snapBehavior(columnState) per un'esperienza coerente quando utilizzi la corona o la ghiera fisica.

val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) {
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState),
        rotaryScrollableBehavior = RotaryScrollableDefaults.snapBehavior(columnState)
    ) {
        // ...
        // ...
    }
}

Layout inverso

Per impostazione predefinita, un elenco scorrevole è ancorato al bordo superiore. Se un utente ha scorri fino alla fine di un elenco standard e viene aggiunto un nuovo elemento alla fine, l'elenco mantiene la visualizzazione dell'utente sull'elemento corrente. Ad esempio, se l'utente sta visualizzando l'elemento 10 nella parte inferiore dello schermo e viene aggiunto l'elemento 11, la visualizzazione rimane focalizzata sull'elemento 10 e l'elemento 11 viene visualizzato fuori dallo schermo sotto la visualizzazione corrente.

Per casi d'uso come applicazioni di messaggistica o log live, questo comportamento di solito non è desiderato. Quando arrivano nuovi elementi, gli utenti in genere vogliono vedere subito gli ultimi contenuti se si trovano già in fondo all'elenco. Se arrivano molti elementi contemporaneamente, l'elenco deve saltare per visualizzare l'ultimo elemento in basso (il che significa che alcuni elementi intermedi potrebbero non essere visualizzati a meno che l'utente non scorra verso l'alto).

Per supportare questi casi d'uso, TransformingLazyColumn ti consente di invertire il layout impostando reverseLayout = true. In questo modo, l'ancoraggio dell'elenco viene spostato dal bordo superiore a quello inferiore.

Per comodità, l'impostazione reverseLayout = true inverte anche l'ordine visivo degli elementi e la direzione dei gesti di scorrimento:

  • Gli elementi sono composti dal basso verso l'alto, il che significa che l'indice 0 viene visualizzato nella parte inferiore dello schermo.
  • Se scorri verso l'alto, vengono visualizzati gli elementi con indici più elevati.

Per aggiungere un comportamento di scorrimento rapido insieme al layout inverso, puoi combinare flingBehavior e rotaryScrollableBehavior come mostrato nel seguente snippet:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(scrollState = columnState) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding,
        reverseLayout = true,
        modifier = Modifier.fillMaxWidth()
    ) {
        items(10) { index ->
            Button(
                label = {
                    Text(
                        text = "Item ${index + 1}"
                    )
                },
                onClick = {},
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            )
        }
        item {
            // With reverseLayout = true, the last item declared appears at the top.
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text("Header")
            }
        }
    }
}

Le seguenti immagini mostrano la differenza tra un elenco normale e un elenco invertito:

Un elemento TransformingLazyColumn con layout normale, che mostra l'elemento 1 in alto e gli elementi in ordine crescente.
Figura 1. Un layout di elenco standard in cui i contenuti vengono visualizzati dall'alto verso il basso.
Un elemento TransformingLazyColumn con layout inverso, che mostra l'elemento 1 in basso e gli elementi in ordine decrescente verso l'alto.
Figura 2. Un layout di elenco invertito in cui i contenuti vengono riempiti dal basso verso l'alto.