กลยุทธ์การย้ายข้อมูล

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

Jetpack Compose ออกแบบให้ความสามารถในการทำงานร่วมกันของฟีเจอร์ "ดู" ได้ตั้งแต่ต้น ฟังก์ชันการทำงานนี้หมายความว่าคุณสามารถย้ายข้อมูลแอปที่อิงตามข้อมูลพร็อพเพอร์ตี้ที่มีอยู่ไปยัง Compose ได้ ขณะที่ยังสามารถสร้าง ฟีเจอร์ใหม่ๆ ได้อีกด้วย ในการย้ายข้อมูลไปยัง Compose เราจะ แนะนำให้มีการย้ายข้อมูลแบบเพิ่มขึ้นเรื่อยๆ โดยที่ Compose และ View จะอยู่ร่วมกันใน โค้ดเบสจนกว่าแอปของคุณจะพร้อมใช้งานใน Compose อย่างสมบูรณ์

วันที่

หากต้องการย้ายข้อมูลแอปไปยัง Compose ให้ทำตามขั้นตอนต่อไปนี้

1. สร้างหน้าจอใหม่ด้วยการเขียน
2. ขณะที่คุณสร้างฟีเจอร์ มองหาองค์ประกอบที่นำมาใช้ใหม่ได้และเริ่มสร้าง ไลบรารีคอมโพเนนต์ UI ทั่วไป
3. แทนที่ฟีเจอร์ที่มีอยู่ทีละหน้าจอ

สร้างหน้าจอใหม่ด้วยการเขียน

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

วันที่

เมื่อคุณใช้ฟีเจอร์ 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()
            }
        }
    }
}
MigrationStrategySnippets.kt

ดูข้อมูลเพิ่มเติมที่ ComposeView ใน Fragments

เพิ่มฟีเจอร์ใหม่ในหน้าจอที่มีอยู่

วันที่

นอกจากนี้ คุณยังสามารถใช้การเขียนในหน้าจอแบบดูที่มีอยู่ได้หากฟีเจอร์ใหม่ที่คุณ การเพิ่มเป็นส่วนหนึ่งของหน้าจอที่มีอยู่แล้ว วิธีการคือ ให้เพิ่ม 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>
migration_strategy_existing_screens.xml

เมื่อมุมมองสูงเกินจริงแล้ว คุณสามารถอ้างอิง 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>
migration_strategy_xml_example.xml

ไฟล์ 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))
        }
    }
}
MigrationStrategySnippets.kt

หน้าจอมุมมองและการเขียนแบบผสม

หน้าจอที่มีโค้ด Compose จำนวนหนึ่งอยู่แล้วเป็นตัวเลือกที่ดีอีกอย่างหนึ่ง สำหรับการโยกย้ายไปยัง Compose โดยสมบูรณ์ ทั้งนี้ขึ้นอยู่กับความซับซ้อนของหน้าจอ คุณสามารถย้ายข้อมูลทั้งหมดไปยัง Compose หรือทำทีละรายการก็ได้ หาก ที่เริ่มต้นด้วย Compose ในแผนผังย่อยของลำดับชั้น UI คุณจะดำเนินการต่อ ย้ายข้อมูลองค์ประกอบ UI จนกระทั่งทั้งหน้าจออยู่ใน Compose วิธีนี้ หรือที่เรียกว่าวิธีแบบล่างขึ้นบน

วันที่

การนำ 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 ความสามารถในการทำงานร่วมกันเพื่อดูข้อมูลเพิ่มเติม