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 Oluştur modunda çalışan bir uygulamada bulacağınız koda benzer.

ComposeView için ViewCompositionStrategy

ViewCompositionStrategy, kompozisyonun ne zaman kaldırılacağını tanımlar. Varsayılan değer olan ViewCompositionStrategy.Default, RecyclerView gibi bir havuzlama kapsayıcısının parçası olmadığı sürece, temel ComposeView pencereden ayrıldığında kompozisyonu kaldırır. Tek bir Etkinlik'te yalnızca Compose kullanan bir uygulamada bu varsayılan davranışı tercih edersiniz. Ancak kod tabanınıza Compose'u kademeli olarak ekliyorsanız bu davranış bazı senaryolarda durumun kaybolması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 Temel ComposeView pencereden kaldırıldığında kompozisyon kullanımdan kaldırılır. O zamandan beri DisposeOnDetachedFromWindowOrReleasedFromPool ile değiştirildi.

Birlikte çalışabilirlik senaryosu:

* ComposeView Görüntüleme hiyerarşisindeki tek öğe mi yoksa karma bir Görüntüleme/Oluşturma ekranı bağlamında mı (Fragment'te değil)?
DisposeOnDetachedFromWindowOrReleasedFromPool (Varsayılan) Beste, RecyclerView gibi bir havuzlama kapsayıcısında olmadığında DisposeOnDetachedFromWindow'e benzer. Bir havuzlama kapsayıcısındaysa havuzlama kapsayıcısının pencereden ayrılması veya öğenin atılması (ör. havuz dolu olduğunda) durumunda kaldırılır.

Birlikte çalışabilirlik senaryosu:

* ComposeView Görüntü hiyerarşisindeki tek öğe olup olmadığı veya karma bir Görüntü/Oluştur ekranı bağlamında olup olmadığı (Fragment'te değil).
* 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 Görünümün bağlı olduğu bir sonraki pencerenin ViewTreeLifecycleOwner.get tarafından döndürülen LifecycleOwner'a ait Lifecycle yok edildiğinde kompozisyon atılır.

Birlikte çalışabilirlik senaryosu:

* Bir Fragment'in görünümünde ComposeView.
* Yaşam döngüsü henüz bilinmeyen bir görünümde ComposeView.

Parçalar'da 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 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, 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 performansı gösteren 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 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 Compose ile oluşturulduysa doğrudan bir fragment'e ComposeView de ekleyebilirsiniz. Bu sayede XML düzen dosyasını tamamen kullanmadan da yapabilirsiniz.

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üzenleyici'de bileşenleri önizleme

ComposeView içeren XML düzeniniz için Layout Editor'da da bileşenleri önizleyebilirsiniz. Bu sayede, kompozisyonlarınızın karma Görünümler ve Oluşturma düzeninde nasıl göründüğünü görebilirsiniz.

Aşağıdaki bileşiği, düzen düzenleyicide görüntülemek istediğinizi varsayalım. @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 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üzenleyici içinde gösterilen kompozisyon

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.