Fokus dalam Kilau Jetpack Compose

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

Semua komponen Glimmer Jetpack Compose dirancang untuk bekerja dengan metode input standar, seperti ketukan atau gesekan pada touchpad kacamata AI, sekaligus responsif terhadap perintah input tingkat yang lebih rendah yang khusus untuk hardware kacamata AI. Komponen Glimmer Jetpack Compose secara otomatis menangani peristiwa input yang diperlukan. Untuk komponen kustom, Anda dapat memanfaatkan API Compose yang ada seperti Modifier.draggable atau Modifier.scrollable untuk menerapkan perilaku interaksi tertentu.

Pada kacamata AI dengan layar, 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()
        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

Glimmer Jetpack Compose 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 Glimmer Jetpack Compose, yang dibedakan menggunakan masukan visual berbasis garis batas.

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

  • Berfokus: Lebar batas ditingkatkan untuk mengomunikasikan fokus.

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