Jetpack Compose Glimmer, Jetpack Compose üzerine kurulmuştur ve ekranlı yapay zeka gözlükleri için tasarlanmış composable'lar, bileşenler, davranışlar ve bir tema içerir. Glimmer ile Compose'u kullanarak ekranlı gözlükler için yerel kullanıcı arayüzü oluşturabilir, daha az kod, güçlü araçlar ve sezgisel Kotlin API'leri ile uygulama deneyimlerinize hayat verebilirsiniz.
Jetpack Compose Glimmer composable'ları
Jetpack Compose Glimmer, @Composable, Text, Button ve ListItem gibi yapay zeka gözlüğü ekranlarına özel olarak tasarlanmış işlevler sunar. Jetpack Compose Glimmer composable'larının benzersiz özelliklerinden bazıları şunlardır:
- Basitleştirilmiş stil: Örneğin,
Surfacebileşenleri, optik ekran optimizasyonu için varsayılan olarak siyah veya şeffaf arka planlara sahiptir. - Optimize edilmiş varsayılan renkler: Jetpack Compose Glimmer, içerik rengini varsayılan olarak arka plan rengine göre hesaplar. Bu nedenle, geliştiricilerin metin renklerini manuel olarak ayarlaması nadiren gerekir. Böylece, ek bir işlem yapmadan okunabilirlik artırılır.
Farklı odak: Odak, dalgalanma efekti yerine ana hat tabanlı görsel geri bildirim kullanılarak gösterilir. Bu sayede net görünürlük sağlanır.
Şekil 1. Jetpack Compose Glimmer'da, ana hat tabanlı görsel geri bildirim kullanılarak ayırt edilen üç odak durumu. Optimize edilmiş yükseklik: Jetpack Compose Glimmer, görsel ayrım için sınırlı kutu gölgeleri kullanır.
Şekil 2. Jetpack Compose Glimmer'da, sınırlı box-shadow'lar kullanılarak ayırt edilen beş yükseklik düzeyi.
Jetpack Compose Glimmer bileşenleri
Jetpack Compose Glimmer, Jetpack Compose'daki bileşenlere benzer şekilde özel olarak tasarlanmış bir dizi bileşene sahiptir ancak bu bileşenler, ekranlı gözlüklerin benzersiz görsel ve etkileşimli ihtiyaçları için özel olarak optimize edilmiştir. Jetpack Compose Glimmer bileşenleri, Jetpack Compose Glimmer'ın temasıyla özelleştirilebilir ve dokunma ile kaydırma gibi kullanıcı girişi yöntemlerini varsayılan olarak desteklemek için daha düşük düzeydeki Compose özelliklerini temel alır.
Belirli bir bileşeni kullanma hakkında daha fazla bilgi edinmek için aşağıdaki kılavuzlara bakın:
- Düğmeler
- Kartlar
- Simgeler
- Simge düğmeleri
- Listeler
- Liste öğeleri
- Gösterilen
- Metin
- Açma/kapatma düğmeleri
- Başlık Çipleri
- Dikey yığınlar
Bu üst düzey bileşenlerden biri kullanım alanınıza uygun değilse özel bir bileşen oluşturmak için surface kullanabilirsiniz. Yüzeyler, Jetpack Compose Glimmer'daki en temel yapı taşıdır. Oluşturmak istediğiniz belirli, özel tasarımlar veya etkileşimler için boş bir tuvaldir.
Jetpack Compose Glimmer değiştiricileri
Jetpack Compose Glimmer'daki değiştiriciler, Compose değiştiricileri ile aynı şekilde çalışır. Bu değiştiriciler, düzenlerini, görünümlerini ve davranışlarını özelleştirerek composable'ları artırmanıza olanak tanır. Jetpack Compose Glimmer, gözlüğe özel görsel geri bildirim ve performans için değiştiriciler ve benzersiz varsayılanlar içerir.
Jetpack Compose Glimmer'ın teması
Jetpack Compose Glimmer, ekranlı gözlükler için özel bir tema sistemi içerir.
Jetpack Compose Glimmer'ın teması, renkler, tipografi ve şekillerden oluşan basitleştirilmiş ve optimize edilmiş bir palet uygular. Bu, ekran gözlükleri için maksimum görünürlük ve özlük sağlar. Tüm Jetpack Compose Glimmer bileşenleri, gözlüğe özel giriş yöntemleriyle otomatik entegrasyon için tasarlanmıştır. Jetpack Compose
Glimmer'ın teması, GlimmerTheme sınıfı kullanılarak gösterilir.
Diğer Jetpack Compose temaları gibi GlimmerTheme de birkaç alt sistem içerir. Bunlar, özelleştirilebilir özellikleriyle birlikte aşağıdaki bölümlerde kısaca açıklanmıştır:
- Renkler
- Yazı biçimi
- Bileşen aralığı değerleri
- Şekiller
- Derinlik efekti seviyeleri
- Simge boyutları
Renkler
Jetpack Compose Glimmer'ın renk sistemi, eklemeli ekranlar ve gerçek ortamlar için tasarlanmıştır. Standart Android temalarının aksine, GlimmerTheme
Colors, içeriğin öngörülemeyen gerçek dünya aydınlatmasında okunabilir olmasını sağlamak için yarı şeffaflığa sahip koyu arka planlara ve canlı vurgulara öncelik verir.
Sistemde birincil, ikincil ve nötr renklerin yer aldığı üç parçalı bir palet kullanılır. Nötr renkler genellikle uzamsal kullanıcı arayüzünün fiziksel yüzeyleri olarak kullanılırken birincil ve ikincil renkler, etkileşim ve markalama için net görsel ipuçları sağlar.
GlimmerTheme içindeki renklere genel bakış.Yazı biçimi
Jetpack Compose Glimmer'ın tipografi sistemi, ekran gözlüklerinde okunabilirlik ve netlik için çeşitli tipografi stilleri içerir. Bu stiller, daha kalın ağırlıklar, daha geniş harf aralığı ve uygun satır yükseklikleriyle kontrastı en üst düzeye çıkarmak ve metin okunabilirliğini artırmak için tasarlanmıştır. Bu stiller, GlimmerTheme.typography üzerinden kullanıma sunulur.
Bileşen aralığı değerleri
Bu değerler, Jetpack Compose Glimmer bileşenlerinde tutarlı aralıklar sağlamak için kullanılır. Buna bileşen dolguları, bileşenler arasındaki boşluk ve diğer boşluk öğeleri dahildir. Bu değerlerin değiştirilmesinin çoğu bileşenin varsayılan boyutunu etkilediğini unutmayın.
Şekiller
Jetpack Compose Glimmer'ın şekil sistemi, bileşenler için bir dizi standart köşe işlemi ve geometrik şekil tanımlar. Bu sistem, tüm şekiller GlimmerTheme.shapes aracılığıyla kullanıma sunularak ekranlı gözlüklerin kullanıcı arayüzlerinde tutarlı ve minimalist bir görsel dil oluşturmak üzere tasarlanmıştır.
Derinlik efekti seviyeleri
Jetpack Compose Glimmer bileşenleri, hiyerarşiyi temsil etmek için derinliği kullanır. Bu, diğer kartların üzerinde (en üstte) gösterilen öğeleri görsel olarak ayırt etmeye yardımcı olur. Görüntüleme gözlüklerindeki derinlik, z-uzayındaki yerleşim ve gölgelerin birleşimidir. Liste öğeleri gibi çoğu üst düzey bileşende derinlik, odak durumuna göre otomatik olarak uygulanır. Odaklanan bileşen derinlik kazanır, odağı kaybettiğinde ise normal durumuna döner. Ancak özel bileşenlerle çalışmak için Modifier.surface veya depthEffect üzerinde depthEffect parametresini kullanabilirsiniz.
Simge boyutları
Jetpack Compose Glimmer'ın simge sistemi, ekranlı gözlüklerin basitleştirilmiş görsel diliyle tutarlı bir şekilde entegre olacak şekilde tasarlanmıştır. Genellikle optimum okunabilirlik için Material Symbols Rounded gibi yuvarlak şekillerden yararlanır.