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

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

รับจำนวนการจัดองค์ประกอบใหม่

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

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

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

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

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

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

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

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

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

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

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

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

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

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