Glimmer Jetpack Compose dibangun di atas Jetpack Compose dan mencakup composable, komponen, perilaku, dan tema yang dirancang untuk kacamata AI dengan layar. Dengan Glimmer, Anda dapat membangun 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.
Komposable kilau Jetpack Compose
Jetpack Compose Glimmer menyediakan fungsi @Composable yang disesuaikan untuk tampilan kacamata AI, seperti Text, Button, dan ListItem. Berikut beberapa karakteristik unik composable Glimmer Jetpack Compose:
- 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 dalam Glimmer Jetpack Compose, yang dibedakan menggunakan masukan visual berbasis garis luar. Peningkatan yang Dioptimalkan: Jetpack Compose Glimmer menggunakan bayangan kotak terbatas untuk pemisahan visual
Gambar 2. Lima tingkat elevasi dalam Glimmer Jetpack Compose, yang dibedakan menggunakan box-shadow terbatas.
Komponen Glimmer Jetpack Compose
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 Glimmer Jetpack Compose 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 elemen penyusun paling dasar di Jetpack Compose Glimmer—kanvas kosong untuk desain atau interaksi kustom tertentu yang ingin Anda buat.
Pengubah Glimmer Jetpack Compose
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 kilau Jetpack Compose
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 Glimmer Jetpack Compose
Jetpack Compose Glimmer menampilkan 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 Glimmer Jetpack Compose 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 ringkasnya tampilan kacamata AI secara maksimal, tempat nilai hitam tidak dirender.
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 |
#A8C7FA |
sekunder |
#4C88E9 |
positif |
#4CE995 |
negatif |
#F57084 |
platform |
#000000 |
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 Glimmer Jetpack Compose 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.