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 tüm derlenebilir 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 Oluştur moduna sahip bir uygulamada bulacağınız 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 inç:

ViewCompositionStrategy Açıklama ve Birlikte Çalışabilirlik Senaryosu
DisposeOnDetachedFromWindow Temel ComposeView pencereden kaldırıldığında kompozisyon kullanımdan kaldırı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 havuzlama kapsayıcısında olmadığında DisposeOnDetachedFromWindow'e 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.
* RecyclerView gibi bir havuzlama kapsayıcısında öğe olarak ComposeView.
DisposeOnLifecycleDestroyed Sağlanan Lifecycle yok edildiğinde kompozisyon atılır.

Birlikte çalışabilirlik senaryosu

* ComposeView bir Fragment'in görünümünde.
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ştur 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, Android View cihazıdır.

ComposeView öğesini, diğer View öğeleri gibi XML düzeninize ekleyebilirsiniz:

<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, düzeni düzenden şişirin kaynak XML'de tanımlanı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
    }
}
InteroperabilityAPIsSnippets.kt

Alternatif olarak, XML düzen dosyanız için oluşturulan bağlama sınıfına referans vererek ComposeView 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 olan iki farklı metin öğesi

Şekil 1. Bu resimde, Görünüm kullanıcı arayüzü hiyerarşisinde Oluştur öğeleri ekleyen kodun çıkışı gösterilmektedir. "Merhaba Android!" metni bir TextView widget'ı tarafından görüntülenir. "Merhaba Oluştur!" metni, Oluştur metin öğesi tarafından gösterilir.

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

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

Aynı düzende birden fazla ComposeView öğesi varsa savedInstanceState'un ç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 bileşenleri önizleme

ComposeView içeren XML düzeniniz için Layout Editor'da da bileşenleri önizleyebilirsiniz. Bu sayede composable'larınızın nasıl göründüğüne bakabilirsiniz. bir görünüm oluşturabilirsiniz.

Aşağıdaki bileşiği, düzen düzenleyicide görüntülemek istediğinizi varsayalım. 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")
}
InteroperabilityAPIsSnippets.kt

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

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

Sonraki adımlar

Görünümler'de Oluştur'u kullanmak için birlikte çalışabilirlik API'lerini öğrendiniz. Şimdi Oluştur'da Görünümler'i nasıl kullanacağınızı öğrenin.