Oluşturma modundaki stiller

Style API, Jetpack Compose'da öğeleri ve bileşenleri özelleştirmek veya "stillerini belirlemek" için yeni bir paradigmadır. Bu işlem, geleneksel olarak değiştiriciler aracılığıyla yapılır. Daha kapsamlı ve kolay özelleştirme imkanı sunmak için tasarlanmıştır.

Styles API, form faktörleri genelinde esnekliği artırır, daha iyi performans sağlar ve özel tasarım sistemlerinin daha kolay oluşturulmasına olanak tanır. Özel bileşenlere ihtiyacınız olmasa bile Styles API'nin tasarım sisteminiz için birçok avantajı vardır.

Önemli bir fark, stillerin değiştiricilerin yerine geçmemesi, ancak dolgu ve renkler gibi stil parametrelerinin yerine geçmesidir. 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 açıklayıcı bir yöntem sunar. Bu sayede, değiştirici sistemine kıyasla ortak metin kodunu önemli ölçüde azaltır.
  • Animasyonlu durum geçişlerini iyileştirir: Style API, ideal performans özelliklerine sahip durumlar arasında stil özelliklerinin yerleşik animasyonuna olanak tanır ve mevcut animateColorAsState yaklaşımında gerçekleşen yeniden oluşturma işlemlerini önler.
  • Bileşen API'lerini kolaylaştırır: Özelleştirme için tek bir Style parametresi sunarak bileşen API'lerini önemli ölçüde basitleştirir ve daha fazla esneklik sağlar.
  • Değiştiricilere kıyasla daha az yeniden oluşturma işlemiyle daha iyi performans: Stiller, Compose'un çizim ve düzen aşamalarında çalışır ve oluşturma aşamasını atlar.
  • Daha standartlaştırılmış API grubu: Standart bir stil özellikleri grubu, tüm bileşenlerin stilini belirlemeyi sağlar.

Temel kavramlar

Konsept Açıklama
Style Standart bir stil uygulanabilir özellikler kümesiyle bir kullanıcı arayüzü öğesinin görünümünü tanımlayan arayüz. CSS stillerine benzer ve yerel olarak veya bir tema aracılığıyla özelleştirilebilir. Stiller birbirinin üzerine yazılır.Bir özelliğin iki kez ayarlanması (ör. background()) tek bir nihai değerle sonuçlanır.
StyleScope Stil içindeki applyStyle() işlevi için alıcı kapsamı. Görsel özellikleri (dolgu, arka plan, kenarlık vb.) tanımlamak ve mevcut StyleState öğesine erişmek için işlevler 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 son 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.12.0-alpha03 olarak ayarlayın:

compose = "1.12.0-alpha03"

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" }
Sonraki
Stillerle İlgili Temel Bilgiler