คุณสามารถเพิ่ม 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!") }
โค้ดนี้มีลักษณะเหมือนกับที่คุณเห็นในแอปเขียนอีเมลเท่านั้น
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>
ในซอร์สโค้ด 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 } }
หรือจะใช้การเชื่อมโยงมุมมองเพื่อรับการอ้างอิง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 } }
รูปที่ 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!") } } } } }
อินสแตนซ์ 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 // ... } ) } }
รหัส ComposeView
ได้รับการกําหนดไว้ในไฟล์ res/values/ids.xml
<resources> <item name="compose_view_x" type="id" /> <item name="compose_view_y" type="id" /> </resources>
แสดงตัวอย่างคอมโพเนนต์ที่เขียนด้วย Compose ได้ในเครื่องมือสร้างเลย์เอาต์
นอกจากนี้ คุณยังแสดงตัวอย่างคอมโพสิเบิลภายในเครื่องมือแก้ไขเลย์เอาต์สำหรับเลย์เอาต์ XML ที่มี ComposeView
ได้ด้วย ซึ่งจะช่วยให้คุณเห็นว่าคอมโพสิเบิลมีลักษณะอย่างไรในเลย์เอาต์แบบผสมผสานระหว่างมุมมองและคอมโพสิเบิล
สมมติว่าคุณต้องการแสดงคอมโพสิเบิลต่อไปนี้ในเครื่องมือแก้ไขเลย์เอาต์ โปรดทราบว่าคอมโพสิชันที่มีคำอธิบายประกอบ @Preview
เหมาะที่จะแสดงตัวอย่างในเครื่องมือแก้ไขเลย์เอาต์
@Preview @Composable fun GreetingPreview() { Greeting(name = "Android") }
หากต้องการแสดงคอมโพสิเบิลนี้ ให้ใช้แอตทริบิวต์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>
ขั้นตอนถัดไป
เมื่อคุณทราบ API ที่ทำงานร่วมกันเพื่อใช้ Compose ใน View แล้ว โปรดเรียนรู้ วิธีใช้ Views in Compose
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- ข้อควรพิจารณาอื่นๆ
- กลยุทธ์การย้ายข้อมูล {:#Migration-strategy}
- เปรียบเทียบประสิทธิภาพของการเขียนและการดู