Symbolschaltflächen

Symbolschaltflächen zeigen Aktionen an, die Nutzer ausführen können. Symbolschaltflächen müssen ein Symbol mit einer eindeutigen Bedeutung verwenden und stehen in der Regel für gängige oder häufig verwendete Aktionen.

Es gibt zwei Arten von Symbolschaltflächen:

• Standard: Mit diesen Schaltflächen können andere Elemente geöffnet werden, z. B. ein Menü oder eine Suche.
• Ein/Aus-Schaltflächen: Diese Schaltflächen können binäre Aktionen darstellen, die aktiviert oder deaktiviert werden können, z. B. „Favoriten“ oder „Lesezeichen“.

API-Oberfläche

Verwenden Sie das IconButton-Element, um Standardsymbolschaltflächen zu implementieren. Verwenden Sie FilledIconButton, FilledTonalIconButton und OutlinedIconButton, um verschiedene visuelle Stile wie ausgefüllt, ausgefüllt mit Ton oder umrandet zu erstellen.

Zu den wichtigsten Parametern für IconButton gehören:

• onClick: Eine Lambda-Funktion, die ausgeführt wird, wenn der Nutzer auf die Symbolschaltfläche tippt.
• enabled: Ein boolescher Wert, der den Aktivierungsstatus der Schaltfläche steuert. Bei false reagiert die Schaltfläche nicht auf Nutzereingaben.
• content: Die zusammensetzbaren Inhalte in der Schaltfläche, in der Regel ein Icon.

Einfaches Beispiel: Ein/Aus-Schaltfläche

In diesem Beispiel wird gezeigt, wie Sie eine Schaltfläche mit einem Ein-/Aus-Symbol implementieren. Die Darstellung einer Ein-/Aus-Schaltfläche ändert sich je nachdem, ob sie ausgewählt ist oder nicht.

@Preview
@Composable
fun ToggleIconButtonExample() {
    // isToggled initial value should be read from a view model or persistent storage.
    var isToggled by rememberSaveable { mutableStateOf(false) }

    IconButton(
        onClick = { isToggled = !isToggled }
    ) {
        Icon(
            painter = if (isToggled) painterResource(R.drawable.favorite_filled) else painterResource(R.drawable.favorite),
            contentDescription = if (isToggled) "Selected icon button" else "Unselected icon button."
        )
    }
}
IconButton.kt

Wichtige Punkte zum Code

• Mit dem ToggleIconButtonExample-Element wird ein umschaltbarer IconButton definiert.
  • mutableStateOf(false) erstellt ein MutableState-Objekt mit einem booleschen Wert, anfangs false. Dadurch wird isToggled zu einem Statushalter. Das bedeutet, dass Compose die Benutzeroberfläche immer dann neu zusammensetzt, wenn sich der Wert ändert.
  • rememberSaveable sorgt dafür, dass der isToggled-Status bei Konfigurationsänderungen wie der Bildschirmdrehung erhalten bleibt.
• Das onClick-Lambda des IconButton definiert das Verhalten der Schaltfläche beim Klicken, wobei der Status zwischen true und false wechselt.
• Der Parameter painter des Icon-Elements lädt abhängig vom Status isToggled bedingt eine andere painterResource. Dadurch ändert sich die visuelle Darstellung des Symbols.
  • Wenn isToggled true ist, wird das gefüllte Herz geladen.
  • Wenn isToggled false ist, wird das gezeichnete Herz mit Umriss geladen.
• Die contentDescription des Icon wird ebenfalls basierend auf dem isToggled-Status aktualisiert, um entsprechende Informationen zur Barrierefreiheit bereitzustellen.

Ergebnis

Das folgende Bild zeigt die Schaltfläche mit dem Schaltersymbol aus dem vorherigen Snippet im nicht ausgewählten Zustand:

Fortgeschrittenes Beispiel: Wiederholte Aktionen beim Drücken

In diesem Abschnitt wird gezeigt, wie Sie Symbolschaltflächen erstellen, die eine Aktion kontinuierlich auslösen, während der Nutzer sie gedrückt hält, anstatt sie nur einmal pro Klick auszulösen.

