Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Görüntülemeye dayalı tasarım kullanan mevcut bir uygulamaya Oluşturmaya dayalı 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 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 yazma uygulamasında bulabileceğiniz koda benzer.

`ComposeView` için `ViewCompositionStrategy`

ViewCompositionStrategy, kompozisyonun ne zaman kaldırılacağını 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 değerini 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ış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üntüleme düzenine dahil etmek istiyorsanız ComposeView öğesini kullanın ve setContent() yöntemini çağırın. ComposeView, Android View cihazıdır.

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üzenleme kaynağından düzeni şişirin. Ardından, XML kimliğini kullanarak ComposeView'ü alın, ana makine View için en iyi şekilde çalışan bir derleme stratejisi ayarlayın ve derlemeyi kullanmak için setContent()'yi ç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 olmak üzere biraz farklı iki 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!" 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!")
                }
            }
        }
    }
}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 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ü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. @Preview ile ek açıklama eklenmiş bileşimlerin, düzen düzenleyicide önizlemeye uygun 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 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>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 Oluşturma'da Görünümler'in nasıl kullanılacağını öğrenin.

Şu anda öneri yok.

Google Hesabınızda oturum açmayı deneyin.