Jetpack Compose Glimmer dibangun di atas Jetpack Compose dan mencakup composable, komponen, perilaku, dan tema yang didesain untuk kacamata AI dengan layar. Dengan Glimmer, Anda dapat membuat UI native untuk kacamata AI menggunakan Compose, yang 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 fungsi @Composable yang disesuaikan untuk tampilan kacamata AI, seperti Text, Button, dan ListItem. Berikut beberapa karakteristik unik composable Jetpack Compose Glimmer:
- Gaya yang disederhanakan: Komponen
Surface, misalnya, secara default menggunakan latar belakang hitam atau transparan untuk pengoptimalan tampilan visual. - Default warna yang dioptimalkan: Jetpack Compose Glimmer menghitung warna konten berdasarkan warna latar belakang secara default, sehingga developer jarang perlu menyetel warna teks secara manual, sehingga meningkatkan keterbacaan tanpa pekerjaan tambahan.
Fokus yang berbeda: 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 dibedakan menggunakan masukan visual berbasis garis batas. Peninggian yang Dioptimalkan: Jetpack Compose Glimmer menggunakan bayangan kotak terbatas untuk pemisahan visual
Gambar 2. Lima tingkat elevasi dalam Jetpack Compose Glimmer, yang dibedakan menggunakan box-shadow terbatas.
Komponen Jetpack Compose Glimmer
Jetpack Compose Glimmer memiliki serangkaian komponen yang didesain khusus, mirip dengan komponen di Jetpack Compose, tetapi dioptimalkan secara khusus untuk tuntutan visual dan interaktif yang unik dari kacamata AI. Komponen Glimmer Jetpack Compose dapat disesuaikan dengan tema Jetpack Compose Glimmer dan dibangun berdasarkan fitur Compose tingkat rendah untuk mendukung metode input pengguna seperti ketuk dan geser secara default.
Untuk mempelajari lebih lanjut cara menggunakan komponen tertentu, lihat panduan berikut:
Jika salah satu komponen tingkat tinggi ini tidak berfungsi untuk kasus penggunaan Anda, Anda dapat menggunakan surface untuk membuat komponen kustom. Permukaan 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 dalam fungsi Glimmer Jetpack Compose berfungsi sama dengan pengubah Compose, sehingga Anda dapat memperluas composable dengan menyesuaikan tata letak, tampilan, dan perilakunya. Glimmer Jetpack Compose dapat memperkenalkan pengubah tertentu atau menerapkan default unik untuk performa dan respons visual khusus kacamata.
Kedalaman Jetpack Compose Glimmer
Komponen Glimmer Jetpack Compose menggunakan kedalaman untuk merepresentasikan hierarki, yang membantu membedakan secara visual elemen yang ditampilkan di atas (di atas) kartu lainnya. Kedalaman pada kacamata AI adalah kombinasi penempatan di ruang z dan bayangan. Untuk sebagian besar komponen tingkat tinggi, seperti item daftar, kedalaman
diterapkan secara otomatis berdasarkan status fokus. Saat difokuskan, komponen akan mendapatkan kedalaman; saat kehilangan fokus, komponen akan kembali ke status normalnya. Namun, untuk
bekerja dengan komponen kustom, Anda dapat menggunakan parameter kedalaman pada
Modifier.surface, atau Modifier.depth.
Tema Jetpack Compose Glimmer
Jetpack Compose Glimmer memiliki sistem penerapan tema khusus untuk kacamata AI.
Tema Jetpack Compose Glimmer menerapkan palet warna, tipografi, dan bentuk yang disederhanakan dan dioptimalkan. Hal ini meningkatkan visibilitas dan keringkasan maksimum untuk kacamata AI. Semua komponen Jetpack Compose Glimmer dirancang untuk
integrasi otomatis dengan metode input spesifik kacamata AI. Tema Glimmer Jetpack Compose diekspos menggunakan class GlimmerTheme.
Seperti tema lainnya di Jetpack Compose, GlimmerTheme mencakup beberapa
subsistem: warna, bentuk, tipografi, dan ikon (simbologi). Tema Jetpack
Compose Glimmer juga mencakup komponen Jetpack Compose Glimmer
yang dapat Anda sesuaikan.
Warna
Sistem warna Jetpack Compose Glimmer mencakup tujuh warna dalam palet yang dioptimalkan, yang dirancang untuk visibilitas dan keringkasan maksimum pada tampilan kacamata AI yang tidak merender nilai hitam.
GlimmerTheme.Perhatikan bahwa warna "On ..." tidak diekspos melalui GlimmerTheme. Warna ini dihitung secara otomatis oleh sistem berdasarkan warna latar belakang.
Warna ini ditampilkan melalui GlimmerTheme.colors.primary, dengan
nilai untuk setiap peran warna seperti yang dijelaskan dalam tabel berikut:
Peran Warna |
Default |
|---|---|
utama |
#9BBFFF |
sekunder |
#4C88E9 |
positif |
#63FEA8 |
negatif |
#FFA7A0 |
platform |
#262626 |
garis luar |
#606460 |
outlineVariant |
#42434A |
Perhatikan bahwa meskipun surface, outline, dan outlineVariant ditandai sebagai dapat disesuaikan, sebaiknya Anda tidak menyesuaikan nilai ini.
Bentuk
Sistem bentuk Jetpack Compose Glimmer menentukan serangkaian perlakuan sudut standar dan bentuk geometris untuk komponen, yang dirancang untuk menciptakan bahasa visual yang konsisten dan minimalis pada UI kacamata AI, dengan semua bentuk yang ditampilkan melalui GlimmerTheme.shapes.
Tipografi
Sistem tipografi Glimmer Jetpack Compose mencakup enam gaya tipografi untuk
keterbacaan dan keringkasan pada tampilan kacamata AI. Gaya ini dirancang untuk memaksimalkan kontras dan meningkatkan keterbacaan teks melalui ketebalan yang lebih berani, spasi huruf yang lebih lebar, dan tinggi garis yang sesuai. Gaya ini ditampilkan melalui
GlimmerTheme.typography.
Ikon
Sistem ikon Jetpack Compose Glimmer dirancang untuk berintegrasi secara koheren dengan bahasa visual yang disederhanakan dari UI kacamata AI, yang sering kali memanfaatkan bentuk bulat seperti Material Symbols Rounded untuk keterbacaan yang optimal.