Android Academy · Lekcja

Opcje i działania klawiatury

Typy klawiatury, działania IME i fokus

Lekcja 4 z 413 kroki

Opcje i działania klawiatury to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Android Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Android Academy zawiera 4 lekcji w sumie.

Właściwa klawiatura do danego zadania

Dopracowany formularz wyświetla odpowiednią klawiaturę ekranową: cyfry dla numeru telefonu, klawisz @ dla adresu e-mail oraz przycisk „Dalej” umożliwiający przechodzenie między polami. Compose steruje tym wszystkim za pomocą KeyboardOptions i KeyboardActions.

W tej lekcji ustawią Państwo typy klawiatury i akcje IME oraz będą zarządzać fokusem między polami.

Wybieranie typu klawiatury

Należy przekazać KeyboardOptions do pola tekstowego i ustawić keyboardType. System wyświetli wtedy klawiaturę dopasowaną do rodzaju danych.

Typowe wartości to: Text, Number, Email, Phone, Password.

var email by remember { mutableStateOf("") }

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Email
    )
)

Klawiatura numeryczna

W przypadku ilości lub kodu PIN należy użyć KeyboardType.Number. Warto połączyć go z filtrowaniem danych wejściowych, aby akceptowane były wyłącznie cyfry, zgodnie z tym, czego nauczyli się Państwo w lekcji o walidacji.

var pin by remember { mutableStateOf("") }

OutlinedTextField(
    value = pin,
    onValueChange = { pin = it.filter { c -> c.isDigit() } },
    label = { Text("PIN") },
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Number
    )
)

Ukrywanie hasła

Hasła powinny być maskowane. Należy użyć visualTransformation = PasswordVisualTransformation() razem z typem klawiatury przeznaczonym do haseł.

Stan nadal przechowuje prawdziwe znaki, ale na ekranie są one maskowane.

var password by remember { mutableStateOf("") }

OutlinedTextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Password") },
    visualTransformation = PasswordVisualTransformation(),
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Password
    )
)

Przycisk akcji IME

Klawisz w prawym dolnym rogu klawiatury to akcja IME. Ustawia się ją za pomocą imeAction. Należy użyć Next, aby przejść do następnego pola, oraz Done w ostatnim polu.

OutlinedTextField(
    value = name,
    onValueChange = { name = it },
    label = { Text("Name") },
    keyboardOptions = KeyboardOptions(
        imeAction = ImeAction.Next
    )
)

Reagowanie na akcje IME

Aby zareagować na dotknięcie tego przycisku przez użytkownika, należy przekazać KeyboardActions. Każda akcja (onNext, onDone, onSearch) jest lambdą, którą należy zaimplementować.

W tym przykładzie naciśnięcie przycisku Done ukrywa klawiaturę.

val keyboard = LocalSoftwareKeyboardController.current

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
    keyboardActions = KeyboardActions(
        onDone = { keyboard?.hide() }
    )
)

Przenoszenie fokusu do następnego pola

W formularzu z wieloma polami przycisk Dalej powinien przenosić fokus do kolejnego pola. Należy użyć LocalFocusManager i wywołać moveFocus.

val focusManager = LocalFocusManager.current

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
    keyboardActions = KeyboardActions(
        onNext = { focusManager.moveFocus(FocusDirection.Down) }
    )
)

Usuwanie fokusu po naciśnięciu Done

W ostatnim polu usunięcie fokusu zamyka klawiaturę i usuwa zaznaczenie pola. Należy wywołać focusManager.clearFocus() wewnątrz onDone.

OutlinedTextField(
    value = password,
    onValueChange = { password = it },
    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
    keyboardActions = KeyboardActions(
        onDone = { focusManager.clearFocus() }
    )
)

Programowe ustawianie fokusu

Czasami pole powinno otrzymać fokus natychmiast po pojawieniu się ekranu, na przykład pole wyszukiwania. Należy dołączyć FocusRequester i zażądać fokusu w LaunchedEffect.

val focusRequester = remember { FocusRequester() }

LaunchedEffect(Unit) { focusRequester.requestFocus() }

OutlinedTextField(
    value = query,
    onValueChange = { query = it },
    modifier = Modifier.focusRequester(focusRequester),
    label = { Text("Search") }
)

Wielkie litery i autokorekta

KeyboardOptions steruje również właściwościami capitalization i autoCorrectEnabled. Dla imienia można włączać wielką literę na początku każdego słowa, a dla nazwy użytkownika wyłączyć autokorektę, aby nie zmieniała wpisanego tekstu.

OutlinedTextField(
    value = fullName,
    onValueChange = { fullName = it },
    label = { Text("Full name") },
    keyboardOptions = KeyboardOptions(
        capitalization = KeyboardCapitalization.Words,
        autoCorrectEnabled = false
    )
)

Czysty Kotlin: wybieranie akcji IME

Logika „Next dla każdego pola poza ostatnim, a Done dla ostatniego” to zwykły Kotlin. Tutaj mapujemy pozycje pól na etykiety akcji, które powinny być wyświetlane.

fun imeActionFor(index: Int, lastIndex: Int): String =
    if (index == lastIndex) "Done" else "Next"

fun main() {
    val fields = listOf("name", "email", "password")
    fields.forEachIndexed { i, field ->
        println("$field -> ${imeActionFor(i, fields.lastIndex)}")
    }
}

Szybkie sprawdzenie

Chcą Państwo, aby przycisk w prawym dolnym rogu klawiatury miał etykietę „Next” i po dotknięciu przenosił fokus do pola poniżej. Jakich dwóch elementów potrzebują Państwo użyć?

Podsumowanie

Potrafią już Państwo tworzyć formularze dostosowane do klawiatury:

  • KeyboardOptions ustawia keyboardType, imeAction, wielkość liter i autokorektę.
  • Hasła można maskować za pomocą PasswordVisualTransformation.
  • KeyboardActions reaguje na akcje Next/Done/Search.
  • LocalFocusManager przenosi lub usuwa fokus, a FocusRequester ustawia fokus pola na żądanie.

To kończy zestaw narzędzi do tworzenia formularzy: dane wejściowe, stan, walidacja i klawiatura. Są już Państwo gotowi do tworzenia dopracowanych i przyjaznych formularzy Compose.

Bezpłatny start

Ucz się Kotlin dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy
36
Lekcje
152

Często zadawane pytania

Czy lekcja „Opcje i działania klawiatury” jest bezpłatna?

Tak — pełny tekst „Opcje i działania klawiatury” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Android Academy, przejdź na CoddyKit PRO. Kurs Android Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Opcje i działania klawiatury”?

Typy klawiatury, działania IME i fokus Ćwiczysz Android Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Android Academy?

Nie wymagamy żadnego doświadczenia. Android Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Opcje i działania klawiatury”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Android Academy?

Tak. Każda lekcja Android Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. TextField i dane wprowadzane przez użytkownika
  2. Zarządzanie stanem formularza
  3. Walidacja danych wejściowych
  4. Opcje i działania klawiatury
← Powrót do Android Academy