Taşıma stratejisi

Mevcut bir View tabanlı uygulamanız varsa, uygulamanın tamamını yeniden yazmak istemeyebilirsiniz. Kullanıcı arayüzü. Bu sayfa, kampanyanıza yeni Compose bileşenleri eklemenize yardımcı olur. kullanabilirsiniz. Uygulamanızda Compose'u kullanmaya başlamak için Oluştur'u ayarlama başlıklı makaleye göz atın. mevcut bir uygulama için.

Jetpack Compose, daha en baştan View birlikte çalışabilirlik özelliğiyle tasarlandı. Bu işlev, mevcut Görünüm tabanlı uygulamanızı Compose'a taşıyabileceğiniz anlamına gelir bir yandan da yeni özellikler geliştirmeye devam edebilir. Compose'a taşıma işlemini Oluştur ve Görünümlerin mevcut dizinde bir arada bulunduğu artımlı uygulamanız tamamen Compose'da kullanıma sunulana kadar kod tabanınızı kullanmayın.

Şekil 1. View tabanlı bir uygulamanın Compose'a taşıma sürecinin aşamaları

'nı inceleyin.

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

1. Compose ile yeni ekranlar oluşturun.
2. Özellikler oluştururken, yeniden kullanılabilir öğeleri belirleyin ve kitaplığını oluşturur.
3. Mevcut özellikleri tek seferde bir ekranla değiştirin.

Compose ile yeni ekranlar oluşturun

Ekranın tamamını kaplayan yeni özellikler oluşturmak için Oluştur'u kullanmak, en iyi uygulamaları paylaşacağız. Bu stratejiyle, müşterilerinize ve kitlenizin ilgi alanlarına hitap etmeye devam ederken Compose'un avantajlarından iş gereksinimleri.

Şekil 2. Compose'da yeni bir ekran

'nı inceleyin.

Mevcut uygulamanızda yeni ekranlar oluşturmak için Oluştur'u kullandığınızda uygulamanızın mimarisinin kısıtlamaları altında çalışma Şunu kullanıyorsanız: bileşenleri ve Gezinme bileşenini tanımlarsanız, bu durumda yeni bir Parça ve içeriklerini Compose'da bulabilirsiniz.

Bir Parçada Oluştur özelliğini kullanmak için bir Parçada ComposeView değerini döndürün Parçanızın onCreateView() yaşam döngüsü yöntemi. ComposeView bir composable işlev sağlayabileceğiniz setContent() yöntemi.

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. Karma Görünümler ve Oluşturma özelliklerini kullanan mevcut bir ekran

'nı inceleyin.

Oluşturduğunuz yeni özellik, mevcut bir Görünüm tabanlı ekranda da mevcut bir ekranın bir parçası. Bunu yapmak içinComposeView Hiyerarşiyi tıpkı diğer Görünümler gibi görüntüleyebilirsiniz.

Örneğin, bir LinearLayout öğesine alt görünüm eklemek istediğinizi düşünelim. Bu sayede aşağıdaki gibi XML'dedir:

<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 şişirildikten sonra ComposeView öğesine başvurabilirsiniz: sıralayıp setContent() yöntemini çağırın.

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

Ortak kullanıcı arayüzü bileşenlerinden oluşan bir kitaplık derleme

Besteleme özelliğiyle özellik geliştirirken, elinizin altında olduğunu fark edeceksiniz. oluşturmaya karar verebiliriz. Ortak kullanıcı arayüzü bileşenleri kitaplığı oluşturma uygulamanızda bu bileşenler için tek bir doğruluk kaynağına sahip olmanızı sağlar. teşvik etmek sizin görevinizdir. Derlediğiniz özellikler bu kitaplığa bağlı olabilir. Bu bu teknik özellikle, bir web sitesinde özel tasarım sistemi Oluştur'u tıklayın.

Uygulamanızın boyutuna bağlı olarak bu kitaplık ayrı bir paket, modül veya veya kitaplık modülünü kullanabilirsiniz. Uygulamanızdaki modülleri düzenleme hakkında daha fazla bilgi için Android uygulama modülerleştirme rehberi başlıklı makaleyi inceleyin.

Mevcut özellikleri Oluştur ile değiştir

