เครื่องมือสำหรับการแก้ไขข้อบกพร่องของ UI ใน Compose พร้อมให้ใช้งานใน Android Studio แล้ว
เครื่องมือตรวจสอบเลย์เอาต์
เครื่องมือตรวจสอบเลย์เอาต์ช่วยให้คุณตรวจสอบเลย์เอาต์ Compose ภายในแอปที่กำลังทำงานในอีมูเลเตอร์หรืออุปกรณ์จริงได้ คุณสามารถใช้เครื่องมือตรวจสอบเลย์เอาต์เพื่อดูความถี่ที่ คอมโพสได้ถูกคอมโพสใหม่หรือข้ามไป ซึ่งจะช่วยระบุปัญหาเกี่ยวกับ แอปได้ เช่น ข้อผิดพลาดในการเขียนโค้ดบางอย่างอาจบังคับให้ UI คอมโพสใหม่ มากเกินไป ซึ่งอาจทำให้เกิด ประสิทธิภาพการทำงานที่ไม่ดี ข้อผิดพลาดในการเขียนโค้ดบางอย่างอาจป้องกันไม่ให้ UI คอมโพสใหม่ และด้วยเหตุนี้จึงทำให้การเปลี่ยนแปลง UI ไม่ปรากฏบนหน้าจอ หากยังไม่คุ้นเคยกับ เครื่องมือตรวจสอบเลย์เอาต์ โปรดดูคำแนะนำเกี่ยวกับวิธี เรียกใช้
ดูจำนวนการคอมโพสใหม่
เมื่อแก้ไขข้อบกพร่องของเลย์เอาต์ Compose การทราบว่าคอมโพสได้คอมโพสใหม่เมื่อใดเป็นสิ่งสำคัญในการทำความเข้าใจว่า UI ได้รับการใช้งานอย่างถูกต้องหรือไม่ เช่น หากคอมโพสใหม่หลายครั้งเกินไป แอปอาจทำงานมากกว่าที่จำเป็น ในทางกลับกัน คอมโพเนนต์ที่ไม่คอมโพสใหม่เมื่อคุณคาดหวังไว้อาจทำให้เกิดลักษณะการทำงานที่ไม่คาดคิด
เครื่องมือตรวจสอบเลย์เอาต์จะแสดงให้คุณเห็นว่าคอมโพสได้แต่ละรายการในลำดับชั้นของเลย์เอาต์คอมโพสใหม่หรือข้ามไปเมื่อใด ขณะที่คุณโต้ตอบกับแอป ใน Android Studio ระบบจะไฮไลต์การคอมโพสใหม่เพื่อช่วยให้คุณระบุได้ว่าคอมโพสได้คอมโพสใหม่ที่ใดใน UI
รูปที่ 1 การคอมโพสใหม่จะได้รับการไฮไลต์ในเครื่องมือตรวจสอบเลย์เอาต์
ส่วนที่ไฮไลต์จะแสดงการซ้อนทับแบบไล่ระดับสีของคอมโพสได้ในส่วนรูปภาพของเครื่องมือตรวจสอบเลย์เอาต์ และจะค่อยๆ หายไปเพื่อให้คุณทราบว่าคอมโพสได้ที่มีการคอมโพสใหม่มากที่สุดอยู่ที่ใดใน UI หากคอมโพสได้หนึ่งรายการคอมโพสใหม่ในอัตราที่สูงกว่าคอมโพสได้อีกรายการ คอมโพสได้รายการแรกจะได้รับการซ้อนทับสีแบบไล่ระดับสีที่เข้มกว่า หากคุณดับเบิลคลิกคอมโพสได้ในเครื่องมือตรวจสอบเลย์เอาต์ ระบบจะนำคุณไปยังโค้ดที่เกี่ยวข้องเพื่อทำการวิเคราะห์
เปิดหน้าต่างเครื่องมือตรวจสอบเลย์เอาต์ และเชื่อมต่อกับกระบวนการของแอป ใน แผนผังคอมโพเนนต์ จะมี 2 คอลัมน์ที่ปรากฏถัดจากลำดับชั้นของเลย์เอาต์ คอลัมน์แรกแสดงจำนวนการคอมโพสสำหรับแต่ละโหนด และคอลัมน์ที่ 2 แสดงจำนวนการข้ามสำหรับแต่ละโหนด การเลือกโหนดคอมโพสได้จะแสดงขนาดและพารามิเตอร์ของคอมโพสได้ ยกเว้นในกรณีที่เป็นฟังก์ชันอินไลน์ ซึ่งในกรณีนี้จะไม่สามารถแสดงพารามิเตอร์ได้ นอกจากนี้ คุณยังดูข้อมูลที่คล้ายกันได้ในบานหน้าต่างแอตทริบิวต์ เมื่อเลือกคอมโพสได้จากแผนผังคอมโพเนนต์ หรือการแสดงเลย์เอาต์
การรีเซ็ตจำนวนจะช่วยให้คุณเข้าใจการคอมโพสใหม่หรือการข้ามระหว่างการโต้ตอบที่เฉพาะเจาะจงกับแอป หากต้องการรีเซ็ตจำนวน ให้คลิกรีเซ็ต ที่ด้านบนของบานหน้าต่างแผนผังคอมโพเนนต์
รูปที่ 3 เปิดใช้ตัวนับการคอมโพสและการข้ามในเครื่องมือตรวจสอบเลย์เอาต์
ความหมายของ Compose
ใน Compose ความหมายจะอธิบาย UI ของคุณในลักษณะอื่นที่บริการการช่วยเหลือพิเศษและเฟรมเวิร์กการทดสอบเข้าใจได้ คุณสามารถใช้เครื่องมือตรวจสอบเลย์เอาต์เพื่อตรวจสอบข้อมูลความหมายในเลย์เอาต์ Compose ได้
เมื่อเลือกโหนด Compose ให้ใช้บานหน้าต่างแอตทริบิวต์ เพื่อตรวจสอบว่าโหนดประกาศข้อมูลความหมายโดยตรง ผสานความหมายจากโหนดลูก หรือทั้ง 2 อย่าง หากต้องการระบุโหนดที่มีความหมาย ไม่ว่าจะประกาศหรือผสานอย่างรวดเร็ว ให้เลือกเมนูแบบเลื่อนลงตัวเลือกมุมมอง ในบานหน้าต่างแผนผังคอมโพเนนต์ แล้วเลือกไฮไลต์เลเยอร์ความหมาย ซึ่งจะไฮไลต์เฉพาะโหนดในแผนผังที่มีความหมาย และคุณสามารถใช้แป้นพิมพ์เพื่อไปยังโหนดเหล่านั้นอย่างรวดเร็ว
การตรวจสอบ UI ของ Compose
Android Studio มีโหมดการตรวจสอบ UI ใน Compose Preview เพื่อช่วยให้คุณสร้าง UI ที่ปรับเปลี่ยนได้และเข้าถึงได้มากขึ้นใน Jetpack Compose ฟีเจอร์นี้คล้ายกับ เครื่องตรวจการเข้าถึง สำหรับมุมมอง
เมื่อเปิดใช้โหมดการตรวจสอบ UI ของ Compose ใน Compose Preview, Android Studio จะตรวจสอบ UI ของ Compose โดยอัตโนมัติและแนะนำการปรับปรุงเพื่อให้ UI เข้าถึงได้และปรับเปลี่ยนได้มากขึ้น Android Studio จะตรวจสอบว่า UI ทำงานได้ในหน้าจอขนาดต่างๆ ในแผงปัญหา เครื่องมือจะแสดงปัญหาที่ตรวจพบ เช่น ข้อความยืดออกบนหน้าจอขนาดใหญ่หรือคอนทราสต์ของสีต่ำ
หากต้องการเข้าถึงฟีเจอร์นี้ ให้คลิกไอคอนการตรวจสอบ UI ใน Compose Preview ดังนี้
การตรวจสอบ UI จะแสดงตัวอย่าง UI ของคุณโดยอัตโนมัติในการกำหนดค่าต่างๆ และไฮไลต์ปัญหาที่พบในการกำหนดค่าต่างๆ ในแผงปัญหา เมื่อคลิกปัญหา คุณจะเห็นรายละเอียดของปัญหา การแก้ไขที่แนะนำ และการแสดงผลที่ไฮไลต์บริเวณที่เกิดปัญหา
แก้ไขด้วย AI
สำหรับปัญหาที่ตรวจพบในโหมดการตรวจสอบ UI คุณสามารถใช้ AI Agent เพื่อเสนอและใช้การแก้ไขโค้ดได้ คลิกปุ่มแก้ไขด้วย AI ในปัญหาในแผงปัญหา Agent จะวิเคราะห์ปัญหาและโค้ดของคุณเพื่อแนะนำการเปลี่ยนแปลงที่จะแก้ไขปัญหาการช่วยเหลือพิเศษหรือปัญหาการปรับเปลี่ยน
