Fokus dalam Jetpack Compose Glimmer

Perangkat XR yang kompatibel
Panduan ini membantu Anda membangun pengalaman untuk jenis perangkat XR ini.
Mempelajari jenis perangkat XR →
Kacamata Display
Mempelajari jenis perangkat XR →

Semua komponen Glimmer Jetpack Compose dirancang untuk bekerja dengan metode input standar, seperti ketuk atau geser pada touchpad kacamata, sekaligus responsif terhadap perintah input tingkat bawah yang khusus untuk hardware pada kacamata tampilan. Komponen Glimmer Jetpack Compose secara otomatis menangani peristiwa input yang diperlukan.

Untuk tindakan standar seperti scroll dan tarik, gunakan komponen Glimmer Jetpack Compose untuk meningkatkan pengalaman yang konsisten. Namun, untuk komponen kustom atau perilaku interaksi khusus, Anda dapat menggunakan API Compose yang ada seperti Modifier.draggable atau Modifier.scrollable.

Input dan fokus pointer

Pada kacamata tampilan, input penunjuk dapat memengaruhi fokus:

  • Ketuk: Interaksi langsung untuk mengaktifkan elemen. Fokus berpindah ke elemen saat pengguna berinteraksi dengannya.
  • Menggeser: Digunakan untuk navigasi dan men-scroll. Gestur geser yang tidak ditangani diterjemahkan secara otomatis menjadi gerakan fokus, sehingga memungkinkan navigasi UI yang lancar tanpa input penunjuk langsung.

Pergerakan fokus dan perubahan urutan saat pengguna menavigasi aplikasi Anda.

Pergerakan fokus

Pada penampung yang dapat di-scroll, fokus berpindah secara berkelanjutan dengan gesekan di touchpad. Untuk elemen diskret seperti deretan tombol, setiap gesekan akan memindahkan fokus satu elemen dalam satu waktu.

Urutan fokus

Sama seperti di Jetpack Compose, Jetpack Compose Glimmer menggunakan penelusuran fokus satu dimensi. Untuk mempelajari lebih lanjut urutan traversal fokus, lihat Mengubah urutan traversal fokus.

Untuk mengubah item yang awalnya difokuskan, Anda dapat menambahkan Modifier.focusGroup() tingkat teratas dan menentukan onEnter focusProperty kustom:

Modifier.focusProperties {
    onEnter = {
        initialFocus.requestFocus()
        // Prevent focus from exiting the group
        cancelFocusChange()
    }
}
.focusGroup()

Men-scroll penampung

Untuk pengalaman pengguna yang optimal, penampung scroll seperti daftar harus menjadi satu-satunya komponen utama di layar. Hindari menempatkan daftar yang dapat di-scroll tepat di atas atau di bawah elemen interaktif lainnya, seperti tombol, untuk mencegah kebingungan navigasi dan meningkatkan pergerakan fokus yang lancar dan dapat diprediksi.

Status fokus default

Jetpack Compose Glimmer menerapkan status fokus default di seluruh komponennya yang dapat berinteraksi, termasuk permukaan, kartu, dan item daftar, sehingga meningkatkan respons visual yang konsisten dan jelas selama interaksi pengguna.

Gambar 1. Tiga status fokus dalam Jetpack Compose Glimmer, yang dibedakan menggunakan umpan balik visual berbasis garis batas.

  • Default: Warna latar belakang tombol berasal dari GlimmerTheme.colors.surface, konten utamanya menghitung warna konten permukaan tersebut.

  • Berfokus: Lebar batas ditingkatkan untuk mengomunikasikan fokus.

  • Berfokus + Ditekan: Latar belakang disetel ke GlimmerTheme.colors.surface dengan peningkatan keburaman untuk mengomunikasikan status yang dipilih.