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 destekli akıllı 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 @Composable 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 çalışma 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 vardır. 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, yapay zeka destekli akıllı gözlüklerin benzersiz görsel ve etkileşimli talepleri 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ş 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, ö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ı artırabilirsiniz. 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österilen öğeleri görsel olarak ayırt etmeye yardımcı olur. Yapay zeka destekli akıllı gözlüklerdeki 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'ın teması
Jetpack Compose Glimmer, yapay zeka destekli akıllı 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 sayede, yapay zeka destekli akıllı gözlük için maksimum görünürlük ve özlük sağlanır. Tüm Jetpack Compose Glimmer bileşenleri, yapay zeka destekli akıllı gözlüklerin 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 (sembolografi) 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 destekli akıllı gözlük 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 |
#9BBFFF |
ikincil |
#4C88E9 |
pozitif |
#63FEA8 |
eksi |
#FFA7A0 |
yüzey |
#262626 |
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şleme ve geometrik biçim tanımlar. Bu sistem, tüm şekiller GlimmerTheme.shapes aracılığıyla gösterilerek yapay zeka destekli akıllı gözlüklerin 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 destekli akıllı gözlüklerin 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 destekli akıllı gözlük kullanıcı arayüzlerinin basitleştirilmiş görsel diliyle tutarlı bir şekilde entegre olacak şekilde tasarlanmıştır. Genellikle Material Symbols Rounded gibi yuvarlak şekillerden yararlanarak optimum okunabilirlik sağlar.