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

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

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

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

Bu kod, "Yalnızca Oluşturma" uygulamalarında bulacağınıza benziyor.

ComposeView için ViewCompositionStrategy

ViewCompositionStrategy Bestenin ne zaman atılması gerektiğini tanımlar. Varsayılan olan ViewCompositionStrategy.Default, temel ComposeView pencereden ayrıldığında Besteyi atar (RecyclerView gibi bir havuz container'ının parçası olmadığı sürece). Tek Etkinlikli Yazma türündeki bir uygulamada bu varsayılan davranışı kullanmak isteyebilirsiniz. Ancak kod tabanınıza Compose'u aşamalı olarak ekliyorsanız bu davranış bazı senaryolarda durum kaybına neden olabilir.

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

Aşağıdaki tabloda ViewCompositionStrategy etiketini şu konumlarda kullanabileceğiniz farklı senaryolar özetlenmektedir:

ViewCompositionStrategy Açıklama ve Birlikte Çalışabilirlik Senaryosu
DisposeOnDetachedFromWindow Temel ComposeView pencereden ayrıldığında Beste atılacak. O zamandan beri yerini DisposeOnDetachedFromWindowOrReleasedFromPool aldı.

Birlikte çalışma senaryosu:

* ComposeView ister Görünüm hiyerarşisindeki tek öğe, ister karma bir Görünüm/Oluştur ekranı bağlamında (Parça değil) olsun.
DisposeOnDetachedFromWindowOrReleasedFromPool (Varsayılan) Beste, RecyclerView gibi bir havuz kapsayıcısında olmadığında DisposeOnDetachedFromWindow ile benzerdir. Bir havuz kapsayıcısında yer alıyorsa havuz kapsayıcısının kendisi pencereden çıktığında veya öğe silindiğinde (ör. havuz dolu olduğunda) atılır.

Birlikte çalışabilirlik senaryosu:

* ComposeViewİster Görünüm hiyerarşisindeki tek öğe olsun ister karma bir görünüm/oluşturma ekranı bağlamında (Parça değil) gösterilir.
* RecyclerView gibi bir havuz kapsayıcısında öğe olarak ComposeView.
DisposeOnLifecycleDestroyed Sağlanan Lifecycle yok edildiğinde Beste yok edilir.

Birlikte çalışma senaryosu

* Bir Parçanın Görünümünde ComposeView.
DisposeOnViewTreeLifecycleDestroyed Beste, Görünümün eklendiği bir sonraki pencerenin ViewTreeLifecycleOwner.get tarafından döndürülen LifecycleOwner öğesine ait Lifecycle yok edildiğinde imha edilir.

Birlikte çalışma senaryosu:

* 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 yöntemini kullanın ve setContent() yöntemini çağırın. ComposeView, Android View model bir Android cihazdır.

XML düzeninize, diğer herhangi bir View öğesi gibi ComposeView öğesini 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>

Kotlin kaynak kodunda, XML'de tanımlanan düzen kaynağından düzeni şişirin. Ardından, XML kimliğini kullanarak ComposeView kodunu alın, View ana makinesi için en uygun Beste stratejisini belirleyin ve Oluşturma ö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
    }
}

Alternatif olarak, XML düzen dosyanız için oluşturulan bağlama sınıfına başvurarak ComposeView başvurularını 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
    }
}

Birbirlerinin üzerinde olan ve biraz farklı iki metin öğesi

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

Tam ekranınız Oluştur işleviyle oluşturulduysa doğrudan bir parçaya ComposeView ekleyebilirsiniz. Böylece XML düzen dosyasını tamamen kullanmak zorunda kalmazsınız.

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

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
                // ...
            }
        )
    }
}

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>

Düzen Düzenleyici'de composable'ları önizleme

ComposeView içeren XML düzeniniz için composable'ları Düzen Düzenleyici'de de önizleyebilirsiniz. Böylece composable'larınızın karma Görünümler ve Oluştur düzeninde nasıl görüneceğini görebilirsiniz.

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

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

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ı olarak 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>

Düzen düzenleyici içinde görüntülenen composable

Sonraki adımlar

Artık Görünümler'de Oluşturma'nın nasıl kullanılacağını öğrendiğiniz birlikte çalışabilirlik API'lerini öğrendiğinize göre Views in Compose'u nasıl kullanacağınızı öğrenebilirsiniz.