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

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

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

ขั้นตอนการย้ายข้อมูลแอปที่อิงตาม View ไปยัง Compose
รูปที่ 1 ขั้นตอนการย้ายข้อมูลแอปที่อิงตาม View ไปยัง Compose

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

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

สร้างหน้าจอใหม่ด้วย Compose

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

หน้าจอใหม่ที่เขียนด้วย Compose
รูปที่ 2 หน้าจอใหม่ที่เขียนด้วย Compose

เมื่อใช้ Compose เพื่อสร้างหน้าจอใหม่ในแอปที่มีอยู่ คุณยังคง ทำงานภายใต้ข้อจำกัดของสถาปัตยกรรมของแอป หากคุณใช้ Fragment และคอมโพเนนต์การนำทาง คุณจะต้องสร้าง Fragment ใหม่และมีเนื้อหาใน Compose

หากต้องการใช้ 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 ใน Fragment

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

หน้าจอที่มีอยู่ซึ่งมีทั้ง View และ Compose
รูปที่ 3 หน้าจอที่มีอยู่ซึ่งมีทั้ง View และ Compose

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

เช่น สมมติว่าคุณต้องการเพิ่มมุมมองสำหรับเด็กไปยัง 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 ทั่วไป

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

ไลบรารีนี้อาจเป็นแพ็กเกจ โมดูล หรือโมดูลไลบรารีแยกต่างหาก ทั้งนี้ขึ้นอยู่กับขนาดของแอป ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดระเบียบโมดูลในแอปได้ที่คำแนะนำในการแยกส่วนแอป Android

แทนที่ฟีเจอร์ที่มีอยู่ด้วย Compose

นอกเหนือจากการใช้ Compose เพื่อสร้างฟีเจอร์ใหม่แล้ว คุณยังควรค่อยๆ ย้ายข้อมูลฟีเจอร์ที่มีอยู่ในแอปเพื่อใช้ประโยชน์จาก Compose

การมีแอปที่ใช้ Compose อย่างเดียวจะช่วยเร่งการพัฒนาและยัง ลดขนาด APK และเวลาในการสร้างแอปได้ด้วย ดูข้อมูลเพิ่มเติมได้ที่เปรียบเทียบประสิทธิภาพของ Compose กับ View

หน้าจอที่เรียบง่าย

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

@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 ใน Subtree ของลำดับชั้น UI คุณจะต้องย้ายข้อมูล องค์ประกอบ UI ต่อไปจนกว่าทั้งหน้าจอจะอยู่ใน Compose แนวทางนี้เรียกอีกอย่างว่าแนวทางจากล่างขึ้นบน

แนวทางจากล่างขึ้นบนในการย้ายข้อมูล UI แบบผสมของ Views และ Compose ไปยัง Compose
รูปที่ 4 วิธีการย้ายข้อมูล UI แบบผสมที่ใช้ทั้ง View และ Compose ไปยัง Compose จากล่างขึ้นบน

การนำ Fragment และคอมโพเนนต์การนำทางออก

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

แหล่งข้อมูลเพิ่มเติม

ดูแหล่งข้อมูลเพิ่มเติมต่อไปนี้เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการย้ายข้อมูลแอปที่อิงตาม View ที่มีอยู่ไปยัง Compose

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

เมื่อทราบกลยุทธ์ที่ใช้ในการย้ายข้อมูลแอปที่อิงตาม View ที่มีอยู่แล้ว โปรดสำรวจ API การทำงานร่วมกันเพื่อดูข้อมูลเพิ่มเติม