Jetpack Compose รองรับการทำงานร่วมกับ View คุณจึงใช้ Compose ใน View และ View ใน Compose ได้ ซึ่งจะช่วยให้ใช้ Compose ในแอปแบบวิวเบสที่มีอยู่ได้โดยไม่ต้องย้ายข้อมูล View ทั้งหมด ในทันที
ขั้นตอนการย้ายโปรเจ็กต์
- สร้างแผน: สร้างแผนที่แข็งแกร่งและเป็นขั้นตอนสำหรับการดำเนินการ ย้ายข้อมูล เราขอแนะนำให้จัดลำดับความสำคัญของงานการย้ายข้อมูลที่ค้างอยู่
- ระบุ XML ที่จะย้ายข้อมูล : ระบุและเริ่มจาก คอมโพเนนต์ที่เล็กที่สุดซึ่งเป็นโหนดใบในลำดับชั้น แล้วขยาย แผนการย้ายข้อมูลจากล่างขึ้นบนไปยังคอมโพเนนต์ที่สูงขึ้นเรื่อยๆ ใน ลำดับชั้น ตัวเลือกที่ดีสำหรับการย้ายข้อมูลครั้งแรกคือแอปขนาดเล็กแบบไม่เก็บสถานะและมี การอ้างอิงน้อยกว่า
- วิเคราะห์ลำดับชั้น: เมื่อระบุ XML View ที่จะย้ายข้อมูลแล้ว ให้วิเคราะห์โครงสร้างเลย์เอาต์และการใช้งาน XML
- บันทึกสถานะเริ่มต้น: เรียกใช้การทดสอบภาพหน้าจอเพื่อบันทึกสถานะเริ่มต้นของ XML View ที่เลือก
- ข้อกำหนดเบื้องต้น: ตั้งค่าการอ้างอิง Compose ตรวจสอบว่าโปรเจ็กต์มีการอ้างอิง Compose และตั้งค่าคอมไพเลอร์หรือไม่ หากไม่เป็นเช่นนั้น ให้ทำตามตั้งค่าการอ้างอิง Compose และ Compiler
- ข้อกำหนดเบื้องต้น: ตั้งค่าการกำหนดธีม Compose ตรวจสอบว่าโปรเจ็กต์มีการตั้งค่าการกำหนดธีม Compose อยู่แล้วหรือไม่ หากไม่ได้ผล ให้ทำตาม การกำหนดธีม Compose คงการจัดธีม XML เดิมไว้ขณะที่แอปทำงานร่วมกัน ย้ายข้อมูลธีม XML ไปยัง Compose เพื่อทำความเข้าใจรูปแบบวิธี ระบุและจนกว่าโปรเจ็กต์จะย้ายข้อมูลไปยัง Compose อย่างเต็มรูปแบบ
- ย้ายข้อมูล XML View ไปยัง Compose: เริ่มแปลงโค้ด XML เป็น Compose ใช้ธีมที่เหมาะสม และเพิ่มตัวอย่าง Compose สำหรับ Composable ที่ย้ายข้อมูล สำหรับสถานการณ์การย้ายข้อมูลที่พบบ่อย โปรดดูแหล่งข้อมูลเพิ่มเติม เช่น หากต้องการย้ายข้อมูลไปยัง Lazy API ใน Compose ให้ทำตามขั้นตอน ในย้ายข้อมูล RecyclerView ไปยัง Compose
- แทนที่การใช้งาน: แทนที่การใช้งาน XML View ก่อนหน้าเพื่อใช้ คอมโพเนนต์ Compose ใหม่ หากต้องการเพิ่มฟีเจอร์แต่งเพลงในฟีเจอร์มุมมอง ให้ทำตามขั้นตอนในแต่งเพลงในฟีเจอร์มุมมอง หากต้องการเพิ่ม View ใน Compose ให้ทำตามขั้นตอนในหัวข้อ View ใน Compose
- ตรวจสอบการย้ายข้อมูล: ยืนยันว่าสถานะเริ่มต้นที่บันทึกไว้ในการ ทดสอบภาพหน้าจอเหมือนกับตัวอย่าง Compose ของ Composable ที่ย้ายข้อมูล หากไม่ตรงกัน ให้ทำซ้ำใน UI ที่ประกอบได้ใหม่และปรับปรุงให้สอดคล้องกับสถานะเริ่มต้น สร้างการทดสอบ UI ใหม่ของ Compose สำหรับ Composable ใหม่
- การนำ XML ออก: เมื่อ Composable ที่ย้ายข้อมูลใหม่ตรงกับ UI ของ XML เริ่มต้น ให้นำโค้ด XML View ที่ล้าสมัยและทดสอบออก
สถานการณ์การย้ายข้อมูลที่พบบ่อย
ตรวจสอบว่ามีการใช้ส่วนขยาย dp และ sp (16.dp, 20.sp) ใน Composable
หากมี tools:text ใน XML View ให้ใช้ใน @Preview
composable แยกต่างหาก
การแปลงแอตทริบิวต์เป็นตัวแก้ไข
แอตทริบิวต์ XML ส่วนใหญ่จะกลายเป็นส่วนหนึ่งของmodifierเชนหรือพารามิเตอร์ของ
ฟังก์ชันที่ประกอบได้
| แอตทริบิวต์ XML | เทียบเท่าการเขียน |
|---|---|
android:layout_width="match_parent" |
Modifier.fillMaxWidth() |
android:layout_height="match_parent" |
Modifier.fillMaxHeight() |
android:layout_width="wrap_content" |
(ลักษณะการทำงานเริ่มต้น โดยปกติแล้วไม่จำเป็นต้องใช้ตัวปรับ) |
android:padding="Xdp" |
Modifier.padding(X.dp) |
android:layout_margin="Xdp" |
Modifier.padding(X.dp) (ระยะห่างจากขอบด้านนอก) |
android:gravity="center" |
contentAlignment = Alignment.Center (กล่อง) หรือ horizontalAlignment / verticalArrangement (คอลัมน์/แถว) |
android:background="@color/white" |
Modifier.background(colorResource(R.color.white)) |
android:visibility="gone" |
รวมในบล็อก if (visible) { ... } |
ย้ายข้อมูลรูปแบบ (styles.xml)
โดยทั่วไปแล้ว สไตล์ XML จะรวมแอตทริบิวต์หลายรายการเพื่อสร้างสไตล์ ใน Compose การดำเนินการนี้ทำได้โดยการสร้างรูปแบบ Composable ที่มีสไตล์เฉพาะ
ระบุฟังก์ชัน @Composable แยกต่างหากซึ่งตั้งชื่อตามสไตล์และ คอมโพเนนต์พื้นฐาน เพื่อแสดงความแตกต่างในสไตล์และกรณีการใช้งานสำหรับคอมโพเนนต์เหล่านั้น
- รูปแบบ: หากองค์ประกอบ XML ใช้รูปแบบที่กำหนดเอง
(เช่น
style="@style/MyPrimaryButton") อย่าพยายามจำลองรูปแบบในบรรทัด แต่ให้แนะนำให้สร้าง Composable ที่เฉพาะเจาะจงแทน - ตัวอย่าง
- XML:
<Button style="@style/MyPrimaryButton" ... /> - เขียน:
MyPrimaryButton(onClick = { ... })
- XML:
- กลุ่มแอตทริบิวต์ทั่วไป: หากสไตล์กำหนดตัวแก้ไขทั่วไป (เช่น ระยะเว้น + ความสูง) ให้นำตัวแก้ไขเหล่านั้นไปไว้ในพร็อพเพอร์ตี้ส่วนขยายที่อ่านได้ หรือตัวแปรตัวแก้ไขที่แชร์