Jetpack Compose, Views ile birlikte çalışmayı destekler. Compose'u Views'da, Views'u ise Compose'da kullanabilirsiniz. Bu sayede, mevcut View tabanlı uygulamalarda tüm View'ları hemen taşımak zorunda kalmadan Compose'u kullanabilirsiniz.
Taşıma adımları
- Plan oluşturun: Taşıma işlemini gerçekleştirmek için sağlam ve adım adım bir plan oluşturun. Taşıma görevlerinin önceliklendirilmiş birikimini oluşturmanızı öneririz.
- Taşıma için XML adayını belirleyin : Hiyerarşideki yaprak düğümleri olan en küçük bileşenleri belirleyin ve bunlardan başlayın. Taşıma planını, hiyerarşideki giderek daha yüksek bileşenlere doğru genişletin. İlk taşıma için uygun adaylar küçük, durumsuz ve daha az bağımlılığı olanlardır.
- Hiyerarşiyi analiz edin: Taşınacak XML görünümünü belirledikten sonra XML düzen yapısını ve uygulamasını analiz edin.
- İlk durumu yakalama: Seçilen XML görünümünün ilk durumunu yakalamak için ekran görüntüsü testi çalıştırın.
- Ön koşul: Compose bağımlılıklarını ayarlayın Projede Compose bağımlılıklarının ve derleyicinin ayarlanıp ayarlanmadığını belirleyin. Aksi takdirde Setup Compose dependencies and Compiler (Compose bağımlılıklarını ve derleyiciyi ayarlama) bölümündeki adımları uygulayın.
- Ön koşul: Compose temalandırmayı ayarlayın Projede Compose temalandırmanın ayarlanıp ayarlanmadığını belirleyin. Aksi takdirde, Compose temalandırmasını uygulayın. Uygulama birlikte çalışabilir durumdayken orijinal XML temalandırmasını koruyun. XML temasını Compose'a taşıma başlıklı makaleyi inceleyerek bu durumu nasıl belirleyeceğinizi ve proje tamamen Compose'a taşınana kadar nasıl devam edeceğinizi öğrenebilirsiniz.
- XML görünümünü Compose'a taşıma: XML kodunu Compose'a dönüştürmeye başlayın, uygun temayı uygulayın ve taşınan composable'lar için Compose önizlemeleri ekleyin. Sık karşılaşılan taşıma senaryoları için ek kaynaklara bakın. Örneğin, Compose'da Lazy API'lere geçiş yapmak için RecyclerView'ı Compose'a taşıma başlıklı makaledeki adımları uygulayın.
- Kullanımları değiştirme: XML görünümünün önceki kullanımlarını yeni Compose bileşenini kullanacak şekilde değiştirin. Görünümlerde Oluştur özelliğini eklemek için Görünümlerde Oluştur bölümündeki adımları uygulayın. Compose'da Görünümler'i eklemek için Compose'da Görünümler bölümündeki adımları uygulayın.
- Taşıma işlemini doğrulama: Ekran görüntüsü testinde yakalanan ilk durumun, taşınan composable'ın Compose Önizlemesi ile aynı olduğunu doğrulayın. Eşleşmiyorlarsa yeni birleştirilebilir kullanıcı arayüzünü yineleyin ve ilk durumla uyumlu hale getirmek için iyileştirin. Yeni composable için yeni Compose kullanıcı arayüzü testleri oluşturun.
- XML kaldırma: Yeni taşınan composable, ilk XML kullanıcı arayüzüyle eşleştiğinde eski XML View kodunu ve testlerini kaldırın.
Sık karşılaşılan taşıma senaryoları
Birleştirilebilir işlevlerde dp ve sp uzantılarının kullanıldığını doğrulayın (16.dp, 20.sp).
XML görünümünde tools:text varsa bunu ayrı bir @Preview composable'da kullanın.
Özelliği değiştiriciye dönüştürme
Çoğu XML özelliği, modifier zincirinin veya birleştirilebilir işlevin parametrelerinin parçası olur.
| XML özelliği | Oluşturma Eşdeğeri |
|---|---|
android:layout_width="match_parent" |
Modifier.fillMaxWidth() |
android:layout_height="match_parent" |
Modifier.fillMaxHeight() |
android:layout_width="wrap_content" |
(Varsayılan davranış, genellikle değiştirici gerekmez) |
android:padding="Xdp" |
Modifier.padding(X.dp) |
android:layout_margin="Xdp" |
Modifier.padding(X.dp) (Dış dolgu) |
android:gravity="center" |
contentAlignment = Alignment.Center (Kutu) veya horizontalAlignment / verticalArrangement (Sütun/Satır) |
android:background="@color/white" |
Modifier.background(colorResource(R.color.white)) |
android:visibility="gone" |
if (visible) { ... } bloğuna sar |
Stilleri taşıma (styles.xml)
XML stilleri, genellikle bir stil oluşturmak için birden fazla özelliği birleştirir. Compose'da bu işlem, belirli bir stile sahip composable varyasyonu oluşturularak yapılır.
Bu bileşenlerin stil ve kullanım alanlarındaki farkı belirtmek için stil ve temel bileşene göre adlandırılmış ayrı @Composable işlevleri sağlayın.
- Desen: Bir XML öğesi özel bir stil kullanıyorsa (ör.
style="@style/MyPrimaryButton"), satır içi stili kopyalamaya çalışmayın. Bunun yerine, belirli bir composable oluşturulmasını önerin. - Örnek:
- XML:
<Button style="@style/MyPrimaryButton" ... /> - Oluştur:
MyPrimaryButton(onClick = { ... })
- XML:
- Ortak Özellik Grupları: Bir stil, ortak değiştiriciler (ör. dolgu + yükseklik) ayarlarsa bunları okunabilir bir uzantı özelliğine veya paylaşılan bir Değiştirici değişkenine çıkarın.