Oluşturma modundaki stiller

Style API, Jetpack Compose'daki öğeleri ve bileşenleri özelleştirmek veya "stil vermek" için kullanılan yeni bir yöntemdir. Bu işlem, geleneksel olarak değiştiriciler aracılığıyla yapılırdı. Daha derin ve kolay özelleştirme için tasarlanmıştır.

Styles API, form faktörleri arasında esnekliği artırır, daha iyi performans sağlar ve özel tasarım sistemi oluşturmayı kolaylaştırır. Özel bileşenlere ihtiyacınız olmasa bile Styles API, tasarım sisteminiz için birçok avantaj sunar.

Stillerin değiştiricilerin yerine geçmediği, ancak dolgu ve renkler gibi stil parametrelerinin yerine geçtiği önemli bir farktır. Daha fazla esneklik ve performans için parametreler yerine stilleri kullanmaya geçmenizi öneririz.

Stillerin avantajları

  • Duruma dayalı stil oluşturmayı basitleştirir: API, farklı durumlara (ör.fareyle üzerine gelme, odaklanma, basma) göre değişen stilleri tanımlamak için daha kısa ve bildirimsel bir yol sunar. Bu sayede, değiştirici sistemine kıyasla çok daha az ortak metin kodu kullanılır.
  • Animasyonlu durum geçişlerini iyileştirir: Style API, ideal performans özellikleriyle durumlar arasında stil özelliklerinin yerleşik animasyonuna olanak tanır ve mevcut animateColorAsState yaklaşımıyla oluşan yeniden oluşturmaları önler.
  • Bileşen API'lerini kolaylaştırır: Özelleştirme için tek bir Stil parametresi sunarak bileşen API'leri önemli ölçüde basitleştirilir ve daha fazla esneklik sunar.
  • Değiştiriciler üzerinde daha iyi performans sağlayan daha az yeniden oluşturma: Stiller, Compose'un Çizim ve Düzen aşamalarında çalışır ve Oluşturma aşamasını atlar.
  • Daha standartlaştırılmış bir API grubu: Standart bir stil özellikleri grubu, tüm bileşenlere stil uygulanabilir hale getirir.

Temel kavramlar

Konsept Açıklama
Style Bir kullanıcı arayüzü öğesinin görünümünü tanımlayan, standart bir stil verilebilir özellikler grubu içeren arayüz. CSS stillerine benzer ve yerel olarak veya bir tema aracılığıyla özelleştirilebilir. Stiller birbirinin üzerine yazılır.Bir özelliği iki kez ayarlamak (ör. background()) tek bir nihai değerle sonuçlanır.
StyleScope Bir Stildeki applyStyle() işlevi için alıcı kapsamı. Görsel özellikleri (dolgu, arka plan, kenarlık vb.) tanımlama ve mevcut StyleState'ya erişme işlevleri sağlar.
StyleState Koşullu stil tanımlamak için bir stil içinde kullanabileceğiniz durumlar (ör. isEnabled, isPressed, isChecked, özel durumlar) sağlar.

Başlangıç: Bağımlılık ekleme

API'leri kendi projenizde kullanmak için Jetpack Compose Foundation'ın en yeni alfa sürümünü kullandığınızdan emin olun. settings.gradle.kts dosyanızda, kullanılacak depolar listesine anlık görüntü maven deposunu ekleyin.

libs.versions.toml veya doğrudan app/build.gradle.kts dosyanızda Compose sürümünü 1.11.0-alpha06 olarak ayarlayın:

compose = "1.11.0-alpha06"

androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "compose" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose" }
androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics", version.ref = "compose" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "compose" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "compose" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "compose" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4", version.ref = "compose" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "compose" }