Mevcut bir Görünüm tabanlı uygulamanız varsa kullanıcı arayüzünün tamamı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 bölümüne bakın.
Jetpack Compose en baştan itibaren Görünüm ile birlikte çalışabilirlik özelliğiyle tasarlandı. Bu işlev sayesinde, yeni özellikler oluşturmaya devam ederken mevcut Görünüm tabanlı uygulamanızı Oluştur'a taşıyabilirsiniz. E-posta Yaz'a geçmek için, uygulamanız tamamen Compose'a geçiş yapana kadar kod tabanınızda Oluşturma ve Görünümler'in birlikte kullanıldığı artımlı bir taşıma gerçekleştirmenizi öneririz.
Uygulamanızı Compose'a taşımak için şu adımları uygulayın:
- Oluşturma ile yeni ekranlar oluşturun.
- Özellik oluştururken yeniden kullanılabilir öğeleri tanımlayın ve yaygın kullanıcı arayüzü bileşenlerinden oluşan bir kitaplık oluşturmaya başlayın.
- Mevcut özellikleri teker teker değiştirin.
Oluşturma ile yeni ekranlar oluşturma
E-posta Yaz özelliğini tercih etmenizi sağlamanın en iyi yolu, ekranın tamamını kapsayan yeni özellikler oluşturmak için Oluşturma'yı kullanmaktır. Bu strateji sayesinde, şirketinizin iş ihtiyaçlarını karşılamaya devam ederken özellikler ekleyebilir ve Compose'un avantajlarından yararlanabilirsiniz.
Mevcut uygulamanızda yeni ekranlar oluşturmak için Oluşturma'yı kullandığınızda, uygulamanızın mimarisinin kısıtlamaları altında çalışmaya devam edersiniz. Parçalar ve Gezinme bileşenini kullanıyorsanız yeni bir Parça oluşturmanız ve içeriklerini Oluştur'da bulundurmanız gerekir.
Oluşturma özelliğini bir Parça içinde kullanmak için Parçanızın onCreateView()
yaşam döngüsü yönteminde ComposeView
döndürün. ComposeView
, composable işlev sağlayabileceğiniz bir setContent()
yöntemi sunar.
class NewFeatureFragment : Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View { return ComposeView(requireContext()).apply { setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) setContent { NewFeatureScreen() } } } }
Daha fazla bilgi edinmek için Parçalar halinde Composer Görünümü konusuna bakın.
Mevcut ekranlara yeni özellikler ekleyin
Eklediğiniz yeni özellik mevcut bir ekranın parçasıysa Oluştur'u mevcut bir Görünüme dayalı ekranda da kullanabilirsiniz. Bunu yapmak için Görünüm hiyerarşisine diğer Görünümlerdeki gibi bir ComposeView
ekleyin.
Örneğin, bir LinearLayout
öğesine alt görünüm eklemek istediğinizi düşünelim. Bu işlemi XML'de aşağıdaki
ş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>
Görünüm şişirildikten sonra, hiyerarşide ComposeView
öğesine başvurabilir ve setContent()
öğesini çağırabilirsiniz.
ComposeView
hakkında daha fazla bilgi edinmek için Birlikte Çalışabilirlik API'lerine göz atın.
Yaygın kullanıcı arayüzü bileşenlerinden oluşan bir kitaplık oluşturma
Oluştur ile özellik oluştururken bir bileşen kitaplığının oluşturulduğunu hızla fark edeceksiniz. Yaygın kullanıcı arayüzü bileşenlerinden oluşan bir kitaplık oluşturmak, uygulamanızda bu bileşenler için tek bir doğruluk kaynağına sahip olmanızı ve yeniden kullanılabilirliği teşvik etmenizi sağlar. Derlediğiniz özellikler bu kitaplığa bağlı olabilir. Bu teknik özellikle Compose'da özel tasarım sistemi oluşturuyorsanız faydalı olur.
Uygulamanızın boyutuna bağlı olarak bu kitaplık ayrı bir paket, modül veya kitaplık modülü olabilir. Uygulamanızda modülleri düzenleme hakkında daha fazla bilgi için Android uygulaması modülerleştirme rehberine göz atın.
Oluştur ile mevcut özellikleri değiştirme
Yeni özellikler oluşturmak için Oluşturma'yı kullanmanın yanı sıra, Oluşturma özelliğinden yararlanmak için uygulamanızdaki mevcut özellikleri kademeli olarak taşımak istersiniz.
Uygulamanızın "Yalnızca Yazma" modunda olmasını sağlamak, geliştirme sürecinizi hızlandırabilir ve uygulamanızın APK boyutunu ve derleme sürelerini kısaltabilir. Daha fazla bilgi edinmek için Oluşturma ve Performansı Görüntüleme bölümünü inceleyin.
Basit ekranlar
Mevcut özellikleri Compose'a taşırken bakmanız gereken ilk yerler basit ekranlardır. Basit ekranlar bir karşılama ekranı, onay ekranı veya kullanıcı arayüzünde görüntülenen verilerin görece statik olduğu bir ayar ekranı olabilir.
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>
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)) } } }
Karma görünüm ve Oluşturma ekranları
Hâlihazırda birkaç tane 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 bunu tamamen Oluştur'a taşıyabilir veya parça parça yapabilirsiniz. Ekran, kullanıcı arayüzü hiyerarşisinin bir alt ağacında Oluştur ile başlıyorsa ekranın tamamı Oluştur'a gelinceye dek kullanıcı arayüzü öğelerini taşımaya devam edersiniz. Bu yaklaşıma aşağıdan yukarıya yaklaşım da denir.
Parçalar ve Gezinme bileşenini Kaldırma
Tüm Fragment'larınızı kaldırıp ilgili ekran düzeyinde composable'larla değiştirebildiğinizde Gezinme Oluşturma'ya geçiş yapabilirsiniz. Ekran düzeyindeki composable'lar, Oluşturma ve Görüntüleme içeriklerinin bir karışımını içerebilir ancak Navigation Compose taşıma işlemini etkinleştirmek için tüm gezinme hedeflerinin composable'lar olması gerekir. O zamana kadar, karma Görünüm ve Oluşturma kod tabanınızda Parçaya Dayalı Gezinme bileşenini kullanmaya devam etmeniz gerekir. Daha fazla bilgi için Jetpack Gezinmesini Navigation Compose'a taşıma konusuna bakın.
Ek kaynaklar
Görünüm tabanlı mevcut 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 örnek uygulamasının bitlerini Compose'a nasıl taşıyacağınızı öğrenin.
- Örnek
- Sunflower: Hem Görüntüle hem de Oluştur kodunu içeren Sunflower örnek uygulamasının kodunu derinlemesine inceleyin.
- Blog yayınları
- Sunflower'ı Jetpack Compose'a taşıma: Bu sayfada açıklanan stratejiyi kullanarak Sunflower'ın Compose'a nasıl taşındığını öğrenin.
- Jetpack Compose Interop: RecyclerView'da Compose'u kullanma:
Compose'u
RecyclerView
içinde verimli şekilde nasıl kullanacağınızı öğrenin.
Sonraki adımlar
Mevcut Görüntüleme tabanlı uygulamanızı taşımak için hangi stratejiyi uygulayabileceğinizi öğrendiğinize göre artık daha fazla bilgi edinmek için Birlikte Çalışabilirlik API'lerine göz atabilirsiniz.
Sizin için önerilenler
- Not: Bağlantı metni JavaScript kapalıyken görüntülenir
- Görünümler'de Oluşturma Özelliğini Kullanma
- Kaydırma
RecyclerView
öğesini geç listeye taşıyın