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

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ğinizin setContent() yöntemini çağırmasını sağlayın ve istediğiniz composable işlevlerini 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 Composer uygulamasında bulabileceğiniz koda benzer.

ComposeView için ViewCompositionStrategy

ViewCompositionStrategy, bestenin ne zaman imha edilmesi gerektiğini tanımlar. Varsayılan değer olan ViewCompositionStrategy.Default, RecyclerView gibi bir havuz container'ının parçası olmadığı sürece temel ComposeView pencereden ayrıldığında Beste'yi ortadan kaldırır. Yalnızca tek Etkinlikli Yazma türündeki bir uygulamada bu varsayılan davranış tercih edilir. Ancak, kod tabanınıza kademeli olarak Compose'u ekliyorsanız bu davranış bazı senaryolarda durum kaybına neden olabilir.

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

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

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ı gerekir.
* 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üm düzenine dahil etmek istiyorsanız ComposeView öğesini kullanın ve setContent() yöntemini çağırın. 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>
migration_strategy_existing_screens.xml

Kotlin kaynak kodunda, XML'de tanımlanan düzen kaynağından düzeni artırın. Ardından XML kimliğini kullanarak ComposeView öğesini alın, View ana makinesi için en uygun Beste stratejisini ayarlayın ve Compose'u kullanmak için setContent() çağrısı yapı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 öğesine referanslar almak için 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

Biri diğerinin üzerinde olmak üzere biraz farklı iki metin öğesi

Şekil 1. Görünüm kullanıcı arayüzü hiyerarşisine Compose öğeleri ekleyen kodun çıkışını gösterir. "Merhaba Android!" metni, bir TextView widget'ı ile gösterilir. "Merhaba Yazma!" metni, bir Compose metin öğesi tarafından görüntülenir.

Tam ekranınız Oluştur ile oluşturulduysa doğrudan bir parçaya ComposeView ekleyebilirsiniz. Böylece XML düzen dosyası kullanmaktan tamamen kaçınabilirsiniz.

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'ın çalışması için her biri 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
                // ...
            }
        )
    }
}
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üzen Düzenleyici'de composable'ları önizleyin

Ayrıca, ComposeView içeren XML düzeniniz için Düzen Düzenleyici'de composable'ları önizleyebilirsiniz. Bu sayede composable'larınızın karma Görünümler ve Oluşturma düzeninde nasıl göründüğünü görebilirsiniz.

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

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

Bu composable'ı görüntülemek için tools:composableName araçları özelliğini kullanın ve değerini, düzende önizlenecek composable'ın tam 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

Düzen düzenleyicisinde gösterilen derlenebilir özellik

Sonraki adımlar

Artık Görünümler'de Compose'u birlikte kullanabileceğiniz birlikte çalışabilirlik API'lerini öğrendiğinize göre Compose'da Görünümler'i nasıl kullanacağınızı öğrenebilirsiniz.