Compose for Wear OS 1.1 Artık Kararlı!

Serkan Alc
Developer MultiGroup
4 min readDec 8, 2022

Bugün, geliştiricilerin Wear OS için güzel gözüken, responsive uygulamalar oluşturmasına yardımcı olan modern declarative UI toolkit olan Compose for Wear OS’nin 1.1 sürümü yayınlandı.

Bu yılın başlarındaki ilk kararlı sürümden bu yana, birçok geliştiricinin uygulamalarını daha basit ve daha verimli hale getirmek için güçlü araçlardan ve sezgisel API’lerden yararlandığını belirtildi. Todoist ve Outdooractive, Wear uygulamalarını Compose ile yeniden oluşturan ve yeni, fonksiyonel bir kullanıcı deneyiminin sunulmasını hızlandıran geliştiricilerden bazıları.

Todoist, uygulamalarını Wear 3 ve Outdooractive için yeniden oluşturduktan sonra büyüme oranını %50 artırdı ve geliştirme süresini %30 azalttı ve geliştirici üretkenliğinde ve daha iyi tasarım/geliştirici işbirliğinde önemli bir artış gördü:

“Compose, UI kodunu yazmak ve okumak için daha sezgisel hale getirerek, tasarım aşamasında daha hızlı prototip oluşturmamıza ve ayrıca kod üzerinde daha iyi işbirliği yapmamıza olanak tanıyor. Günlerimizi alacak olan şey şimdi saatlerimizi alıyor.”

Compose for Wear OS 1.1 sürümü, yeni özellikler içeriyor ve UX ve erişilebilirliğe odaklanarak mevcut bileşenlere iyileştirmeler getirmiş. Ayrıca örnekleri, codelab’leri ve Horologist kitaplığı Compose for Wear OS 1.1 ile çalışacak şekilde güncellendi.

Peki Yenilikler Neler?

📌Chips ve Düğmeler için Outlined Stil

Kullanıcı arayüzünü özelleştirme konusunda ek yetenek sağlamak adına, Cipsler ve Düğmeler için ana hatları çizilen stiller eklendi. Yeni OutlinedChip ve OutlinedButton composable öğeleri, orta vurgulu eylemler için kullanılabilecek ince kenarlıklı şeffaf bir bileşen sağlar. Ayrıca Kompakt sürümler için de mevcuttur: OutlinedCompactChip ve OutlinedCompactButton.

OutlinedChip ve OutlinedButton composable öğeleri.

📌Chips ve Düğme şekillerini değiştirmek

Sürüm 1.1'den başlayarak, yeni functions overload’ları kullanarak Chip/ToggleChip ve Button/ToggleButton bileşenlerinin şekillerini de değiştirebilirsiniz.

📌Placeholder API

Placeholder desteğini uygulamak için yeni bir deneysel API eklendi. Bu, ayrı ayrı veya hep birlikte üç farklı görsel efekt elde etmek için kullanılabilir:

  • İçeriğin yüklenmesini beklerken normal arka planın üzerine çizim yapmak için Chip ve Cards gibi kaplarda kullanılan placeholder arka plan brush efekti.
  • Yüklenmekte olan içeriğin üzerine stadium shaped bir placeholder widget’ı çizmek için bir Modifier.placeholder().
  • Kullanıcılara mevcut durumun verilerin yüklenmesini beklediğini belirtmek için diğer efektlerin üzerine çizilen gradyan/ışıltı efekti için bir Modifier.placeholderShimmer().

Bu efektler, koordineli bir şekilde parıldamak ve silinmek üzere tasarlanmıştır.

Placeholder API kullanım örnekleri

Placeholder simgeli bir Chips, tek tek içerik yuvalarının üzerine placeholder koyan ve verilerin yüklenmesini beklerken üstüne bir placeholder ışıltısı çizen bir etiket gibi yaygın kullanım durumlarına nasıl uygulanacağını görmek için Horologist’teki referans belgelere ve örneğe göz atabilirsiniz .

📌Modifier.scrollAway

Horologist’in fadeAway modifier, sürüm 1.1'de scrollAway modifier’a terfi etti. Modifier.scrollAway, kaydırma durumuna bağlı olarak bir öğeyi dikey olarak görünümün içine ve dışına kaydırır ve Column, LazyColumn ve ScalingLazyColumn ile çalışmak için halihazırda owerload’lara sahiptir.

Kullanıcı bir öğe listesini yukarı kaydırmaya başladığında TimeText fade out sağlamak için bu modifier’ı kullanmanız önerilir.

TimeText ile ScrollAway modifier kullanımı

📌CurvedTextStyle’daki ek parametreler

CurvedTextStyle artık kavisli bir metin stili oluştururken yazı tipi ayrıntılarını belirtmek için ek parametreleri (fontFamily, fontWeight, fontStyle, fontSynthesis) destekliyor. Genişletilmiş curved text style hem curvedText hem de basicCurvedText. üzerinde kullanılabilir.

curved text’e farklı yazı tipi uygulama

UX and accessibility improvements

Compose for Wear OS 1.1 sürümü aynı zamanda rafine bir kullanıcı deneyimi, TalkBack desteği için iyileştirmeler ve genel olarak daha iyi erişilebilirlik getirmeye odaklanıyor:

  • ToggleChip ve SplitToggleChip, ToggleChipDefaults tarafından sağlanan statik simgeler yerine kullanılabilecek animasyonlu geçiş kontrollerinin (Checkbox, Switch ve RadioButton) kullanımını destekler.
  • Chip/ToggleChip ve Kartlar için varsayılan gradyan renkleri, en son UX spesifikasyonuna uyacak şekilde ayarlandı.
  • Orijinal renkler yeterli kontrasta sahip olmadığından erişilebilirliği iyileştirmek için MaterialTheme’deki bir dizi varsayılan renk güncellendi.
  • Multi-picker ekranlarında ekran okuyucularla gezinilebilir ve içerik açıklamasına erişilebilir olacak şekilde Picker’da erişilebilirlik iyileştirmeleri.
  • InlineSlider ve Stepper artık düğme rollerine sahiptir, böylece TalkBack bunları düğme olarak tanıyabilir.
  • Scaffold’daki PositionIndicator artık yalnızca gereken alanı kaplayacak şekilde konumlandırılmış ve boyutlandırılmıştır. Bu, semantic bilgiler eklendiğinde kullanışlıdır, böylece TalkBack ekranda PositionIndicator’ın doğru sınırlarını alır.

Bu yazımı Compose for Wear OS 1.1 is now stable: check out new features! Bloğunu Türkçeleştirmeye çalıştım. Umarım beğenmişsinizdir. Compose ile ilgi içerik üretmeye devam edeceğim. Compose’a ilgi duyuyor ve içeriklerimden daha hızlı haberdar olmak istiyorsanız, beni Twitter’dan takip edebilirsiniz!

- Compose’lu Günlerim 👋🏼

--

--

Serkan Alc
Developer MultiGroup

Founder & Community Lead at Developer MultiGroup | Coffee, Community & Development ☀️