Görünümler'de Oluşturma'yı kullanma

Not: Birlikte çalışabilirlik, Compose ve Görünüm'leri kullanan karma uygulamalarda desteklenir. Yalnızca Compose'da bulunan uygulamalar için tek bir Activity ve Navigation 3 gibi en yeni gezinme kitaplıklarını içeren, yalnızca Compose'a özel önerilen mimariyi kullanın.

Görünüm tabanlı tasarım kullanan mevcut bir uygulamaya Compose tabanlı kullanıcı arayüzü ekleyebilirsiniz.

Tamamen Compose tabanlı yeni bir ekran oluşturmak için etkinliğinizin setContent() yöntemini çağırmasını sağlayın ve istediğiniz composable işlevleri iletin.

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!")
}
InteroperabilityAPIsSnippets.kt

Bu kod, yalnızca Compose kullanılan bir uygulamada göreceğiniz koda benzer.

Dikkat: ComponentActivity.setContent yöntemini kullanmak için androidx.activity:activity-compose:$latestVersion bağımlılığını build.gradle dosyanıza ekleyin.

En yeni sürümü öğrenmek için Etkinlik sürümleri sayfasını inceleyin.

ComposeView için ViewCompositionStrategy

ViewCompositionStrategy, oluşturmanın ne zaman silineceğini tanımlar. Varsayılan değer olan ViewCompositionStrategy.Default, temel ComposeView pencereden ayrıldığında oluşturmayı siler. Ancak RecyclerView gibi bir havuz kapsayıcısının parçasıysa silmez. Yalnızca Compose kullanılan tek etkinlikli bir uygulamada bu varsayılan davranış, istediğiniz davranıştır. Ancak kod tabanınıza kademeli olarak Compose ekliyorsanız bu davranış, bazı senaryolarda durum kaybına neden olabilir.

ViewCompositionStrategy değiştirmek için setViewCompositionStrategy() yöntemini çağırın ve farklı bir strateji sağlayın.

Aşağıdaki tabloda, ViewCompositionStrategy kullanabileceğiniz farklı senaryolar özetlenmiştir:

ViewCompositionStrategy	Açıklama ve Birlikte Çalışma Senaryosu
DisposeOnDetachedFromWindow	Temel ComposeView pencereden ayrıldığında oluşturma işlemi silinir. Bu API'nin yerini DisposeOnDetachedFromWindowOrReleasedFromPool aldı. Birlikte çalışabilirlik senaryosu: * ComposeView Görünüm hiyerarşisindeki tek öğe mi yoksa karma bir Görünüm/Compose ekranı bağlamında mı (Fragment'ta değil) kullanıldığı.
DisposeOnDetachedFromWindowOrReleasedFromPool (Varsayılan)	DisposeOnDetachedFromWindow ile benzer şekilde, oluşturma işlemi RecyclerView gibi bir havuz kapsayıcısında olmadığında. Havuz kapsayıcısındaysa havuz kapsayıcısının kendisi pencereden ayrıldığında veya öğe atıldığında (ör. havuz dolduğunda) silinir. Birlikte çalışabilirlik senaryosu: * ComposeView Görünüm hiyerarşisindeki tek öğe olup olmadığı veya karma bir Görünüm/Oluşturma ekranı bağlamında (Fragment'ta değil) olup olmadığı. * ComposeView, RecyclerView gibi bir havuz kapsayıcısında öğe olarak.
DisposeOnLifecycleDestroyed	Oluşturma, sağlanan Lifecycle yok edildiğinde silinir. Birlikte çalışabilirlik senaryosu * Bir Fragment'ın görünümünde ComposeView.
DisposeOnViewTreeLifecycleDestroyed	Oluşturma, Görünüm'ün bağlı olduğu bir sonraki pencerenin ViewTreeLifecycleOwner.get tarafından döndürülen LifecycleOwner tarafından sahip olunan Lifecycle yok edildiğinde silinir. Birlikte çalışabilirlik senaryosu: * Bir Parça Görünümü'nde ComposeView. * Yaşam döngüsünün henüz bilinmediği bir görünümde ComposeView.

ComposeView, Parçalar'da (Geçiş Adımı)

Not: Parçalar kullanan, Görünümler ve Oluşturma içeren karma uygulamalarda, oluşturulabilir öğelerin içeriğini sarmalamak ve taşıma sırasında bir parçaya eklemek için ComposeView kullanın. Yalnızca Compose kullanan uygulamalarda Fragment'ları kullanmayın. Bunun yerine, tek bir Activity ve Navigation 3 gibi en yeni gezinme kitaplıklarını içeren, yalnızca Compose kullanan önerilen mimariyi kullanın.

Compose kullanıcı arayüzü içeriğini bir parçaya veya mevcut bir görünüm düzenine dahil etmek istiyorsanız ComposeView sınıfını kullanın ve setContent() yöntemini çağırın. ComposeView, Android View.

ComposeView öğesini, diğer View öğeleri 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>
migration_strategy_existing_screens.xml

Kotlin kaynak kodunda, XML'de tanımlanan düzen kaynağından düzeni şişirin. Ardından XML kimliğini kullanarak ComposeView öğesini alın, ana makine View için en uygun oluşturma stratejisini ayarlayın ve Compose'u 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
    }
}
InteroperabilityAPIsSnippets.kt

Alternatif olarak, XML düzen dosyanız için oluşturulan bağlama sınıfına başvurarak ComposeView referanslarını almak üzere görünüm bağlamayı da kullanabilirsiniz:

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
    }
}
InteroperabilityAPIsSnippets.kt

Şekil 1. Bu, View kullanıcı arayüzü hiyerarşisine Compose öğeleri ekleyen kodun çıkışını gösterir. "Hello Android!" metni bir TextView widget'ı tarafından gösterilir. "Hello Compose!" metni, Compose metin öğesi tarafından gösterilir.

Tam ekranınız Compose ile oluşturulmuşsa doğrudan bir parçaya ComposeView da ekleyebilirsiniz. Bu sayede XML düzen dosyası kullanmanıza gerek kalmaz.

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!")
                }
            }
        }
    }
}
InteroperabilityAPIsSnippets.kt

Aynı düzende birden fazla ComposeView örneği

Aynı düzende birden fazla ComposeView öğesi varsa savedInstanceState özelliğinin çalışması için her birinin benzersiz bir kimliği 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
                // ...
            }
        )
    }
}
InteroperabilityAPIsSnippets.kt

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>
ids.xml

Düzenleyici'de composable'ları önizleme

ComposeView içeren XML düzeniniz için Düzenleyici'de birleştirilebilir öğeleri de önizleyebilirsiniz. Böylece, composable'larınızın karma bir Görünüm ve Oluşturma düzeninde nasıl göründüğünü görebilirsiniz.

Aşağıdaki composable'ı Düzenleyici'de görüntülemek istediğinizi varsayalım. @Preview ile ek açıklama eklenen composable'ların, Düzen Düzenleyici'de önizleme için iyi birer aday olduğunu unutmayın.

@Preview
@Composable
fun GreetingPreview() {
    Greeting(name = "Android")
}
InteroperabilityAPIsSnippets.kt

Bu composable'ı görüntülemek için tools:composableName araç özelliğini kullanın ve değerini, düzende önizlenecek composable'ın tam nitelikli adına ayarlayın.

<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>
interop_layout_preview_composable.xml