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