@Composable
fun MomentaryIconButton(
    unselectedImage: Int,
    selectedImage: Int,
    contentDescription: String,
    modifier: Modifier = Modifier,
    stepDelay: Long = 100L, // Minimum value is 1L milliseconds.
    onClick: () -> Unit
) {
    val interactionSource = remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()
    val pressedListener by rememberUpdatedState(onClick)

    LaunchedEffect(isPressed) {
        while (isPressed) {
            delay(stepDelay.coerceIn(1L, Long.MAX_VALUE))
            pressedListener()
        }
    }

    IconButton(
        modifier = modifier,
        onClick = onClick,
        interactionSource = interactionSource
    ) {
        Icon(
            painter = if (isPressed) painterResource(id = selectedImage) else painterResource(id = unselectedImage),
            contentDescription = contentDescription,
        )
    }
}
IconButton.kt

Wichtige Punkte zum Code

• Für MomentaryIconButton wird eine unselectedImage: Int, die drawable-Ressourcen-ID für das Symbol, wenn die Schaltfläche nicht gedrückt wird, und selectedImage: Int, die drawable-Ressourcen-ID für das Symbol, wenn die Schaltfläche gedrückt wird, verwendet.
• Dabei wird ein interactionSource verwendet, um Interaktionen vom Typ „Drücken“ des Nutzers zu erfassen.
• isPressed ist „wahr“, wenn die Taste gedrückt wird, und andernfalls „falsch“. Wenn isPressed = true ist, begibt sich die LaunchedEffect in eine Schleife.
  • Innerhalb dieser Schleife wird eine delay (mit stepDelay) verwendet, um Pausen zwischen den ausgelösten Aktionen zu schaffen. coerceIn sorgt dafür, dass die Verzögerung mindestens 1 ms beträgt, um Endlosschleifen zu vermeiden.
  • pressedListener wird nach jeder Verzögerung innerhalb der Schleife aufgerufen. Dadurch wird die Aktion wiederholt.
• Der pressedListener verwendet rememberUpdatedState, um sicherzustellen, dass das onClick-Lambda (die auszuführende Aktion) immer das aktuellste aus der neuesten Zusammensetzung ist.
• Das angezeigte Bild des Icon ändert sich je nachdem, ob die Schaltfläche gerade gedrückt wird oder nicht.
  • Wenn isPressed wahr ist, wird selectedImage angezeigt.
  • Andernfalls wird die unselectedImage angezeigt.

Verwenden Sie MomentaryIconButton als Nächstes in einem Beispiel. Im folgenden Snippet werden zwei Symbolschaltflächen verwendet, um einen Zähler zu steuern:

@Preview()
@Composable
fun MomentaryIconButtonExample() {
    var pressedCount by remember { mutableIntStateOf(0) }

    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        MomentaryIconButton(
            unselectedImage = R.drawable.fast_rewind,
            selectedImage = R.drawable.fast_rewind_filled,
            stepDelay = 100L,
            onClick = { pressedCount -= 1 },
            contentDescription = "Decrease count button"
        )
        Spacer(modifier = Modifier)
        Text("advanced by $pressedCount frames")
        Spacer(modifier = Modifier)
        MomentaryIconButton(
            unselectedImage = R.drawable.fast_forward,
            selectedImage = R.drawable.fast_forward_filled,
            contentDescription = "Increase count button",
            stepDelay = 100L,
            onClick = { pressedCount += 1 }
        )
    }
}
IconButton.kt

Wichtige Punkte zum Code

• Das MomentaryIconButtonExample-Kompositelement zeigt ein Row mit zwei MomentaryIconButton-Instanzen und einem Text-Kompositelement an, um eine Benutzeroberfläche zum Erhöhen und Verringern eines Zählers zu erstellen.
• Es wird eine mutable Statusvariable pressedCount mit remember und mutableIntStateOf verwaltet, die auf 0 initialisiert ist. Wenn sich pressedCount ändert, werden alle zugehörigen Composeables (z. B. das Text-Composeable) neu zusammengesetzt, um den neuen Wert widerzuspiegeln.
• Wenn Sie auf das erste MomentaryIconButton klicken oder es gedrückt halten, wird pressedCount verringert.
• Wenn Sie auf das zweite MomentaryIconButton klicken oder es gedrückt halten, erhöht sich pressedCount.
• Für beide Schaltflächen wird eine stepDelay von 100 Millisekunden verwendet. Das bedeutet, dass die onClick-Aktion alle 100 Millisekunden wiederholt wird, solange eine Schaltfläche gedrückt wird.

Ergebnis

Das folgende Video zeigt die Benutzeroberfläche mit den Symbolschaltflächen und dem Zähler:

Zusätzliche Ressourcen

• Material 3 – Symbolschaltflächen