เครื่องมือตรวจสอบเลย์เอาต์

เครื่องมือตรวจสอบเลย์เอาต์ช่วยให้คุณตรวจสอบเลย์เอาต์ Compose ภายในแอปที่ทำงานอยู่ในโปรแกรมจำลองหรืออุปกรณ์จริงได้ คุณสามารถใช้เครื่องมือตรวจสอบเลย์เอาต์เพื่อตรวจสอบความถี่ที่ Composable ได้รับการคอมโพสเซอร์ใหม่หรือข้าม ซึ่งจะช่วยระบุปัญหาในแอปได้ ตัวอย่างเช่น ข้อผิดพลาดในการเขียนโค้ดบางอย่างอาจทำให้ UI ต้องเขียนใหม่มากเกินไป ซึ่งส่งผลให้ประสิทธิภาพต่ำ ข้อผิดพลาดในการเขียนโค้ดบางอย่างอาจทําให้ UI ไม่สามารถจัดเรียงใหม่ได้ จึงทําให้การเปลี่ยนแปลง UI ไม่แสดงบนหน้าจอ หากคุณเพิ่งเคยใช้เครื่องมือตรวจสอบเลย์เอาต์ โปรดดูคำแนะนำเกี่ยวกับวิธีเรียกใช้

ดูจํานวนการเรียบเรียงใหม่

เมื่อแก้ไขข้อบกพร่องของเลย์เอาต์การเขียน การทราบว่าเมื่อใดที่ Composable recompose จะเป็นสิ่งสำคัญในการทำความเข้าใจว่า UI ใช้งานได้ถูกต้องหรือไม่ เช่น หากมีการคอมโพสิชันใหม่หลายครั้งเกินไป แอปอาจทำงานมากกว่าที่จำเป็น ในทางกลับกัน คอมโพเนนต์ที่ไม่ได้ปรับแต่งใหม่เมื่อคุณคาดว่าจะทำให้เกิดลักษณะการทำงานที่ไม่คาดคิด

เครื่องมือตรวจสอบเลย์เอาต์จะแสดงเมื่อคอมโพสิชันแบบแยกต่างหากในลําดับชั้นเลย์เอาต์ได้รับการคอมโพสใหม่หรือข้ามไปขณะที่คุณโต้ตอบกับแอป ใน Android Studio ระบบจะไฮไลต์การคอมโพสใหม่เพื่อช่วยคุณระบุตําแหน่งใน UI ที่คอมโพสิชันกำลังคอมโพสใหม่

รูปที่ 1 ระบบจะไฮไลต์การคอมโพสใหม่ในเครื่องมือตรวจสอบเลย์เอาต์

ส่วนที่มีการไฮไลต์จะแสดงการวางซ้อนแบบไล่ระดับของคอมโพสิเบิลในส่วนรูปภาพของเครื่องมือตรวจสอบเลย์เอาต์ และค่อย ๆ หายไปเพื่อให้คุณทราบว่าคอมโพสิเบิลที่มีการคอมโพสิชันใหม่สูงสุดอยู่ในตำแหน่งใดของ UI หากคอมโพสิเบิลหนึ่งจัดองค์ประกอบใหม่ในอัตราที่สูงกว่าคอมโพสิเบิลอื่น คอมโพสิเบิลแรกจะได้รับสีการวางซ้อนแบบไล่ระดับที่เข้มขึ้น หากคลิกสองครั้งที่คอมโพสิเบิลในเครื่องมือตรวจสอบเลย์เอาต์ ระบบจะนำคุณไปยังโค้ดที่เกี่ยวข้องเพื่อการวิเคราะห์

รูปที่ 2 ตัวนับองค์ประกอบและการข้ามในเครื่องมือตรวจสอบเลย์เอาต์

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

การรีเซ็ตการนับจะช่วยให้คุณเข้าใจการคอมโพสิชันใหม่หรือการข้ามระหว่างการโต้ตอบกับแอปที่เฉพาะเจาะจง หากต้องการรีเซ็ตการนับ ให้คลิกรีเซ็ตที่ด้านบนของแผงต้นไม้คอมโพเนนต์

เปิดใช้องค์ประกอบและตัวนับการข้ามในเครื่องมือตรวจสอบเลย์เอาต์

รูปที่ 3 เปิดใช้องค์ประกอบและตัวนับการข้ามในเครื่องมือตรวจสอบเลย์เอาต์

เขียนความหมาย

ในเครื่องมือเขียน Semantics จะอธิบาย UI ในลักษณะอื่นที่เข้าใจง่ายสำหรับบริการการช่วยเหลือพิเศษและเฟรมเวิร์กการทดสอบ คุณสามารถใช้เครื่องมือตรวจสอบเลย์เอาต์เพื่อตรวจสอบข้อมูลเชิงความหมายในเลย์เอาต์ Compose

ข้อมูลความหมายที่แสดงโดยใช้
เครื่องมือตรวจสอบการออกแบบ

รูปที่ 4 ข้อมูลเชิงความหมายที่แสดงโดยใช้เครื่องมือตรวจสอบเลย์เอาต์

เมื่อเลือกโหนดเขียน ให้ใช้แผงแอตทริบิวต์เพื่อตรวจสอบว่าโหนดประกาศข้อมูลเชิงความหมายโดยตรง ผสานความหมายจากรายการย่อย หรือทั้งสองอย่าง หากต้องการระบุอย่างรวดเร็วว่าโหนดใดมีอรรถศาสตร์ที่ประกาศหรือรวม ให้เลือกรายการแบบเลื่อนลงตัวเลือกมุมมองในแผงแผนผังคอมโพเนนต์ แล้วเลือกไฮไลต์เลเยอร์ความหมาย การดำเนินการนี้จะไฮไลต์เฉพาะโหนดในแผนผังที่มีความหมายและคุณสามารถใช้แป้นพิมพ์เพื่อสลับไปมาระหว่างโหนดต่างๆ ได้อย่างรวดเร็ว