@ExperimentalStyle 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.
Önemli bir fark, stillerin değiştiricilerin yerine kullanılmamasıdır. Ancak doldurma ve renkler gibi stil parametrelerinin yerine kullanılabilirler. 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 yöntem 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 animasyonunu sağlar ve mevcut
animateColorAsStateyaklaşı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 Bileşen 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 |
Stil verilebilen standart bir özellik grubuyla birlikte, bir kullanıcı arayüzü öğesinin görünümünü tanımlayan arayüz. CSS stillerine benzer ve yerel olarak ya da 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 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'ye 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 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.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" }