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

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

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

ขั้นต่างๆ ของการย้ายข้อมูลแอปแบบมุมมองไปยัง Compose
รูปที่ 1 ระยะต่างๆ ของการย้ายข้อมูลแอปแบบมุมมองไปยัง Compose

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

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

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

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

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

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

หากต้องการใช้ Compose ใน Fregment ให้แสดงผล ComposeView ในonCreateView()เมธอดวงจรชีวิตของ Fregment ComposeView มีเมธอด setContent() ที่ใช้ระบุฟังก์ชัน Composable ได้

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

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

หน้าจอที่มีอยู่โดยมีมุมมองและการเขียนแบบผสม
ภาพที่ 3 หน้าจอที่มีอยู่ซึ่งมีทั้งมุมมองและเขียน

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

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

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

นอกเหนือจากการใช้ Compose เพื่อสร้างฟีเจอร์ใหม่แล้ว คุณควรค่อยๆ ย้ายฟีเจอร์ที่มีอยู่ในแอปเพื่อใช้ประโยชน์จาก 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 วิธีนี้เรียกอีกอย่างหนึ่งว่าแนวทางจากล่างขึ้นบน

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

การนำคอมโพเนนต์การนําทางและเศษข้อมูลออก

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

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

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

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

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