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 แบบปรับได้
- สร้างแอปแบบปรับได้: ดูหลักการสำคัญในการสร้างเลย์เอาต์ที่เพิ่มประสิทธิภาพสำหรับขนาดการแสดงผลต่างๆ ซึ่งรวมถึงโทรศัพท์ แท็บเล็ต อุปกรณ์พับได้ และอื่นๆ
- ใช้เลย์เอาต์ที่ได้รับการพิสูจน์แล้ว: ใช้เลย์เอาต์มาตรฐาน เช่น รายการ-รายละเอียดและแผงรองรับสำหรับแอปที่เพิ่มประสิทธิภาพบนหน้าจอขนาดใหญ่
- การนำทางแบบปรับได้: ใช้รูปแบบการนำทางที่ปรับให้เข้ากับพื้นที่การแสดงผลที่มีอยู่โดยอัตโนมัติ
สภาพแวดล้อมในการพัฒนาซอฟต์แวร์
- Android Studio พร้อม Compose: วิธีตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ เพื่อใช้ Compose
- เครื่องมือสำหรับ Compose: ฟีเจอร์ใหม่ของ Android Studio ที่รองรับ Compose
- Kotlin สำหรับ Compose: สำนวนเฉพาะของ Kotlin ใช้ได้กับ Compose
- เปรียบเทียบเมตริกของ Compose กับ View: การย้ายข้อมูลไปยัง Compose อาจส่งผลต่อ ขนาด APK และประสิทธิภาพรันไทม์ของแอปอย่างไร
- Bill of Materials: จัดการทรัพยากร Dependency ทั้งหมดของ Compose โดยระบุเฉพาะเวอร์ชันของ BoM
การออกแบบ
- เลย์เอาต์: คอมโพเนนต์เลย์เอาต์ของ Compose และวิธีออกแบบเลย์เอาต์ของคุณเอง
- พื้นฐานของเลย์เอาต์: องค์ประกอบที่ใช้สร้างสรรค์สำหรับ UI ของแอปที่ตรงไปตรงมา
- คอมโพเนนต์และเลย์เอาต์ของ Material: คอมโพเนนต์และเลย์เอาต์ของ Material ใน Compose
- เลย์เอาต์ที่กำหนดเอง: ควบคุมเลย์เอาต์ของแอปและออกแบบ เลย์เอาต์ที่กำหนดเองของคุณเอง
- เส้นแนว: สร้างเส้นแนวที่กำหนดเองเพื่อจัดแนว และวางตำแหน่งองค์ประกอบ UI ได้อย่างแม่นยำ
- การวัดผลแบบ Intrinsics: วิธีค้นหาข้อมูลเกี่ยวกับองค์ประกอบย่อย ก่อนที่จะวัด เนื่องจาก Compose จะวัดองค์ประกอบ UI เพียง ครั้งเดียวต่อการส่งผ่าน
- ConstraintLayout: ใช้
ConstraintLayoutใน UI ของ Compose
- ระบบการออกแบบ: ใช้ระบบการออกแบบและทำให้แอปมี
รูปลักษณ์ที่สอดคล้องกัน
- Material Design 3: ใช้ Material You ด้วยการใช้งาน Material Design 3 ของ Compose
- การย้ายข้อมูลจาก Material 2 ไปยัง Material 3: ย้ายข้อมูลแอปจาก Material Design 2 ไปยัง Material Design 3 ใน Compose
- Material Design 2: ปรับแต่งการใช้งาน Material Design 2 ของ Compose ให้เหมาะกับแบรนด์ของผลิตภัณฑ์
- ระบบการออกแบบที่กำหนดเอง: ใช้ระบบการออกแบบที่กำหนดเองใน Compose และปรับ Composable ของ Material Design ที่มีอยู่ให้เหมาะกับระบบการออกแบบใหม่
- องค์ประกอบของธีม: โครงสร้างและ API ระดับล่างที่
MaterialThemeและระบบการออกแบบที่กำหนดเองใช้
- รายการและตารางกริด: ตัวเลือกของ Compose สำหรับการจัดการและการแสดงรายการและ ตารางกริดของข้อมูล
- ข้อความ: ตัวเลือกหลักใน Compose สำหรับการแสดงและแก้ไขข้อความ
- กราฟิก: ฟีเจอร์ของ 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 ที่มีประโยชน์
แหล่งข้อมูลเพิ่มเติม
- เริ่มตั้งค่า
- เส้นทางการเรียนรู้ที่แนะนำ
- หลักเกณฑ์ API ของ Compose
- เอกสารอ้างอิง API
- Codelab
- แอปตัวอย่าง
- วิดีโอ
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- ข้อมูลที่มีขอบเขตเฉพาะที่ด้วย CompositionLocal
- ปัจจัยอื่นๆ ที่ควรพิจารณา
- องค์ประกอบของธีมใน Compose