Przyciski ikon

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Ikony przycisków wskazują działania, które mogą wykonać użytkownicy. Ikony przycisków muszą mieć wyraźne znaczenie i zazwyczaj przedstawiają częste lub często wykonywane czynności.

Istnieją 2 rodzaje przycisków z ikonami:

• Domyślne: te przyciski mogą otwierać inne elementy, takie jak menu czy wyszukiwarka.
• Przełącznik: te przyciski mogą reprezentować działania binarne, które można włączyć lub wyłączyć, takie jak „ulubione” lub „zakładka”.

Interfejs API

Aby zaimplementować standardowe przyciski z ikonami, użyj komponentu IconButton. Aby tworzyć różne style wizualne, takie jak wypełnione, wypełnione tonalnie lub obrysowane, użyj odpowiednio wartości FilledIconButton, FilledTonalIconButton i OutlinedIconButton.

Najważniejsze parametry IconButton to:

• onClick: funkcja lambda, która jest wykonywana, gdy użytkownik kliknie ikonę.
• enabled: wartość logiczna określająca stan włączenia przycisku. Gdy false, przycisk nie reaguje na dane wejściowe użytkownika.
• content: składana zawartość w przycisku, zwykle Icon.

Przykład podstawowy: przycisk przełączania ikon

Ten przykład pokazuje, jak zaimplementować przycisk przełącznika. Ikona przełącznika zmienia wygląd w zależności od tego, czy jest zaznaczona, czy nie.

@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

Najważniejsze informacje o kodzie

• Element kompozycyjny ToggleIconButtonExample definiuje przełącznik IconButton.
  • mutableStateOf(false) tworzy obiekt MutableState, który przechowuje wartość logiczną, początkowo false. Dzięki temu isToggled będzie przechowywać stan, co oznacza, że Compose będzie zmieniać interfejs za każdym razem, gdy zmieni się wartość tego atrybutu.
  • rememberSaveable zapewnia, że stan isToggled jest zachowany w przypadku zmian konfiguracji, takich jak obrót ekranu.
• Lambda onClick funkcji IconButton określa zachowanie przycisku po kliknięciu, przełączając stan między true a false.
• Parametr painter komponentu Icon wczytuje warunkowo inny element painterResource w zależności od stanu isToggled. Spowoduje to zmianę wyglądu ikony.
  • Jeśli isToggled to true, wczytuje wypełnione serce.
  • Jeśli isToggled = false, wczytuje zarysowane serce.
• contentDescription Icon również się aktualizuje na podstawie stanu isToggled, aby wyświetlać odpowiednie informacje o dostępności.

Wynik

Na poniższym obrazku widać ikonę przełącznika z poprzedniego fragmentu kodu w stanie niewybranym:

Przykład zaawansowany: powtarzające się działania po naciśnięciu

W tej sekcji pokazujemy, jak tworzyć przyciski z ikonami, które będą stale wywoływać działanie, gdy użytkownik naciśnie i przytrzyma przycisk, a nie tylko raz na kliknięcie.

@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

Najważniejsze informacje o kodzie

• Funkcja MomentaryIconButton przyjmuje parametr unselectedImage: Int, czyli identyfikator zasobu rysowanego dla ikony, gdy przycisk nie jest wciśnięty, oraz parametr selectedImage: Int, czyli identyfikator zasobu rysowanego dla ikony, gdy przycisk jest wciśnięty.
• Używa ona interactionSource do śledzenia interakcji użytkownika z przyciskiem.
• isPressed ma wartość true, gdy przycisk jest aktywnie wciśnięty, a w przeciwnym razie ma wartość false. Gdy isPressed ma wartość true, instrukcja LaunchedEffect przechodzi w pętlę.
  • Wewnątrz tego pętli używa ona instrukcji delay (z wartością stepDelay), aby tworzyć przerwy między działaniami wywołującymi. coerceIn zapewnia, że opóźnienie wynosi co najmniej 1 ms, co zapobiega nieskończonym pętlom.
  • Funkcja pressedListener jest wywoływana po każdym opóźnieniu w pętli. Powtarza to działanie.
• pressedListener używa rememberUpdatedState, aby zapewnić, że funkcja onClicklambda (działanie do wykonania) jest zawsze najbardziej aktualna z ostatniej kompozycji.
• Przycisk Icon zmienia wyświetlany obraz w zależności od tego, czy jest w danym momencie wciśnięty.
  • Jeśli isPressed ma wartość true, wyświetla się selectedImage.
  • W przeciwnym razie wyświetla się unselectedImage.

Następnie użyj słowa MomentaryIconButton w przykładzie. Ten fragment kodu demonstruje 2 przyciski z ikonami, które sterują licznikiem:

@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

Najważniejsze informacje o kodzie

• Komponent MomentaryIconButtonExample wyświetla komponent Row zawierający 2 instancje komponentu MomentaryIconButton oraz komponent Text, aby utworzyć interfejs do zwiększania i zmniejszania wartości licznika.
• Zawiera zmienną stanu pressedCount, która może być zmieniana za pomocą zmiennych remember i mutableIntStateOf, zainicjowanych na 0. Gdy wartość pressedCount ulegnie zmianie, wszystkie komponenty, które ją obserwują (np. komponent Text), zostaną ponownie skompilowane, aby odzwierciedlić nową wartość.
• Po kliknięciu lub przytrzymaniu pierwszego przycisku MomentaryIconButton wartość pressedCount maleje.
• Drugi przycisk MomentaryIconButton zwiększa wartość pressedCount po kliknięciu lub przytrzymaniu.
• Oba przyciski używają stepDelay 100 ms, co oznacza, że działanie onClick powtarza się co 100 ms, gdy przycisk jest przytrzymany.

Wynik

Film poniżej pokazuje interfejs z przyciskami z ikonami i licznikiem:

Dodatkowe materiały

• Material 3 – przyciski z ikonami