Yeni özellikler oluşturmak için Oluşturma'yı kullanmanın yanı sıra, Uygulamanızdaki mevcut özellikleri taşıyarak Compose'dan yararlanabilirsiniz.

Uygulamanızın yalnızca Composer olmasını sağlamak, geliştirme sürecinizi hızlandırabilir uygulamanızın APK boyutunu ve derleme sürelerini küçültün. Oluşturma ve Görüntüleme Karşılaştırması'nı inceleyin. performansı başlıklı makaleyi inceleyin.

Not: İşlem sırasında regresyon kullanmadığınızdan emin olmak için kullanıcı arayüzü testinden yararlanın. taşıma. Uygulamaları Android'de test etme ve Oluşturma düzeninizi test etme konularına bakın. kullanıcı arayüzü testi hakkında daha fazla bilgi edinin.

Basit ekranlar

Mevcut özellikleri Compose'a taşırken bakacağınız ilk yerler basittir ekranları. Basit ekranlar; karşılama ekranı, onay ekranı veya kullanıcı arayüzünde görüntülenen verilerin nispeten statik olduğu bir ayar ekranı.

Aşağıdaki XML dosyasını alın:

<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ır içinde 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 Oluşturma ekranları

Biraz Oluştur kodu içeren bir ekran başka bir iyi adaydır taşımanın ilk adımıdır. Ekranın karmaşıklığına bağlı olarak, bunu tamamen Compose'a taşıyabilir veya her parçayı ayrı ayrı yapabilirsiniz. Öğe kullanıcı arayüzü hiyerarşisinin bir alt ağacında bulunan Oluştur ile başladığında devam edersiniz, kullanıcı arayüzü öğelerini taşımaya devam edebilir. Bu yaklaşım aşağıdan yukarıya yaklaşım olarak da adlandırılır.

Şekil 4. Karma Görünümler ve Oluşturma kullanıcı arayüzünü Compose'a taşımaya yönelik aşağıdan yukarı yaklaşım

'nı inceleyin.

Parçaları ve Gezinme bileşenini kaldırma

Tüm özellikleri kaldırdıktan sonra Gezinme Yazma Sihirbazı'na geçebilirsiniz. parçalarınızı ekran düzeyinde karşılık gelen composable'larla değiştirin. Ekran düzeyi composable'lar Oluştur ve Görüntüle içeriklerinin bir karışımını içerebilir, ancak hepsi Gezinme Oluşturma Aracı'nın etkinleştirilmesi için gezinme hedeflerinin composables olması gerekir taşıma. O zamana kadar Karma Görünüm ve Oluştur işlemlerinizde Parça tabanlı Gezinme bileşeni kullanabilirsiniz. Jetpack Gezinme'yi Gezinme Oluşturmaya Taşıma başlıklı makaleye göz atın: daha fazla bilgi edinin.

Not: "Yalnızca Yazma" uygulamasında Gezinme bölümünde gezinme özelliğinin kullanılması bir ön koşul değildir. Siz Parça tabanlı Gezinme bileşenini kullanmaya devam edebilir, oluşturulabilir içeriklerinizi barındırmak için Parça'ları kullanmaya devam edebilirsiniz.

Ek kaynaklar

Verilerinizi taşıma hakkında daha fazla bilgi edinmek için aşağıdaki ek Oluşturmak için mevcut Görünüm tabanlı uygulamayı:

• Kod Laboratuvarı
  • Jetpack Compose'a geçiş: Sunflower'ın parçalarını taşımayı öğrenin uygulamasını göstereceğim.
• Blog yayınları
  • Sunflower'ı Jetpack Compose'a taşıma: Nasıl yapılacağını öğrenin Sunflower, bu sayfada açıklanan strateji kullanılarak Compose'a taşındı.
  • Jetpack Compose Interop: Compose'u RecyclerView'da kullanma: RecyclerView uygulamasında Oluştur'u etkili bir şekilde nasıl kullanacağınızı öğrenin.

Sonraki adımlar

Artık mevcut Görüntüleme tabanlı verilerinizi taşımak için uygulayabileceğiniz stratejiyi uygulamasında hakkında daha fazla bilgi edinmek için Birlikte çalışabilirlik API'lerini inceleyin.