Fokus di Compose

Saat pengguna berinteraksi dengan aplikasi Anda, mereka sering melakukannya dengan menyentuh elemen di layar. Namun, ini bukanlah satu-satunya bentuk interaksi. Bentuk interaksi lainnya dapat mencakup hal berikut:

  • Pengguna ChromeOS mungkin menggunakan tombol panah pada keyboard fisik untuk membuka layar.
  • Seseorang yang memainkan game dapat menggunakan pengontrol game yang terpasang untuk membuka menu game.
  • Pengguna aplikasi seluler mungkin melihat-lihat berbagai elemen menggunakan keyboard virtual.

Dalam hal ini, penting untuk melacak komponen mana yang aktif pada waktu tertentu, yang kami sebut sebagai fokus. Elemen pada layar harus difokuskan dalam urutan yang logis. Jetpack Compose memiliki cara default untuk menangani fokus yang benar dalam sebagian besar kasus. Namun, dalam beberapa kasus, Anda mungkin perlu mengubah perilaku default ini.

Halaman berikut menjelaskan cara menggunakan fokus di aplikasi Anda:

  • Mengubah urutan traversal fokus: Menjelaskan cara mengubah urutan fokus default, menambahkan grup fokus, dan menonaktifkan fokus composable.
  • Mengubah perilaku fokus: Menjelaskan cara meminta, mengambil, dan melepaskan fokus, serta cara mengalihkan fokus saat memasuki layar.
  • Bereaksi terhadap fokus: Menjelaskan cara bereaksi terhadap perubahan fokus, menambahkan isyarat visual ke elemen, dan memahami status fokus suatu elemen.

Urutan traversal fokus default

Sebelum mempelajari perilaku default penelusuran fokus, penting untuk memahami konsep level dalam hierarki: secara umum, dapat dikatakan bahwa dua Composables berada pada level yang sama jika bersaudara, yang berarti keduanya memiliki induk yang sama. Misalnya, elemen di dalam Column berada pada level yang sama. Naik level berarti beralih dari turunan ke induk Composable, atau, dengan mempertahankan contoh yang sama, kembali dari item ke Column yang berisi item tersebut. Menurunkan level adalah hal yang sebaliknya, dari induk Column ke item yang ditampung. Konsep ini dapat diterapkan ke setiap Composable yang dapat berisi Composables lainnya.

Navigasi UI dapat terjadi dengan beberapa cara, yang beberapa di antaranya sudah ketahui oleh sebagian besar pengguna:

  • TAB: navigasi satu dimensi, ke maju atau mundur. Navigasi TAB memajukan fokus ke elemen berikutnya atau sebelumnya dalam hierarki. Secara default, Compose mengikuti deklarasi Composables. Navigasi satu arah dapat dilakukan melalui tombol tab pada keyboard, atau Bingkai Putaran pada smartwatch, dan penelusuran fokus semacam ini akan mengunjungi setiap elemen di layar.
  • Tombol panah: navigasi dua dimensi, ke kiri, kanan, atas, atau bawah. Navigasi dua dimensi dapat dilakukan melalui D-Pad di TV atau tombol panah di keyboard, dan urutan traversalnya hanya mengunjungi elemen pada tingkat tertentu. Anda dapat menggunakan tombol tengah D-Pad dan tombol Kembali untuk turun dan kembali ke level yang berbeda.

Ambil seperti contoh screenshot di bawah ini, dengan empat tombol yang Anda miliki satu di bawah yang lain, dan Anda ingin melihat semuanya sesuai urutan tampilan. Jetpack Compose memberikan perilaku ini secara langsung: toolkit memungkinkan Anda menggilir setiap composable dalam urutan vertikal dari atas ke bawah menggunakan tombol tab, atau memindahkan fokus dengan menekan panah atas atau bawah.

Screenshot daftar tombol yang ditempatkan secara vertikal satu di bawah yang lain dalam faktor bentuk kecil.
Gambar 1. Daftar tombol yang ditampilkan dalam faktor bentuk kecil

Saat Anda beralih ke jenis tata letak lain, ada sedikit perubahan. Jika tata letak Anda memiliki lebih dari satu kolom, seperti tata letak di bawah, Jetpack Compose memungkinkan Anda menjelajahi kolom tersebut tanpa harus menambahkan kode apa pun. Jika Anda menekan tombol tab, Jetpack Compose akan otomatis menandai item dalam urutan deklarasi, dari Pertama hingga Keempat. Menggunakan tombol panah pada keyboard akan membuat pilihan mengikuti arah yang diinginkan dalam ruang 2D.

Column {
    Row {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Row {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Composables dideklarasikan dalam dua Rows, dan elemen fokus dideklarasikan secara berurutan, dari pertama hingga keempat. Saat Anda menekan tombol tab, tindakan ini akan menghasilkan urutan fokus berikut:

Screenshot daftar tombol yang ditempatkan dalam dua kolom secara berdampingan dalam faktor bentuk yang lebih besar.
Gambar 2. Daftar tombol yang ditempatkan dalam dua kolom secara berdampingan dalam faktor bentuk yang lebih besar

Dalam cuplikan di bawah, Anda mendeklarasikan item dalam Columns, bukan di Rows:

Row {
    Column {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Column {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Tata letak ini akan melintasi item secara vertikal, dari atas ke bawah, dari awal layar hingga akhir:

Screenshot daftar tombol yang ditempatkan dalam dua kolom secara berdampingan dalam faktor bentuk yang lebih besar.
Gambar 3. Daftar tombol yang ditempatkan dalam dua kolom secara berdampingan dalam faktor bentuk yang lebih besar

Dua contoh sebelumnya, meskipun memiliki navigasi satu arah, memberikan pengalaman yang sama terkait navigasi dua dimensi. Hal ini biasanya karena item di layar memiliki penempatan geografis yang sama pada kedua contoh. Menavigasi kanan dari Column pertama akan memindahkan fokus ke kedua, dan menavigasi ke bawah dari Row pertama akan memindahkan fokus ke fokus di bawahnya.

Berikutnya
Mengubah urutan traversal fokus