Jetpack Compose Glimmer dibuat berdasarkan Jetpack Compose dan mencakup composable, komponen, perilaku, dan tema yang dirancang untuk kacamata AI dengan layar. Dengan Glimmer, Anda dapat membuat UI native untuk kacamata display menggunakan Compose, sehingga menghidupkan pengalaman aplikasi Anda dengan kode yang lebih sedikit, alat yang canggih, dan API Kotlin yang intuitif.
Composable Jetpack Compose Glimmer
Jetpack Compose Glimmer menyediakan @Composable fungsi yang disesuaikan untuk layar kacamata AI, seperti Text, Button, dan ListItem. Berikut beberapa karakteristik unik dari composable Jetpack Compose Glimmer:
- Gaya yang disederhanakan: Komponen
Surface, misalnya, secara default menggunakan latar belakang hitam atau transparan untuk pengoptimalan layar optik. - Default warna yang dioptimalkan: Jetpack Compose Glimmer menghitung warna konten berdasarkan warna latar belakang secara default, sehingga developer jarang perlu menetapkan warna teks secara manual, yang meningkatkan keterbacaan tanpa pekerjaan tambahan.
Fokus yang dibedakan: Fokus ditunjukkan menggunakan masukan visual berbasis garis luar bukan efek riak, yang meningkatkan visibilitas yang jelas.
Gambar 1. Tiga status fokus di Jetpack Compose Glimmer, yang di bedakan menggunakan masukan visual berbasis garis luar. Elevasi yang Dioptimalkan: Jetpack Compose Glimmer menggunakan box-shadow terbatas untuk pemisahan visual
Gambar 2. Lima tingkat elevasi di Jetpack Compose Glimmer, yang dibedakan menggunakan box-shadow terbatas.
Komponen Jetpack Compose Glimmer
Jetpack Compose Glimmer memiliki kumpulan komponen yang dirancang khusus, mirip dengan komponen di Jetpack Compose, tetapi dioptimalkan secara khusus untuk permintaan visual dan interaktif yang unik dari kacamata display. Komponen Jetpack Compose Glimmer dapat disesuaikan dengan tema Jetpack Compose Glimmer dan dibuat berdasarkan fitur Compose tingkat bawah untuk mendukung metode input pengguna seperti ketuk dan geser secara default.
Untuk mempelajari lebih lanjut cara menggunakan komponen tertentu, lihat panduan berikut:
- Buttons
- Cards
- Icons
- Icon buttons
- Lists
- List items
- Surfaces
- Text
- Toggle buttons
- Title Chips
- Vertical stacks
Jika salah satu komponen tingkat tinggi ini tidak berfungsi untuk kasus penggunaan Anda, Anda dapat
menggunakan surface untuk membuat komponen kustom. Surface adalah blok bangunan paling dasar di Jetpack Compose Glimmer—kanvas kosong untuk desain atau interaksi kustom tertentu yang ingin Anda buat.
Pengubah Jetpack Compose Glimmer
Pengubah di Jetpack Compose Glimmer berfungsi sama dengan Compose pengubah, yang memungkinkan Anda menambah composable dengan menyesuaikan tata letak, tampilan, dan perilakunya. Jetpack Compose Glimmer menyertakan pengubah dan default unik untuk masukan visual dan performa khusus kacamata.
Tema Jetpack Compose Glimmer
Jetpack Compose Glimmer memiliki sistem tema khusus untuk kacamata display.
Tema Jetpack Compose Glimmer menerapkan palet warna, tipografi, dan bentuk yang disederhanakan dan dioptimalkan. Hal ini meningkatkan visibilitas dan ringkasan maksimum untuk kacamata display. Semua komponen Jetpack Compose Glimmer dirancang untuk integrasi otomatis dengan metode input khusus kacamata. Tema Jetpack Compose
Glimmer diekspos menggunakan class GlimmerTheme.
Seperti tema lainnya di Jetpack Compose, GlimmerTheme menyertakan beberapa
subsistem yang dijelaskan secara singkat di bagian berikut beserta atributnya yang dapat disesuaikan:
- Colors
- Typography
- Component spacing values
- Shapes
- Depth effect levels
- Icon sizes
Colors
Sistem warna Jetpack Compose Glimmer dirancang untuk layar tambahan
dan lingkungan nyata. Tidak seperti tema Android standar, GlimmerTheme
Colors memprioritaskan latar belakang gelap dengan semi-transparansi dan aksen cerah untuk memastikan konten dapat dibaca dengan jelas terhadap pencahayaan dunia nyata yang tidak dapat diprediksi.
Sistem ini menggunakan palet tiga bagian dengan warna primer, sekunder, dan netral. Warna netral sering kali berfungsi sebagai permukaan fisik UI spasial, sedangkan warna primer dan sekunder memberikan petunjuk visual yang jelas untuk interaksi dan branding.
GlimmerTheme.Typography
Sistem tipografi Jetpack Compose Glimmer mencakup berbagai gaya tipografi untuk keterbacaan dan ringkasan pada kacamata display. Gaya ini dirancang untuk memaksimalkan kontras dan meningkatkan keterbacaan teks melalui ketebalan yang lebih tebal, spasi huruf yang lebih lebar, dan tinggi baris yang sesuai. Gaya ini diekspos melalui
GlimmerTheme.typography.
Component spacing values
Nilai ini digunakan untuk memastikan spasi yang konsisten di seluruh komponen Jetpack Compose Glimmer. Hal ini mencakup padding komponen, spasi antar-komponen, dan elemen spasi lainnya. Perhatikan bahwa perubahan nilai ini akan memengaruhi ukuran default sebagian besar komponen.
Shapes
Sistem bentuk Jetpack Compose Glimmer menentukan kumpulan perlakuan sudut standar
dan bentuk geometris untuk komponen, yang dirancang untuk membuat bahasa visual yang konsisten
dan minimalis pada UI kacamata display, dengan semua bentuk diekspos
melalui GlimmerTheme.shapes.
Depth effect levels
Komponen Jetpack Compose Glimmer menggunakan kedalaman untuk mewakili hierarki, yang membantu membedakan secara visual elemen yang ditampilkan di atas (di atas) kartu lainnya. Kedalaman pada kacamata display adalah kombinasi penempatan di ruang z dan bayangan. Untuk sebagian besar komponen tingkat tinggi, seperti item daftar, kedalaman akan otomatis diterapkan berdasarkan status fokus. Saat komponen difokuskan, komponen akan mendapatkan kedalaman; saat kehilangan fokus, komponen akan kembali ke status normal. Namun, untuk
menggunakan komponen kustom, Anda dapat menggunakan parameter depthEffect di
Modifier.surface, atau depthEffect.
Icon sizes
Sistem ikon Jetpack Compose Glimmer dirancang untuk berintegrasi secara koheren dengan bahasa visual UI kacamata display yang disederhanakan, yang sering kali memanfaatkan bentuk bulat seperti Material Symbols Rounded untuk keterbacaan yang optimal.