หน้านี้ได้รับการแปลโดย Cloud Translation API

การใช้ Compose ใน View

คุณสามารถเพิ่ม UI แบบ Compose ลงในแอปที่มีอยู่ซึ่งใช้การออกแบบโดยอิงตามมุมมอง

หากต้องการสร้างหน้าจอใหม่ทั้งหมดที่ใช้การเขียน ให้ดำเนินการดังนี้ เรียกใช้เมธอด setContent() และส่งฟังก์ชันที่ประกอบกันได้ใดก็ตาม ที่คุณต้องการ

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

โค้ดนี้มีลักษณะเหมือนกับที่คุณเห็นในแอปเขียนอีเมลเท่านั้น

`ViewCompositionStrategy` เป็นเวลา `ComposeView`

ViewCompositionStrategy กำหนดเวลาที่ควรกำจัดองค์ประกอบ ค่าเริ่มต้น ViewCompositionStrategy.Default จะทิ้งคอมโพสิชันเมื่อคอมโพสิชันพื้นฐาน ComposeView แยกออกจากหน้าต่าง เว้นแต่ว่าจะเป็นส่วนหนึ่งของคอนเทนเนอร์การรวมกลุ่ม เช่น RecyclerView ในแอป Compose อย่างเดียวที่มีกิจกรรมเดียว ลักษณะการทำงานเริ่มต้นนี้เป็นสิ่งที่คุณต้องการ อย่างไรก็ตาม หากคุณเพิ่ม Compose ลงในโค้ดเบสทีละส่วน ลักษณะการทำงานนี้อาจทำให้ข้อมูลสถานะสูญหายในบางสถานการณ์

หากต้องการเปลี่ยน ViewCompositionStrategy ให้เรียกใช้เมธอด setViewCompositionStrategy() แล้วระบุกลยุทธ์อื่น

ตารางด้านล่างสรุปสถานการณ์ต่างๆ ที่คุณสามารถใช้ViewCompositionStrategyได้

`ViewCompositionStrategy`	คำอธิบายและสถานการณ์การทํางานร่วมกัน
`DisposeOnDetachedFromWindow`	ระบบจะกำจัดองค์ประกอบเมื่อถอด `ComposeView` ที่สำคัญออกจากหน้าต่าง ต่อมาได้มีการแทนที่โดย `DisposeOnDetachedFromWindowOrReleasedFromPool` สถานการณ์การทำงานร่วมกัน: * `ComposeView` ไม่ว่าจะเป็นองค์ประกอบเดียวในลำดับชั้นการแสดงผล หรือในบริบทของหน้าจอมุมมอง/การเขียนแบบผสม (ไม่ใช่ Fragment)
`DisposeOnDetachedFromWindowOrReleasedFromPool` (ค่าเริ่มต้น)	คล้ายกับ `DisposeOnDetachedFromWindow` เมื่อการประพันธ์ไม่ได้อยู่ในคอนเทนเนอร์การรวม เช่น `RecyclerView` หากอยู่ในคอนเทนเนอร์ร่วม ระบบจะกำจัดเมื่อคอนเทนเนอร์ร่วมออกจากหน้าต่าง หรือเมื่อมีการทิ้งรายการ (เช่น เมื่อพูลเต็ม) สถานการณ์การทำงานร่วมกัน: * `ComposeView` ไม่ว่าจะเป็นองค์ประกอบเดียวในลำดับชั้นการดู หรือในบริบทของหน้าจอมุมมอง/เขียนแบบผสม (ไม่ใช่ Fragment) * `ComposeView` เป็นรายการในคอนเทนเนอร์การรวม เช่น `RecyclerView`
`DisposeOnLifecycleDestroyed`	ระบบจะกำจัดองค์ประกอบเมื่อ `Lifecycle` ที่ระบุถูกทำลาย สถานการณ์การทำงานร่วมกัน * `ComposeView` ในมุมมองของ Fragment
`DisposeOnViewTreeLifecycleDestroyed`	ระบบจะกำจัดองค์ประกอบเมื่อ `Lifecycle` ของ `LifecycleOwner` ซึ่งแสดงผลโดย `ViewTreeLifecycleOwner.get` ของหน้าต่างถัดไปที่มีการเชื่อมต่อมุมมองถูกทำลาย สถานการณ์การทำงานร่วมกัน: * `ComposeView` ในมุมมองของ Fragment * `ComposeView` ในมุมมองที่ยังไม่ทราบว่าวงจรของลูกค้าเป็นอย่างไร

