Listen mit Compose für Wear OS

Mithilfe von Listen können Nutzer auf Wear OS-Geräten Elemente aus einer Reihe von Optionen auswählen.

Viele Wear OS-Geräte haben runde Bildschirme. Dadurch werden Listenelemente, die am oberen und unteren Bildschirmrand angezeigt werden, erschwert. Aus diesem Grund enthält Composer für Wear OS eine Version der LazyColumn-Klasse ScalingLazyColumn, die Skalierungs- und Ausblendungseffekte unterstützt. Wenn sich Elemente in die Bildschirmmitte bewegen, werden sie größer und opaker.

Die folgende Animation zeigt, wie sich Größe und Transparenz eines Elements ändern, während es sich auf dem Bildschirm bewegt:

Das folgende Code-Snippet zeigt, wie Sie eine Liste erstellen, die Text für jedes Element enthält:

val contentModifier = Modifier
    .fillMaxWidth()
    .padding(bottom = 8.dp)

@Composable
fun WearApp() {
    WearAppTheme {
        // Hoist the list state to remember scroll position across compositions.
        val listState = rememberScalingLazyListState()

        ScalingLazyColumn(
            modifier = Modifier.fillMaxSize(),
            autoCentering = AutoCenteringParams(itemIndex = 0),
            state = listState
        ) {
            item { TextItem(contentModifier, stringResource(R.string.first)) }
            item { TextItem(contentModifier, stringResource(R.string.second)) }
        }
    }
}

@Composable
fun TextItem(modifier: Modifier = Modifier, contents: String) {
    Text(
        modifier = modifier,
        textAlign = TextAlign.Center,
        text = contents
    )
}

Schnappschuss hinzufügen

Sie können Fingergesten, die der Nutzer auf ScalingLazyColumn-Objekte anwendet, auch beim Andocken hinzufügen. Dieser Effekt ermöglicht Nutzern, präzise durch die Elemente in einer Liste zu navigieren, und sorgt gleichzeitig dafür, dass sie sich schneller durch eine lange Liste bewegen können.

Wenn Sie diesen Effekt einer Liste oder Auswahl in Ihrer App hinzufügen möchten, fügen Sie den Parameter flingBehavior in Ihre ScalingLazyColumn-Definition ein, wie im folgenden Code-Snippet gezeigt:

ScalingLazyColumn(
    modifier = modifier ...,
    flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(
        state = listState,
        snapOffset = 0
        // Exponential decay by default. You can also explicitly define a
        // DecayAnimationSpec.
    ) {
        // Contents of the list here.
}

Wenn Sie ein ähnliches Verhalten beim Andocken und Fließen auf ein ScalingLazyColumn-Objekt anwenden möchten, wenn der Nutzer mit einem Drehknopf interagiert, verwenden Sie RotaryWithSnap, das in Horologist auf GitHub verfügbar ist.