Jetpack Compose เป็นชุดเครื่องมือที่ทันสมัยสำหรับการสร้าง UI ของ Android ซึ่งช่วยลดความซับซ้อนในการพัฒนาแอปที่ปรับให้เข้ากับขนาดการแสดงผลทุกขนาด
- ภาพรวม: ดูแหล่งข้อมูลที่มีให้บริการสำหรับนักพัฒนาแอป Compose
- บทแนะนำ: เริ่มต้นใช้งาน Compose ด้วยการสร้าง UI พื้นฐาน
- คู่มือฉบับย่อ: ลองใช้คู่มือที่รวดเร็วและตรงประเด็นของเรา ซึ่งออกแบบมาเพื่อให้คุณบรรลุเป้าหมายได้โดยเร็วที่สุด
พื้นฐาน
- การคิดใน Compose: แนวทางแบบประกาศของ Compose แตกต่างจากแนวทางแบบวิวเบสที่คุณอาจเคยใช้ในอดีตอย่างไร สร้างโมเดลในใจเพื่อทำงานกับ Compose
- การจัดการสถานะ: การตั้งค่าและการใช้สถานะในแอป Compose
- วงจรของ Composable: วงจรของ Composable และวิธีที่ Compose กำหนดว่าต้องวาดใหม่หรือไม่
- ตัวปรับแต่ง: ใช้ตัวปรับแต่งเพื่อเพิ่มหรือตกแต่ง Composable
- ผลข้างเคียงใน Compose: วิธีจัดการผลข้างเคียง
- เฟสของ Jetpack Compose: ขั้นตอนที่ Compose ใช้ในการแสดงผล UI ของแอป และวิธีใช้ข้อมูลดังกล่าวเพื่อเขียนโค้ดที่มีประสิทธิภาพ
- การแบ่งเลเยอร์สถาปัตยกรรม: เลเยอร์สถาปัตยกรรมที่ประกอบกันเป็น Jetpack Compose และหลักการพื้นฐานที่ใช้ในการออกแบบ Compose
- ประสิทธิภาพ: หลีกเลี่ยงข้อผิดพลาดในการเขียนโปรแกรมที่พบบ่อยซึ่งอาจทำให้ประสิทธิภาพของแอปแย่ลง
- Semantics ใน Compose: แผนผัง Semantics ซึ่งจัดระเบียบ UI ในลักษณะที่บริการการช่วยเหลือพิเศษและเฟรมเวิร์กการทดสอบสามารถใช้ได้
- ข้อมูลที่กำหนดขอบเขตในเครื่องด้วย CompositionLocal: ใช้
CompositionLocalเพื่อ ส่งข้อมูลผ่านการจัดองค์ประกอบ
UI แบบปรับอัตโนมัติ
- สร้างแอปที่ปรับเปลี่ยนตามอุปกรณ์: เรียนรู้หลักการพื้นฐานของการสร้างเลย์เอาต์ ที่ปรับให้เหมาะกับขนาดการแสดงผลทุกขนาด รวมถึงโทรศัพท์ แท็บเล็ต โทรศัพท์แบบพับได้ และ อื่นๆ
- ใช้เลย์เอาต์ที่ได้รับการพิสูจน์แล้ว: ใช้เลย์เอาต์ Canonical เช่น รายการ-รายละเอียดและ แผงสนับสนุนสำหรับแอปที่เพิ่มประสิทธิภาพในหน้าจอขนาดใหญ่
- การนำทางแบบปรับได้: ใช้รูปแบบการนำทางที่ปรับให้เข้ากับพื้นที่แสดงผลที่มีอยู่โดยอัตโนมัติ
สภาพแวดล้อมในการพัฒนาซอฟต์แวร์
- Android Studio พร้อม Compose: วิธีตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ เพื่อใช้ Compose
- เครื่องมือสำหรับ Compose: ฟีเจอร์ใหม่ของ Android Studio ที่รองรับ Compose
- Kotlin สำหรับ Compose: สำนวนเฉพาะของ Kotlin ใช้ได้กับ Compose
- เปรียบเทียบเมตริกของ Compose และ View: การย้ายข้อมูลไปยัง Compose อาจส่งผลต่อขนาด APK และประสิทธิภาพรันไทม์ของแอปอย่างไร
- รายการวัสดุ: จัดการทรัพยากร Dependency ทั้งหมดของ Compose โดยระบุ เฉพาะเวอร์ชันของ BOM
การออกแบบ
- เลย์เอาต์: คอมโพเนนต์เลย์เอาต์ของ Compose และวิธีออกแบบเลย์เอาต์ของคุณเอง
- พื้นฐานของเลย์เอาต์: องค์ประกอบพื้นฐานสำหรับ UI ของแอปที่ตรงไปตรงมา
- Material Components และเลย์เอาต์: Material Components และเลย์เอาต์ ใน Compose
- เลย์เอาต์ที่กำหนดเอง: ควบคุมเลย์เอาต์ของแอปและออกแบบ เลย์เอาต์ที่กำหนดเองของคุณเอง
- เส้นแนว: สร้างเส้นบอกแนวที่กำหนดเองเพื่อจัดแนว และวางตำแหน่งองค์ประกอบ UI อย่างแม่นยำ
- การวัดผลแบบ Intrinsics: วิธีค้นหาข้อมูลเกี่ยวกับองค์ประกอบย่อย ก่อนที่จะวัด เนื่องจาก Compose จะวัดองค์ประกอบ UI เพียงครั้งเดียวต่อการส่งผ่าน
- ConstraintLayout: ใช้
ConstraintLayoutใน UI ของ Compose
- ระบบการออกแบบ: ใช้ระบบการออกแบบและทำให้แอปมี
รูปลักษณ์ที่สอดคล้องกัน
- Material Design 3: ใช้ Material You ด้วยการใช้งาน Compose ของ Material Design 3
- การย้ายข้อมูลจาก Material 2 ไปยัง Material 3: ย้ายข้อมูลแอปจาก Material Design 2 ไปยัง Material Design 3 ใน Compose
- Material Design 2: ปรับแต่งการใช้งาน Compose ของ Material Design 2 ให้เหมาะกับแบรนด์ของผลิตภัณฑ์
- ระบบการออกแบบที่กำหนดเอง: ใช้ระบบการออกแบบที่กำหนดเองใน Compose และปรับ Composable ของ Material Design ที่มีอยู่ให้เหมาะกับระบบการออกแบบใหม่
- โครงสร้างของธีม: โครงสร้างและ API ระดับล่างที่ใช้โดย
MaterialThemeและระบบการออกแบบที่กำหนดเอง
- รายการและตารางกริด: ตัวเลือกการเขียนสำหรับการจัดการและการแสดงรายการและ ตารางกริดของข้อมูล
- ข้อความ: ตัวเลือกหลักใน Compose สำหรับการแสดงและแก้ไขข้อความ
- กราฟิก: รวบรวมฟีเจอร์สำหรับการสร้างและทำงานกับกราฟิกที่กำหนดเอง
- ภาพเคลื่อนไหว: ตัวเลือก Compose สำหรับการทำให้องค์ประกอบ UI เคลื่อนไหว
- ท่าทางสัมผัส: สร้าง UI ของ Compose ที่ตรวจหาและโต้ตอบกับท่าทางสัมผัสของผู้ใช้
- การจัดการการโต้ตอบของผู้ใช้: วิธีที่ Compose สรุปอินพุตระดับต่ำเป็นการโต้ตอบระดับสูง เพื่อให้คุณปรับแต่งวิธีที่คอมโพเนนต์ตอบสนองต่อการดำเนินการของผู้ใช้ได้
การปรับใช้ Compose
- ย้ายข้อมูลแอปแบบวิวเบส: ย้ายข้อมูลแอปแบบวิวเบสไปยัง Compose
- กลยุทธ์การย้ายข้อมูล: วิธีนำ Compose มาใช้ในโค้ดเบสอย่างปลอดภัยและค่อยเป็นค่อยไป
- API การทำงานร่วมกัน: API ของ Compose เพื่อช่วยให้คุณรวม Compose กับ UI แบบวิวเบส
- ข้อควรพิจารณาอื่นๆ: ธีม สถาปัตยกรรม การทดสอบ และข้อควรพิจารณาอื่นๆ ขณะย้ายข้อมูลแอปแบบวิวเบสไปยัง Compose
- Compose และไลบรารีอื่นๆ: วิธีใช้ไลบรารีแบบวิวเบสในเนื้อหา Compose
- สถาปัตยกรรม Compose: ใช้รูปแบบโฟลว์แบบทิศทางเดียวใน
Compose, ใช้ตัวเก็บสถานะและเหตุการณ์ และใช้
ViewModelใน Compose - การนำทาง: ใช้
NavControllerเพื่อผสานรวมคอมโพเนนต์การนำทางกับ UI ของ Compose - ทรัพยากร: ทำงานกับทรัพยากรของแอปในโค้ด Compose
- การช่วยเหลือพิเศษ: รองรับผู้ใช้ที่มีข้อกำหนดด้านการช่วยเหลือพิเศษ
- การทดสอบ: ทดสอบโค้ด Compose
- ข้อมูลสรุปการทดสอบ: ข้อมูลอ้างอิงแบบย่อของ Compose Testing API ที่มีประโยชน์
แหล่งข้อมูลเพิ่มเติม
- เริ่มตั้งค่า
- เส้นทางการเรียนรู้ที่คัดสรรมาแล้ว
- หลักเกณฑ์ของ Compose API
- เอกสารอ้างอิง API
- Codelabs
- แอปตัวอย่าง
- วิดีโอ
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- ข้อมูลที่กำหนดขอบเขตในเครื่องด้วย CompositionLocal
- ข้อควรพิจารณาอื่นๆ
- องค์ประกอบของธีมใน Compose