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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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