Taşıma stratejisi

Mevcut bir görünüm tabanlı uygulamanız varsa tüm kullanıcı arayüzünü tek seferde yeniden yazmak istemeyebilirsiniz. Bu sayfa, mevcut uygulamanıza yeni Compose bileşenleri eklemenize yardımcı olur. Uygulamanızda Compose'u kullanmaya başlamak için Mevcut bir uygulama için Compose'u ayarlama başlıklı makaleyi inceleyin.

Jetpack Compose, en başından itibaren View ile birlikte çalışabilecek şekilde tasarlanmıştır. Bu işlev sayesinde, mevcut Görünüm tabanlı uygulamanızı Compose'a taşıyabilir ve yeni özellikler oluşturmaya devam edebilirsiniz. Compose'a geçiş için, uygulamanız tamamen Compose'a geçene kadar kod tabanınızda Compose ve Görünümler'in bir arada bulunduğu aşamalı bir geçiş öneririz.

Şekil 1. Görünüm tabanlı bir uygulamanın Compose'a taşınma aşamaları

Uygulamanızı Compose'a taşımak için aşağıdaki adımları uygulayın:

1. Compose ile yeni ekranlar oluşturma
2. Özellikleri oluştururken yeniden kullanılabilir öğeleri belirleyin ve ortak kullanıcı arayüzü bileşenlerinden oluşan bir kitaplık oluşturmaya başlayın.
3. Mevcut özellikleri her seferinde bir ekran olacak şekilde değiştirin.

Compose ile yeni ekranlar oluşturma

Compose'u benimsemenin en iyi yolu, tüm ekranı kapsayan yeni özellikler oluşturmak için Compose'u kullanmaktır. Bu stratejiyle, şirketinizin işletme ihtiyaçlarını karşılamaya devam ederken özellikler ekleyebilir ve Compose'un avantajlarından yararlanabilirsiniz.

Şekil 2. Compose ile yazılmış yeni bir ekran

Mevcut uygulamanızda yeni ekranlar oluşturmak için Compose'u kullandığınızda uygulamanızın mimarisinin kısıtlamaları altında çalışmaya devam edersiniz. Fragment'ları ve Gezinme bileşenini kullanıyorsanız yeni bir Fragment oluşturmanız ve içeriğini Compose'da oluşturmanız gerekir.

Compose'u bir Fragment'ta kullanmak için Fragment'ınızın onCreateView() yaşam döngüsü yönteminde bir ComposeView döndürün. ComposeView, composable işlev sağlayabileceğiniz bir setContent() yöntemine sahiptir.

class NewFeatureFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                NewFeatureScreen()
            }
        }
    }
}
MigrationStrategySnippets.kt

Daha fazla bilgi edinmek için Parçalarda ComposeView bölümüne bakın.

Mevcut ekranlara yeni özellikler ekleme

Şekil 3. Görünümler ve Compose'un bir arada kullanıldığı mevcut bir ekran

Eklediğiniz yeni özellik mevcut bir ekranın parçasıysa Compose'u mevcut bir görünüm tabanlı ekranda da kullanabilirsiniz. Bunu yapmak için görünüm hiyerarşisine diğer görünümler gibi bir ComposeView ekleyin.

Örneğin, bir LinearLayout öğesine çocuk ekranı eklemek istediğinizi varsayalım. Bunu XML'de şu şekilde yapabilirsiniz:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

  <androidx.compose.ui.platform.ComposeView
      android:id="@+id/compose_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
</LinearLayout>
migration_strategy_existing_screens.xml

Görünüm genişletildikten sonra hiyerarşideki ComposeView öğesine başvurabilir ve setContent() yöntemini çağırabilirsiniz.

ComposeView hakkında daha fazla bilgi edinmek için Birlikte Çalışabilirlik API'leri başlıklı makaleyi inceleyin.

Sık kullanılan kullanıcı arayüzü bileşenlerinden oluşan bir kitaplık oluşturma

Compose ile özellikler oluştururken kısa sürede bir bileşen kitaplığı oluşturduğunuzu fark edeceksiniz. Ortak kullanıcı arayüzü bileşenlerinden oluşan bir kitaplık oluşturmak, uygulamanızdaki bu bileşenler için tek bir doğruluk kaynağına sahip olmanızı ve yeniden kullanılabilirliği teşvik etmenizi sağlar. Geliştirdiğiniz özellikler bu kitaplığa bağlı olabilir. Bu teknik, özellikle Compose'da özel bir tasarım sistemi oluşturuyorsanız kullanışlıdır.

Uygulamanızın boyutuna bağlı olarak bu kitaplık ayrı bir paket, modül veya kitaplık modülü olabilir. Uygulamanızdaki modülleri düzenleme hakkında daha fazla bilgi için Android uygulamalarını modüllere ayırma kılavuzunu inceleyin.

Mevcut özellikleri Compose ile değiştirme

Yeni özellikler oluşturmak için Compose'u kullanmanın yanı sıra, Compose'un avantajlarından yararlanmak için uygulamanızdaki mevcut özellikleri kademeli olarak taşımanız gerekir.

