หากคุณมีแอปที่อิงตามการดูอยู่แล้ว คุณอาจไม่ต้องการเขียนแอปใหม่ทั้งแอป UI ทั้งหมดในครั้งเดียว หน้านี้จะช่วยคุณเพิ่มคอมโพเนนต์ Compose ใหม่ลงใน แอปที่มีอยู่ หากต้องการเริ่มต้นใช้งาน Compose ในแอป โปรดดูตั้งค่าการเขียน สำหรับแอปที่มีอยู่
Jetpack Compose ออกแบบให้ความสามารถในการทำงานร่วมกันของฟีเจอร์ "ดู" ได้ตั้งแต่ต้น ฟังก์ชันการทำงานนี้หมายความว่าคุณสามารถย้ายข้อมูลแอปที่อิงตามข้อมูลพร็อพเพอร์ตี้ที่มีอยู่ไปยัง Compose ได้ ขณะที่ยังสามารถสร้าง ฟีเจอร์ใหม่ๆ ได้อีกด้วย ในการย้ายข้อมูลไปยัง Compose เราจะ แนะนำให้มีการย้ายข้อมูลแบบเพิ่มขึ้นเรื่อยๆ โดยที่ Compose และ View จะอยู่ร่วมกันใน โค้ดเบสจนกว่าแอปของคุณจะพร้อมใช้งานใน Compose อย่างสมบูรณ์
![ขั้นต่างๆ ของการย้ายข้อมูลแอปแบบมุมมองไปยัง Compose](https://developer.android.com/static/develop/ui/compose/images/interop-stages.png?authuser=8&hl=th)
หากต้องการย้ายข้อมูลแอปไปยัง Compose ให้ทำตามขั้นตอนต่อไปนี้
- สร้างหน้าจอใหม่ด้วยการเขียน
- ขณะที่คุณสร้างฟีเจอร์ มองหาองค์ประกอบที่นำมาใช้ใหม่ได้และเริ่มสร้าง ไลบรารีคอมโพเนนต์ UI ทั่วไป
- แทนที่ฟีเจอร์ที่มีอยู่ทีละหน้าจอ
สร้างหน้าจอใหม่ด้วยการเขียน
การใช้ Compose เพื่อสร้างฟีเจอร์ใหม่ที่ครอบคลุมทั้งหน้าจอเป็นวิธีที่ดีที่สุด ในการกระตุ้นการนำ Compose มาใช้ กลยุทธ์นี้จะช่วยให้คุณเพิ่มฟีเจอร์ต่างๆ ได้ และใช้ประโยชน์จากประโยชน์ของ Compose ในขณะยังคงสามารถ ความต้องการทางธุรกิจของบริษัท
![หน้าจอใหม่ที่เขียนด้วย Compose](https://developer.android.com/static/develop/ui/compose/images/interop-newscreen.png?authuser=8&hl=th)
เมื่อคุณใช้ฟีเจอร์ Compose เพื่อสร้างหน้าจอใหม่ในแอปที่มีอยู่ คุณ ทำงานภายใต้ข้อจำกัดของสถาปัตยกรรมแอป หากคุณกำลังใช้ Fragment และคอมโพเนนต์การนำทาง คุณต้องสร้างคอมโพเนนต์ใหม่ Fragment และมีเนื้อหาใน Compose
หากต้องการใช้ฟีเจอร์เขียนใน Fragment ให้แสดงผล ComposeView
ใน
onCreateView()
วิธีวงจรของ Fragment ของคุณ ComposeView
มี
setContent()
ที่ใช้ระบุฟังก์ชันที่ประกอบกันได้
class NewFeatureFragment : Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View { return ComposeView(requireContext()).apply { setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) setContent { NewFeatureScreen() } } } }
ดูข้อมูลเพิ่มเติมที่ ComposeView ใน Fragments
เพิ่มฟีเจอร์ใหม่ในหน้าจอที่มีอยู่
![หน้าจอที่มีอยู่โดยมีมุมมองและการเขียนแบบผสม](https://developer.android.com/static/develop/ui/compose/images/interop-existingscreen.png?authuser=8&hl=th)
นอกจากนี้ คุณยังสามารถใช้การเขียนในหน้าจอแบบดูที่มีอยู่ได้หากฟีเจอร์ใหม่ที่คุณ
การเพิ่มเป็นส่วนหนึ่งของหน้าจอที่มีอยู่แล้ว วิธีการคือ ให้เพิ่ม ComposeView
ลงในส่วน
ดูลำดับชั้นได้เช่นเดียวกับข้อมูลพร็อพเพอร์ตี้อื่นๆ
เช่น สมมุติว่าคุณต้องการเพิ่มข้อมูลพร็อพเพอร์ตี้ย่อยลงใน LinearLayout
คุณสามารถทำได้
ใน XML ดังนี้
<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>
เมื่อมุมมองสูงเกินจริงแล้ว คุณสามารถอ้างอิง ComposeView
ใน
ลำดับชั้นและเรียกใช้ setContent()
ดูข้อมูลเพิ่มเติมเกี่ยวกับ ComposeView
ได้ที่ API ความสามารถในการทำงานร่วมกัน
สร้างไลบรารีคอมโพเนนต์ UI ทั่วไป
ในขณะที่คุณสร้างคุณลักษณะต่างๆ ด้วยการเขียน คุณจะทราบได้เลยว่าในที่สุดแล้ว สร้างไลบรารีคอมโพเนนต์ การสร้างไลบรารีคอมโพเนนต์ UI ทั่วไป ช่วยให้คุณมีแหล่งข้อมูลที่ถูกต้องแห่งเดียวสำหรับคอมโพเนนต์เหล่านี้ในแอปและ ส่งเสริมให้ใช้ซ้ำได้ แล้วฟีเจอร์ที่คุณสร้างจะขึ้นอยู่กับไลบรารีนี้ ช่วงเวลานี้ มีประโยชน์อย่างยิ่งหากคุณกำลังสร้างระบบการออกแบบที่กำหนดเองใน เขียน
ไลบรารีนี้อาจเป็นแพ็กเกจ โมดูล แยกกันก็ได้ ทั้งนี้ขึ้นอยู่กับขนาดของแอป หรือโมดูลไลบรารี ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดระเบียบโมดูลในแอปได้ที่ อ่านคู่มือการแยกโมดูลแอป Android
แทนที่ฟีเจอร์ที่มีอยู่ด้วยการเขียน
นอกจากการใช้ Compose เพื่อสร้างฟีเจอร์ใหม่แล้ว คุณอาจต้องการค่อยๆ ย้ายฟีเจอร์ที่มีอยู่ในแอปเพื่อใช้ประโยชน์จาก Compose
การกำหนดให้แอปเป็นแบบ "เขียนเท่านั้น" จะช่วยเร่งการพัฒนาและ ลดขนาด APK และเวลาในการสร้างแอป โปรดดูเปรียบเทียบการเขียนและมุมมอง ประสิทธิภาพเพื่อดูข้อมูลเพิ่มเติม
หน้าจอที่เรียบง่าย
จุดแรกที่ต้องพิจารณาเมื่อย้ายฟีเจอร์ที่มีอยู่ไปยัง Compose นั้นทำได้ง่าย หน้าจอ ซึ่งอาจเป็นหน้าจอต้อนรับ หน้าจอยืนยัน หรือ หน้าจอการตั้งค่าซึ่งข้อมูลที่แสดงใน UI จะค่อนข้างคงที่
นำไฟล์ XML ต่อไปนี้
<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/title_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/title" android:textAppearance="?attr/textAppearanceHeadline2" /> <TextView android:id="@+id/subtitle_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/subtitle" android:textAppearance="?attr/textAppearanceHeadline6" /> <TextView android:id="@+id/body_text" android:layout_width="wrap_content" android:layout_height="0dp" android:layout_weight="1" android:text="@string/body" android:textAppearance="?attr/textAppearanceBody1" /> <Button android:id="@+id/confirm_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/confirm"/> </LinearLayout>
ไฟล์ XML สามารถเขียนใหม่ได้ใน Compose ภายใน 2-3 บรรทัด ดังนี้
@Composable fun SimpleScreen() { Column(Modifier.fillMaxSize()) { Text( text = stringResource(R.string.title), style = MaterialTheme.typography.headlineMedium ) Text( text = stringResource(R.string.subtitle), style = MaterialTheme.typography.headlineSmall ) Text( text = stringResource(R.string.body), style = MaterialTheme.typography.bodyMedium ) Spacer(modifier = Modifier.weight(1f)) Button(onClick = { /* Handle click */ }, Modifier.fillMaxWidth()) { Text(text = stringResource(R.string.confirm)) } } }
หน้าจอมุมมองและการเขียนแบบผสม
หน้าจอที่มีโค้ด Compose จำนวนหนึ่งอยู่แล้วเป็นตัวเลือกที่ดีอีกอย่างหนึ่ง สำหรับการโยกย้ายไปยัง Compose โดยสมบูรณ์ ทั้งนี้ขึ้นอยู่กับความซับซ้อนของหน้าจอ คุณสามารถย้ายข้อมูลทั้งหมดไปยัง Compose หรือทำทีละรายการก็ได้ หาก ที่เริ่มต้นด้วย Compose ในแผนผังย่อยของลำดับชั้น UI คุณจะดำเนินการต่อ ย้ายข้อมูลองค์ประกอบ UI จนกระทั่งทั้งหน้าจออยู่ใน Compose วิธีนี้ หรือที่เรียกว่าวิธีแบบล่างขึ้นบน
![วิธีการจากล่างขึ้นบนของการย้ายข้อมูลมุมมองแบบผสมและ UI การเขียนไปยัง Compose](https://developer.android.com/static/develop/ui/compose/images/interop-animation.gif?authuser=8&hl=th)
การนำ Fragment และคอมโพเนนต์การนำทางออก
คุณจะย้ายข้อมูลไปยังการเขียนการนำทางได้เมื่อนำ Fragment และแทนที่ด้วย Composable ระดับหน้าจอที่เกี่ยวข้อง ระดับหน้าจอ Composables สามารถมีเนื้อหา Compose และ View รวมกัน แต่ทั้งหมด ปลายทางการนำทางต้องเป็น Composable เพื่อเปิดใช้การเขียนการนำทาง การย้ายข้อมูล ในระหว่างนี้ คุณควรใช้ต่อไป คอมโพเนนต์การนำทางตามส่วนย่อยในมุมมองและการเขียนแบบผสม ฐานของโค้ด โปรดดูที่ย้ายข้อมูลการนำทางของ Jetpack ไปยังการเขียนการนำทางสำหรับ ข้อมูลเพิ่มเติม
แหล่งข้อมูลเพิ่มเติม
โปรดดูแหล่งข้อมูลเพิ่มเติมต่อไปนี้ เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการย้ายข้อมูล แอปที่อิงตามการดูที่มีอยู่แล้วไปยัง Compose:
- Codelab
- การย้ายข้อมูลไปยัง Jetpack Compose: ดูวิธีย้ายข้อมูลบิตของ Sunflower App ไปยัง Compose ใน Codelab นี้
- บล็อกโพสต์
- การย้ายข้อมูล Sunflower ไปยัง Jetpack Compose: ดูวิธี Sunflower ถูกย้ายข้อมูลไปที่ Compose โดยใช้กลยุทธ์ที่อธิบายในหน้านี้
- การทำงานร่วมกันของ Jetpack Compose: การใช้ Compose ใน RecyclerView
ดูวิธีใช้การเขียนอย่างมีประสิทธิภาพใน
RecyclerView
ขั้นตอนถัดไป
เมื่อคุณทราบกลยุทธ์ที่คุณสามารถทำได้เพื่อย้ายข้อมูลตามมุมมองที่มีอยู่ โปรดสำรวจ API ความสามารถในการทำงานร่วมกันเพื่อดูข้อมูลเพิ่มเติม
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- การใช้ "เขียน" ใน View
- เลื่อน
- ย้ายข้อมูล
RecyclerView
ไปยังรายการแบบ Lazy Loading