Fokus di Compose

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

  • Pengguna ChromeOS dapat menggunakan tombol panah di keyboard fisik mereka untuk menavigasi layar.
  • Seseorang yang bermain game dapat menggunakan pengontrol game terlampir untuk menavigasi menu game.
  • Pengguna aplikasi seluler dapat beralih antar-elemen menggunakan keyboard virtual.

Dalam kasus ini, penting untuk melacak komponen mana yang aktif pada waktu tertentu, yang kami sebut fokus. Elemen di layar harus difokuskan dalam urutan 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 petunjuk visual ke elemen, dan memahami status fokus elemen.

Urutan traversal fokus default

Sebelum mempelajari perilaku default penelusuran fokus, penting untuk memahami konsep tingkat dalam hierarki: secara umum, kita dapat mengatakan bahwa dua Composables berada pada tingkat yang sama jika keduanya adalah saudara kandung, yang berarti keduanya memiliki induk yang sama. Misalnya, elemen di dalam Column berada pada tingkat yang sama. Naik satu tingkat berarti berpindah dari turunan ke induk Composable, atau, dengan contoh yang sama, kembali dari item ke Column yang berisi item tersebut. Turun satu tingkat adalah kebalikannya, dari induk Column ke item yang ada di dalamnya. Konsep ini dapat diterapkan ke setiap Composable yang dapat berisi Composables.

Navigasi UI dapat dilakukan dengan beberapa cara, yang sebagian besar sudah diketahui pengguna:

  • TAB: navigasi satu dimensi, maju atau mundur. Navigasi TAB memajukan fokus ke elemen berikutnya atau sebelumnya dalam hierarki. Secara default, Compose mengikuti deklarasi Composables. Navigasi satu arah dapat dicapai melalui tombol tab di keyboard, atau Rotary Bezel di jam tangan, dan penelusuran fokus semacam ini akan mengunjungi setiap elemen di layar.
  • Tombol panah: navigasi dua dimensi, kiri, kanan, atas, atau bawah. Navigasi dua dimensi dapat dicapai 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 tingkat yang berbeda.

Sebagai contoh, lihat screenshot di bawah, yang memiliki empat tombol, satu di bawah yang lain, dan Anda ingin beralih di antara semuanya sesuai urutan kemunculannya. Jetpack Compose memberikan perilaku ini secara langsung: toolkit ini memungkinkan Anda beralih antar-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 yang berbeda, hal-hal akan sedikit berubah. Jika tata letak Anda memiliki lebih dari satu kolom, seperti tata letak di bawah, Jetpack Compose memungkinkan Anda menavigasi kolom tersebut tanpa harus menambahkan kode apa pun. Jika Anda menekan tombol tab, Jetpack Compose akan otomatis menandai item sesuai urutan deklarasi, dari Pertama hingga Keempat. Menggunakan tombol panah di 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, urutan fokus berikut akan dihasilkan:

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 berdampingan dalam faktor bentuk yang lebih besar

Dalam cuplikan di bawah, Anda mendeklarasikan item di 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 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 berdampingan dalam faktor bentuk yang lebih besar

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

Berikutnya
Mengubah urutan traversal fokus