Uygulamanızda yalnızca Compose kullanmak, geliştirme sürecinizi hızlandırabilir, APK boyutunu küçültebilir ve uygulamanızın derleme sürelerini kısaltabilir. Daha fazla bilgi için Compose ve View performansını karşılaştırma başlıklı makaleyi inceleyin.

Not: Geçiş sırasında gerilemelere neden olmadığınızdan emin olmak için kullanıcı arayüzü testinden yararlanın. Kullanıcı arayüzü testi hakkında daha fazla bilgi edinmek için Android'de uygulamaları test etme ve Compose düzeninizi test etme başlıklı makaleleri inceleyin.

Basit ekranlar

Mevcut özellikleri Compose'a taşırken bakmanız gereken ilk yerler basit ekranlardır. Basit ekranlar; karşılama ekranı, onay ekranı veya kullanıcı arayüzünde gösterilen verilerin nispeten statik olduğu bir ayar ekranı olabilir.

Aşağıdaki XML dosyasını ele alalım:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:id="@+id/title_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/title"
      android:textAppearance="?attr/textAppearanceHeadline2" />

  <TextView
      android:id="@+id/subtitle_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/subtitle"
      android:textAppearance="?attr/textAppearanceHeadline6" />

  <TextView
      android:id="@+id/body_text"
      android:layout_width="wrap_content"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:text="@string/body"
      android:textAppearance="?attr/textAppearanceBody1" />

  <Button
      android:id="@+id/confirm_button"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="@string/confirm"/>
</LinearLayout>
migration_strategy_xml_example.xml

XML dosyası, Compose'da birkaç satırda yeniden yazılabilir:

@Composable
fun SimpleScreen() {
    Column(Modifier.fillMaxSize()) {
        Text(
            text = stringResource(R.string.title),
            style = MaterialTheme.typography.headlineMedium
        )
        Text(
            text = stringResource(R.string.subtitle),
            style = MaterialTheme.typography.headlineSmall
        )
        Text(
            text = stringResource(R.string.body),
            style = MaterialTheme.typography.bodyMedium
        )
        Spacer(modifier = Modifier.weight(1f))
        Button(onClick = { /* Handle click */ }, Modifier.fillMaxWidth()) {
            Text(text = stringResource(R.string.confirm))
        }
    }
}
MigrationStrategySnippets.kt

Karma görünüm ve Compose ekranları

Zaten bir miktar Compose kodu içeren bir ekran da tamamen Compose'a geçiş için iyi bir adaydır. Ekranın karmaşıklığına bağlı olarak ekranı tamamen Compose'a taşıyabilir veya parça parça taşıyabilirsiniz. Ekran, kullanıcı arayüzü hiyerarşisinin bir alt ağacında Compose ile başladıysa tüm ekran Compose'da olana kadar kullanıcı arayüzü öğelerini taşımaya devam edersiniz. Bu yaklaşım, aşağıdan yukarıya yaklaşım olarak da adlandırılır.

Şekil 4. Karma Görünümler ve Compose kullanıcı arayüzünü Compose'a taşımak için aşağıdan yukarıya yaklaşım

Fragment'ları ve gezinme bileşenini kaldırma

Tüm Fragment'larınızı kaldırıp ilgili ekran düzeyindeki composable'larla değiştirebildiğinizde Navigation Compose'a geçebilirsiniz. Ekran düzeyindeki composable'lar Compose ve görünüm içeriğinin bir karışımını içerebilir ancak Navigation Compose taşıma işlemini etkinleştirmek için tüm gezinme hedefleri composable olmalıdır. Bu tarihe kadar, karma görünüm ve Compose kod tabanınızda parça tabanlı gezinme bileşenini kullanmaya devam etmeniz gerekir. Daha fazla bilgi için Jetpack Navigation'ı Navigation Compose'a taşıma başlıklı makaleyi inceleyin.

Not: Parçaya dayalı bir Gezinme bileşeniyle oluşturulabilir içerik barındırmak için parçaları kullanmaya devam edebilirsiniz ancak Compose öncelikli bir mimari için önerilen nihai hedef, parçaları tamamen Gezinme Compose tarafından yönetilen ekran düzeyinde composable öğelerle değiştirmektir.

Ek kaynaklar

Mevcut görünüm tabanlı uygulamanızı Compose'a taşıma hakkında daha fazla bilgi edinmek için aşağıdaki ek kaynaklara göz atın:

• Codelab
  • Jetpack Compose'a geçiş: Bu codelab'de Sunflower uygulamasının parçalarını Compose'a nasıl taşıyacağınızı öğrenin.
• Blog yayınları
  • Sunflower'ı Jetpack Compose'a taşıma: Sunflower'ın bu sayfada açıklanan strateji kullanılarak Compose'a nasıl taşındığını öğrenin.
  • Jetpack Compose birlikte çalışabilirliği: RecyclerView'da Compose'u kullanma: RecyclerView içinde Compose'u performanslı bir şekilde nasıl kullanacağınızı öğrenin.

Sonraki adımlar

Mevcut görünüm tabanlı uygulamanızı taşımak için kullanabileceğiniz stratejiyi öğrendiğinize göre, daha fazla bilgi edinmek için Birlikte Çalışabilirlik API'lerini inceleyin.