Oluşturma tabanlı kullanıcı arayüzünü, Görünüm tabanlı tasarım kullanan mevcut bir uygulamaya ekleyebilirsiniz.
Tamamen Compose tabanlı yeni bir ekran oluşturmak için
etkinliği setContent()
yöntemini çağırır ve composable işlevlerini
hoş geldiniz.
class ExampleActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { // In here, we can call composables! MaterialTheme { Greeting(name = "compose") } } } } @Composable fun Greeting(name: String) { Text(text = "Hello $name!") }
Bu kod, yalnızca Composer uygulamasında bulabileceğiniz koda benzer.
ComposeView
için ViewCompositionStrategy
ViewCompositionStrategy
Bestenin ne zaman atılması gerektiğini tanımlar. Varsayılan,
ViewCompositionStrategy.Default
besteyi talep eden
ComposeView
gibi bir havuz kapsayıcısının parçası olmadıkça pencereden ayrılır.
RecyclerView
. Tek Etkinlikli E-posta Yazma uygulamasında bu varsayılan davranış
Ancak, Gmail'e ekleyecekseniz
bu davranış bazı senaryolarda durum kaybına neden olabilir.
ViewCompositionStrategy
ayarını değiştirmek için setViewCompositionStrategy()
numaralı telefonu arayın
ve farklı bir strateji sunar.
Aşağıdaki tabloda, kullanabileceğiniz farklı senaryolar özetlenmektedir:
ViewCompositionStrategy
içinde:
ViewCompositionStrategy |
Açıklama ve Birlikte Çalışabilirlik Senaryosu |
---|---|
DisposeOnDetachedFromWindow |
Temeldeki ComposeView pencereden çıkarıldığında Beste atılır. Bu alanın yerini DisposeOnDetachedFromWindowOrReleasedFromPool aldı.Birlikte senaryo: * ComposeView İster Görünüm hiyerarşisindeki tek öğe ister karma bir Görüntüle/Oluştur ekranı bağlamında (Parça içinde değil) olsun. |
DisposeOnDetachedFromWindowOrReleasedFromPool (Varsayılan) |
Beste, RecyclerView gibi bir havuz kapsayıcıda olmadığında DisposeOnDetachedFromWindow işlevine benzer. Bir havuz kapsayıcısındaysa havuz kapsayıcısının kendisi pencereden ayrıldığında veya öğe silindiğinde (ör. havuz dolduğunda) ortadan kalkar.Etkileşim senaryosu: * ComposeView bu öğenin Görünüm hiyerarşisindeki tek öğe olması veya karma bir Görüntüleme/Oluşturma ekranı bağlamında (Parça içinde değil) olması durumunda geçerlidir.* ComposeView , RecyclerView gibi bir havuz kapsayıcısında öğe olarak kullanılır. |
DisposeOnLifecycleDestroyed |
Sağlanan Lifecycle imha edildiğinde Beste yok edilecek.Birlikte çalışabilirlik senaryosu * Bir Parça Görünümünde ComposeView . |
DisposeOnViewTreeLifecycleDestroyed |
LifecycleOwner öğesine ait Lifecycle , Görünümün ekli olduğu bir sonraki pencereden ViewTreeLifecycleOwner.get tarafından geri döndürüldüğünde Beste atılır.Birlikte senaryo: * Bir Parçanın Görünümünde ComposeView .* Yaşam döngüsünün henüz bilinmediği bir görünümde ComposeView . |
Parçalar halinde ComposeView
Oluşturma kullanıcı arayüzü içeriğini bir parçaya veya mevcut bir görünüme dahil etmek istiyorsanız
düzen için ComposeView
kullanın
ve ona
setContent()
yöntemidir. ComposeView
bir Android View
.
ComposeView
öğesini, diğer herhangi bir View
gibi XML düzeninize yerleştirebilirsiniz:
<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>
Kotlin kaynak kodunda, düzeni düzenden şişirin
kaynak XML'de tanımlanmıştır. Daha sonra
ComposeView
seçeneğini belirlemek için şunun için en uygun Beste stratejisini ayarlayın:
ana makine View
ve Oluştur özelliğini kullanmak için setContent()
yöntemini çağırın.
class ExampleFragmentXml : Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View { val view = inflater.inflate(R.layout.fragment_example, container, false) val composeView = view.findViewById<ComposeView>(R.id.compose_view) composeView.apply { // Dispose of the Composition when the view's LifecycleOwner // is destroyed setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) setContent { // In Compose world MaterialTheme { Text("Hello Compose!") } } } return view } }
Alternatif olarak,
XML düzen dosyanız için oluşturulan bağlama sınıfına başvurarak ComposeView
:
class ExampleFragment : Fragment() { private var _binding: FragmentExampleBinding? = null // This property is only valid between onCreateView and onDestroyView. private val binding get() = _binding!! override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View { _binding = FragmentExampleBinding.inflate(inflater, container, false) val view = binding.root binding.composeView.apply { // Dispose of the Composition when the view's LifecycleOwner // is destroyed setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) setContent { // In Compose world MaterialTheme { Text("Hello Compose!") } } } return view } override fun onDestroyView() { super.onDestroyView() _binding = null } }
Şekil 1. Bu,
Kullanıcı arayüzü hiyerarşisini görüntüleyin. "Merhaba Android!" metin bir
TextView
widget'ı. "Merhaba Yazma!" metin bir
Metin öğesi oluşturun.
Tam ekranınız açıksa ComposeView
öğesini doğrudan bir parçaya da ekleyebilirsiniz
XML düzen dosyasını tamamen kullanmaktan kaçınmanızı sağlayan Compose ile oluşturulmuştur.
class ExampleFragmentNoXml : Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View { return ComposeView(requireContext()).apply { // Dispose of the Composition when the view's LifecycleOwner // is destroyed setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) setContent { MaterialTheme { // In Compose world Text("Hello Compose!") } } } } }
Aynı düzende birden fazla ComposeView
örneği
Aynı düzende birden fazla ComposeView
öğesi varsa her birinin
savedInstanceState
için benzersiz bir kimliğe sahip olmalıdır.
class ExampleFragmentMultipleComposeView : Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View = LinearLayout(requireContext()).apply { addView( ComposeView(requireContext()).apply { setViewCompositionStrategy( ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed ) id = R.id.compose_view_x // ... } ) addView(TextView(requireContext())) addView( ComposeView(requireContext()).apply { setViewCompositionStrategy( ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed ) id = R.id.compose_view_y // ... } ) } }
ComposeView
kimlikleri res/values/ids.xml
dosyasında tanımlanır:
<resources> <item name="compose_view_x" type="id" /> <item name="compose_view_y" type="id" /> </resources>
Düzen Düzenleyici'de composable'ları önizleyin
XML düzeniniz için Düzen Düzenleyici'de composable'ların önizlemesini de yapabilirsiniz.
ComposeView
içerir. Bu sayede composable'larınızın nasıl göründüğüne bakabilirsiniz.
bir görünüm oluşturabilirsiniz.
Düzen Düzenleyici'de aşağıdaki composable'ı görüntülemek istediğinizi düşünelim. Not
@Preview
ile ek açıklama eklenen composable'ların önizleme için iyi adaylar olduğunu
Düzen Düzenleyici.
@Preview @Composable fun GreetingPreview() { Greeting(name = "Android") }
Bu composable'ı görüntülemek için tools:composableName
araçları özelliğini kullanın ve
değerini
kullanır.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.compose.ui.platform.ComposeView android:id="@+id/my_compose_view" tools:composableName="com.example.compose.snippets.interop.InteroperabilityAPIsSnippetsKt.GreetingPreview" android:layout_height="match_parent" android:layout_width="match_parent"/> </LinearLayout>
Sonraki adımlar
Artık Görünümler'de Compose'u birlikte kullanabileceğiniz birlikte çalışabilirlik API'lerini öğrendiğinize göre Oluşturma'da Görünümler'in nasıl kullanılacağını öğrenin.
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Diğer noktalar
- Taşıma stratejisi {:#migration-strategy}
- Oluşturma ve Görüntüleme performansını karşılaştırma