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 tomboltab
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.
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") } } }
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:
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") } } }
Tata letak ini akan melintasi item secara vertikal, dari atas ke bawah, dari awal layar hingga akhir:
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.
Direkomendasikan untuk Anda
- Catatan: teks link ditampilkan saat JavaScript nonaktif
- Mengubah perilaku fokus
- ConstraintLayout di Compose
- Tata letak flow di Compose