`ComposeView` ใน "ส่วนย่อย"

ถ้าคุณต้องการรวมเนื้อหา UI ของ Compose ไว้ในส่วนย่อยหรือมุมมองที่มีอยู่ เลย์เอาต์ ให้ใช้ ComposeView และเรียก setContent() ComposeView เป็น Android View

คุณสามารถใส่ ComposeView ในเลย์เอาต์ XML ได้เช่นเดียวกับ View อื่นๆ ดังนี้

<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 ให้ขยายเลย์เอาต์จาก layout resource ที่กําหนดใน XML จากนั้นดาวน์โหลด ComposeView โดยใช้รหัส XML ให้ตั้งค่ากลยุทธ์การเรียบเรียงที่เหมาะสมที่สุดสำหรับ โฮสต์ View และเรียก setContent() เพื่อใช้การเขียน

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

หรือจะใช้การเชื่อมโยงมุมมองเพื่อรับการอ้างอิงComposeViewก็ได้โดยอ้างอิงคลาสการเชื่อมโยงที่สร้างขึ้นสำหรับไฟล์เลย์เอาต์ XML ดังนี้

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

องค์ประกอบข้อความ 2 รายการที่แตกต่างกันเล็กน้อย โดยรายการหนึ่งอยู่ด้านบน

รูปที่ 1 ซึ่งจะแสดงเอาต์พุตของโค้ดที่เพิ่มองค์ประกอบ Compose ไว้ในไฟล์ ดูลำดับชั้นของ UI หน้าต่าง "สวัสดี Android!" ข้อความที่แสดงโดย วิดเจ็ต TextView หน้าต่าง "สวัสดีเขียน!" ข้อความที่แสดงโดย เขียนองค์ประกอบของข้อความ

นอกจากนี้ คุณยังใส่ ComposeView ลงในข้อมูลโค้ดโดยตรงได้หากสร้างหน้าจอแบบเต็มด้วย Compose ซึ่งจะช่วยให้คุณไม่ต้องใช้ไฟล์เลย์เอาต์ XML เลย

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

อินสแตนซ์ `ComposeView` หลายรายการในเลย์เอาต์เดียวกัน

หากมีองค์ประกอบ ComposeView หลายรายการในเลย์เอาต์เดียวกัน แต่ละรายการต้องมีรหัสที่ไม่ซ้ำกันเพื่อให้ savedInstanceState ทำงานได้

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 ได้รับการกําหนดไว้ในไฟล์ res/values/ids.xml

<resources>
  <item name="compose_view_x" type="id" />
  <item name="compose_view_y" type="id" />
</resources>ids.xml

แสดงตัวอย่างคอมโพเนนต์ที่เขียนด้วย Compose ได้ในเครื่องมือสร้างเลย์เอาต์

นอกจากนี้ คุณยังแสดงตัวอย่างคอมโพสิเบิลภายในเครื่องมือแก้ไขเลย์เอาต์สำหรับเลย์เอาต์ XML ที่มี ComposeView ได้ด้วย ซึ่งจะช่วยให้คุณเห็นว่าคอมโพสิเบิลมีลักษณะอย่างไรในเลย์เอาต์แบบผสมผสานระหว่างมุมมองและคอมโพสิเบิล

สมมติว่าคุณต้องการแสดงคอมโพสิเบิลต่อไปนี้ในเครื่องมือแก้ไขเลย์เอาต์ โปรดทราบว่าคอมโพสิชันที่มีคำอธิบายประกอบ @Preview เหมาะที่จะแสดงตัวอย่างในเครื่องมือแก้ไขเลย์เอาต์

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

หากต้องการแสดงคอมโพสิเบิลนี้ ให้ใช้แอตทริบิวต์tools:composableName tools และตั้งค่าเป็นชื่อแบบเต็มที่สมบูรณ์ของคอมโพสิเบิลเพื่อแสดงตัวอย่างในเลย์เอาต์

<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

เขียนได้ด้วย Compose ภายในเครื่องมือแก้ไขเลย์เอาต์

ขั้นตอนถัดไป

เมื่อคุณทราบ API ที่ทำงานร่วมกันเพื่อใช้ Compose ใน View แล้ว โปรดเรียนรู้ วิธีใช้ Views in Compose

แนะนำสำหรับคุณ

หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
ข้อควรพิจารณาอื่นๆ
กลยุทธ์การย้ายข้อมูล {:#Migration-strategy}
เปรียบเทียบประสิทธิภาพของการเขียนและการดู