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 yapay zeka gözlükleri için yerel kullanıcı arayüzü oluşturabilir, daha az kod, güçlü araçlar ve sezgisel Kotlin API'leri ile uygulama deneyimlerinizi hayata geçirebilirsiniz.
Jetpack Compose Glimmer composable'ları
Jetpack Compose Glimmer, @Composable, Text ve Button gibi yapay zeka gözlüğü ekranları için özel olarak tasarlanmış ListItem işlevleri sunar. Jetpack Compose Glimmer composable'larının bazı benzersiz özellikleri şunlardır:
- Basitleştirilmiş stil: Örneğin,
Surfacebileşenleri, optik görüntü 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 çalışma yapmadan okunabilirlik artırılır.
Farklı odak: Odak, dalgalanma efekti yerine ana hat tabanlı görsel geri bildirim kullanılarak belirtilir. Bu sayede net görünürlük sağlanır.
Şekil 1. Jetpack Compose Glimmer'da üç odak durumu vardır. Bu durumlar, ana hat tabanlı görsel geri bildirim kullanılarak ayırt edilir. 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 bulunur.
Jetpack Compose Glimmer bileşenleri
Jetpack Compose Glimmer, Jetpack Compose'daki bileşenlere benzer şekilde özel olarak tasarlanmış bir bileşen grubuna sahiptir ancak bu bileşenler, özellikle yapay zeka gözlüklerinin benzersiz görsel ve etkileşimli talepleri için 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ş yöntemlerini varsayılan olarak desteklemek için daha düşük seviyeli Compose özelliklerine dayanır.
Belirli bir bileşeni kullanma hakkında daha fazla bilgi edinmek için aşağıdaki kılavuzlara bakın:
Bu üst düzey bileşenlerden biri kullanım alanınız için çalışmıyorsa özel bir bileşen oluşturmak üzere surface kullanabilirsiniz. Yüzeyler, Jetpack Compose Glimmer'daki en temel yapı taşıdır. Oluşturmak istediğiniz belirli ve ö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ştiricileriyle aynı şekilde çalışır. Bu sayede, düzenlerini, görünümlerini ve davranışlarını özelleştirerek composable'ları geliştirebilirsiniz. Jetpack Compose Glimmer, gözlüğe özel görsel geri bildirim ve performans için belirli değiştiriciler sunabilir veya benzersiz varsayılanlar uygulayabilir.
Jetpack Compose Glimmer derinliği
Jetpack Compose Glimmer bileşenleri, hiyerarşiyi temsil etmek için derinliği kullanır. Bu, diğer kartların üzerinde (en üstte) görüntülenen öğeleri görsel olarak ayırt etmeye yardımcı olur. Yapay zeka 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 Modifier.depth üzerinde derinlik parametresini kullanabilirsiniz.
Jetpack Compose Glimmer teması
Jetpack Compose Glimmer, yapay zeka gözlükleri 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, yapay zeka gözlüklerinin maksimum görünürlüğünü ve kısa olmasını sağlar. Tüm Jetpack Compose Glimmer bileşenleri, yapay zeka gözlüklerinin belirli 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 renkler, şekiller, tipografi ve simgeler (semboloji) gibi çeşitli alt sistemler içerir. Jetpack
Compose Glimmer'ın teması, özelleştirebileceğiniz Jetpack Compose Glimmer bileşenlerini de içerir.
Renkler
Jetpack Compose Glimmer'ın renk sistemi, optimize edilmiş paletinde yedi renk içerir. Bu renkler, siyah değerlerin oluşturulmadığı yapay zeka gözlüğü ekranlarında maksimum görünürlük ve netlik için tasarlanmıştır.
GlimmerTheme içindeki renklere genel bakış."On ..." renklerinin GlimmerTheme üzerinden kullanılamadığını unutmayın. Bu renkler, sistem tarafından arka plan rengine göre otomatik olarak hesaplanır.
Bu renkler GlimmerTheme.colors.primary aracılığıyla gösterilir. Her renk rolünün değerleri aşağıdaki tabloda açıklanmıştır:
Renk Rolü |
Varsayılanlar |
|---|---|
birincil |
#A8C7FA |
ikincil |
#4C88E9 |
pozitif |
#4CE995 |
eksi |
#F57084 |
yüzey |
#000000 |
outline |
#606460 |
outlineVariant |
#42434A |
surface, outline ve outlineVariant özelleştirilebilir olarak işaretlenmiş olsa da bu değerleri özelleştirmenizi kesinlikle önermediğimizi unutmayın.
Şekiller
Jetpack Compose Glimmer'ın şekil sistemi, bileşenler için bir dizi standart köşe işlemi ve geometrik biçim tanımlar. Bu sistem, tüm şekiller GlimmerTheme.shapes aracılığıyla gösterilerek yapay zeka gözlüklerinin kullanıcı arayüzlerinde tutarlı ve minimalist bir görsel dil oluşturmak üzere tasarlanmıştır.
Yazı biçimi
Jetpack Compose Glimmer'ın tipografi sistemi, yapay zeka gözlüğü ekranlarında okunabilirlik ve netlik için altı tipografi stili 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.
Simgeler
Jetpack Compose Glimmer'ın simge sistemi, yapay zeka gözlüklerinin kullanıcı arayüzlerinin 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.