ย้ายข้อมูลธีม XML ไปยัง Material 3 ใน Compose

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

คุณใช้เครื่องมือ Material Theme Builder เพื่อย้ายข้อมูลสีได้

เมื่อเริ่มย้ายข้อมูลจาก XML ไปยัง Compose ให้ย้ายข้อมูลการกำหนดธีมไปยัง การกำหนดธีม Material 3 Compose

อภิธานศัพท์

คำศัพท์	คำจำกัดความ
MaterialTheme	ฟังก์ชันที่ประกอบกันได้ซึ่งให้การกำหนดธีม (สี ตัวอักษร รูปร่าง) แก่คอมโพเนนต์ UI ของ Compose
Shape	ออบเจ็กต์ Compose ที่ใช้กำหนดรูปร่างคอมโพเนนต์ที่กำหนดเองสำหรับ MaterialTheme
Typography	ออบเจ็กต์ Compose ที่ใช้เพื่อกำหนดรูปแบบข้อความที่กำหนดเอง (ตระกูลแบบอักษร ขนาด ความหนา) สำหรับ MaterialTheme
Color	ออบเจ็กต์ Compose ที่ใช้กำหนดรูปแบบสีที่กำหนดเองสำหรับ MaterialTheme
ธีม XML	ระบบการกำหนดธีม Android ที่กำหนดไว้ในไฟล์ XML ซึ่งใช้โดยระบบ View

ข้อจำกัด

โปรดทราบข้อจำกัดต่อไปนี้ก่อนที่จะย้ายข้อมูล

• คู่มือนี้มุ่งเน้นที่การย้ายข้อมูลไปยัง Material 3 เท่านั้น หากต้องการย้ายข้อมูลจาก ระบบการออกแบบอื่น โปรดดู Material 2 หรือ ระบบการออกแบบที่กำหนดเองใน Compose
• เป้าหมายสูงสุดคือการย้ายข้อมูลไปยัง Compose อย่างสมบูรณ์ ซึ่งจะช่วยให้ นำการกำหนดธีม XML ออกได้ คู่มือนี้อธิบายวิธีย้ายข้อมูล แต่ไม่ได้ อธิบายวิธีนำการกำหนดธีม XML ออกในที่สุด

ขั้นตอนที่ 1: ประเมินระบบการออกแบบ

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

ขั้นตอนที่ 2: ระบุไฟล์ต้นฉบับของธีม

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

คุณสามารถนำทรัพยากร เช่น สตริง กลับมาใช้ซ้ำได้โดยไม่ต้องย้ายข้อมูล

ขั้นตอนที่ 3: ย้ายข้อมูลสี

ย้ายรูปแบบสีเข้มและสีอ่อนจาก XML ไปยังรูปแบบที่เทียบเท่าใน Material 3 Compose

ขั้นตอนที่ 4: ย้ายรูปร่างและตัวอักษรที่กำหนดเอง

• หากแอปใช้รูปร่างที่กำหนดเอง ให้ทำดังนี้

  1. ในโค้ด Compose ให้กำหนดออบเจ็กต์ Shape เพื่อจำลองคำจำกัดความรูปร่าง XML

  2. ระบุออบเจ็กต์ Shape นี้ให้กับ MaterialTheme

     ดูรายละเอียดเพิ่มเติมได้ที่รูปร่าง

• หากแอปใช้การจัดรูปแบบตัวอักษรที่กำหนดเอง ให้ทำดังนี้

  1. ในโค้ด Compose ให้กำหนดออบเจ็กต์ Typography ในโค้ด Compose เพื่อ จำลองรูปแบบข้อความ XML และคำจำกัดความแบบอักษร

  2. ระบุออบเจ็กต์ Typography นี้ให้กับ MaterialTheme

     ดูรายละเอียดเพิ่มเติมได้ที่การพิมพ์

ขั้นตอนที่ 5: ตรวจสอบการย้ายข้อมูลธีม

ใช้ค่าธีมที่มีอยู่จากธีม XML เดิมเป็นแหล่งข้อมูล ที่ถูกต้องสำหรับธีม Material ใหม่ใน Compose เสมอ อย่าสร้างค่าธีมใหม่ระหว่างการย้ายข้อมูลเพื่อรักษาความสอดคล้องของแบรนด์ และหลีกเลี่ยงการถดถอยของภาพ

ตรวจสอบว่าค่าธีม Compose ใหม่ทั้งหมดตรงกับค่า XML ที่มีอยู่ อย่าฮาร์ดโค้ดค่าที่ย้ายข้อมูล