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

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

หากต้องการใช้ Compose ใน Fregment ให้แสดงผล ComposeView ในonCreateView()เมธอดวงจรชีวิตของ Fregment 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 ใน Fregment

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

หน้าจอที่มีอยู่ซึ่งมีทั้งมุมมองและเขียน
รูปที่ 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 ได้ที่ Interoperability 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 ใหม่ในเครื่องมือเขียนได้ 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

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

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

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

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

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

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