เครื่องมือตรวจสอบเลย์เอาต์ใน Android Studio ช่วยให้คุณแก้ไขข้อบกพร่องของเลย์เอาต์แอปได้โดย แสดงลำดับชั้นของมุมมองซึ่งคุณสามารถตรวจสอบพร็อพเพอร์ตี้ของแต่ละมุมมองได้ เครื่องมือตรวจสอบเลย์เอาต์ช่วยให้คุณเปรียบเทียบเลย์เอาต์ของแอปกับภาพจำลองการออกแบบ แสดงมุมมองขยายหรือ 3 มิติของแอป และตรวจสอบรายละเอียดของเลย์เอาต์ที่ รันไทม์ได้ ซึ่งจะมีประโยชน์อย่างยิ่งเมื่อเลย์เอาต์สร้างขึ้นที่รันไทม์แทนที่จะสร้างใน XML ทั้งหมด และเลย์เอาต์ทำงานอย่างไม่คาดคิด
เริ่มต้นใช้งาน
หากต้องการเริ่มใช้เครื่องมือตรวจสอบเลย์เอาต์ ให้เรียกใช้แอป ไปที่หน้าต่างอุปกรณ์ที่กำลังทำงาน แล้วคลิกสลับเครื่องมือตรวจสอบเลย์เอาต์
หากคุณสลับไปมาระหว่างอุปกรณ์หรือโปรเจ็กต์หลายรายการ Layout Inspector
จะเชื่อมต่อกับกระบวนการที่แก้ไขข้อบกพร่องได้ซึ่งทำงานอยู่เบื้องหน้าของ
อุปกรณ์ที่เชื่อมต่อโดยอัตโนมัติ
วิธีทำงานทั่วไปมีดังนี้
- หากต้องการดูลำดับชั้นและตรวจสอบพร็อพเพอร์ตี้ของแต่ละมุมมอง ให้ใช้หน้าต่างเครื่องมือแผนผังคอมโพเนนต์และแอตทริบิวต์ Layout Inspector อาจ ต้องรีสตาร์ทกิจกรรมเพื่อเข้าถึงแอตทริบิวต์ ดูข้อมูลเพิ่มเติมได้ที่ ดูการตรวจสอบแอตทริบิวต์
- หากต้องการเลือกมุมมองโดยคลิกเพียงครั้งเดียวที่มุมมองโดยตรง หรือไปที่โค้ด
โดยดับเบิลคลิกที่มุมมอง ให้เปิดใช้สลับการตรวจสอบอย่างละเอียด

- หากต้องการโต้ตอบกับแอป ให้ปิดใช้สลับการตรวจสอบอย่างละเอียด

- หากต้องการตรวจสอบอุปกรณ์จริง ให้เปิดใช้การมิเรอร์อุปกรณ์
- หากต้องการเปิดใช้การอัปเดตแบบเรียลไทม์ขณะอัปเดต UI ของแอป ให้ตรวจสอบว่าได้เปิดใช้การแก้ไขแบบเรียลไทม์แล้ว
- หากต้องการใช้โหมด 3 มิติ ให้ถ่ายภาพรวมของ Layout Inspector
แล้ว
คลิกโหมด 3 มิติ 
เลือกหรือแยกมุมมอง
โดยปกติแล้ว View จะวาดสิ่งที่ผู้ใช้มองเห็นและโต้ตอบด้วยได้ แผนผังคอมโพเนนต์จะแสดงลําดับชั้นของแอปแบบเรียลไทม์พร้อมกับคอมโพเนนต์มุมมองแต่ละรายการ ซึ่งช่วยให้คุณแก้ไขข้อบกพร่องของเลย์เอาต์แอปได้เนื่องจากคุณสามารถแสดงภาพองค์ประกอบภายในแอปและค่าที่เชื่อมโยงกับองค์ประกอบเหล่านั้นได้
หากต้องการเลือกมุมมอง ให้คลิกในแผนผังคอมโพเนนต์หรือการแสดงเลย์เอาต์ แอตทริบิวต์เลย์เอาต์ทั้งหมดสำหรับมุมมองที่เลือกจะปรากฏในแผงแอตทริบิวต์
หากเลย์เอาต์มีมุมมองที่ซ้อนทับกัน คุณจะเห็นมุมมองทั้งหมดในภูมิภาค
เมื่อคลิกขวาในโหมดตรวจสอบอย่างละเอียด
หากต้องการเลือกมุมมองที่ไม่ได้อยู่ด้านหน้า ให้คลิกมุมมองนั้นในแผนผังคอมโพเนนต์หรือหมุนเลย์เอาต์
หากต้องการทำงานกับเลย์เอาต์ที่ซับซ้อน คุณสามารถแยกมุมมองแต่ละรายการเพื่อให้เฉพาะ
ชุดย่อยของเลย์เอาต์แสดงในComponent Tree และแสดงผลใน
Layout Display หากต้องการแยกมุมมอง ให้ถ่ายสแนปชอต
คลิกขวา
ที่มุมมองในแผนผังคอมโพเนนต์ แล้วเลือกแสดงเฉพาะแผนผังย่อยหรือ
แสดงเฉพาะองค์ประกอบระดับบนสุด หากต้องการกลับไปที่มุมมองแบบเต็ม ให้คลิกขวาที่มุมมองแล้ว
เลือกแสดงทั้งหมด คุณต้องถ่ายสแนปชอตก่อนแยกมุมมอง
ซ่อนเส้นขอบเลย์เอาต์และดูป้ายกำกับ
หากต้องการซ่อนกล่องขอบเขตหรือป้ายกำกับมุมมองสำหรับองค์ประกอบเลย์เอาต์ ให้คลิกดู
ตัวเลือก
ที่ด้านบนของการแสดงเลย์เอาต์ แล้วสลับแสดงเส้นขอบหรือแสดงป้ายกำกับ
มุมมอง
จับภาพสแนปชอตลำดับชั้นเลย์เอาต์
เครื่องมือตรวจสอบเลย์เอาต์ช่วยให้คุณบันทึกภาพรวมของลำดับชั้นเลย์เอาต์ของแอปที่กำลังทำงาน เพื่อให้คุณแชร์กับผู้อื่นหรืออ้างอิงในภายหลังได้
สแนปชอตจะบันทึกข้อมูลที่คุณมักจะเห็นเมื่อใช้เครื่องมือตรวจสอบเลย์เอาต์ ซึ่งรวมถึงการแสดงผล 3 มิติแบบละเอียดของเลย์เอาต์ ต้นไม้คอมโพเนนต์ของเลย์เอาต์ View, Compose หรือเลย์เอาต์แบบไฮบริด และแอตทริบิวต์แบบละเอียดสำหรับคอมโพเนนต์แต่ละรายการของ UI หากต้องการบันทึกสแนปชอต ให้คลิกส่งออก/นำเข้าสแนปชอต
แล้วคลิก
ส่งออกสแนปชอต
โหลดภาพรวมของเครื่องมือตรวจสอบเลย์เอาต์ที่บันทึกไว้ก่อนหน้านี้โดยคลิกนำเข้าภาพรวม
โหมด 3 มิติ
การแสดงเลย์เอาต์มีภาพ 3 มิติขั้นสูงของลำดับชั้นของมุมมองของแอปในรันไทม์ หากต้องการใช้ฟีเจอร์นี้ ให้ถ่ายภาพรวม
คลิกปุ่มโหมด 3 มิติ
ใน
หน้าต่างเครื่องมือตรวจสอบภาพรวม แล้วหมุนโดยการลากเมาส์
เปรียบเทียบเลย์เอาต์แอปกับการวางซ้อนรูปภาพอ้างอิง
หากต้องการเปรียบเทียบเลย์เอาต์แอปกับรูปภาพอ้างอิง เช่น ม็อกอัป UI คุณสามารถ โหลดการวางซ้อนรูปภาพบิตแมปในเครื่องมือตรวจสอบเลย์เอาต์ได้
- หากต้องการโหลดการวางซ้อน ให้เลือกตัวเลือกโหลดการวางซ้อน
จากแถบเครื่องมือเครื่องมือตรวจสอบเลย์เอาต์ ระบบจะปรับขนาดภาพซ้อนทับให้พอดีกับ
เลย์เอาต์ - หากต้องการปรับความโปร่งใสของภาพซ้อนทับ ให้ใช้แถบเลื่อนอัลฟ่าของภาพซ้อนทับ
- หากต้องการนำภาพซ้อนทับออก ให้คลิกล้างภาพซ้อนทับ

ตรวจสอบ Compose
Layout Inspector ช่วยให้คุณตรวจสอบเลย์เอาต์ Compose ภายในแอปที่กำลังทำงานใน โปรแกรมจำลองหรืออุปกรณ์จริงได้ คุณสามารถใช้เครื่องมือตรวจสอบเลย์เอาต์เพื่อตรวจสอบความถี่ที่ Composable ถูก Recompose หรือข้าม ซึ่งจะช่วยระบุปัญหาในแอปได้ ตัวอย่างเช่น ข้อผิดพลาดในการเขียนโค้ดบางอย่างอาจบังคับให้ UI ของคุณ Recompose มากเกินไป ซึ่งอาจทำให้ประสิทธิภาพไม่ดี ข้อผิดพลาดในการเขียนโค้ดบางอย่างอาจทำให้ UI ไม่สามารถเขียนซ้ำได้ และส่งผลให้การเปลี่ยนแปลง UI ไม่แสดงบนหน้าจอ
ดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือตรวจสอบเลย์เอาต์สำหรับ Compose
การตรวจสอบแอตทริบิวต์มุมมอง
เครื่องมือตรวจสอบเลย์เอาต์ต้องมีการตั้งค่าส่วนกลางต่อไปนี้จึงจะทำงานได้อย่างถูกต้อง
adb shell settings put global debug_view_attributes 1
ตัวเลือกนี้จะสร้างข้อมูลเพิ่มเติมสำหรับการตรวจสอบกระบวนการทั้งหมดในอุปกรณ์
Layout Inspector จะเปิดใช้การตั้งค่าโดยอัตโนมัติเมื่อเริ่มต้น ซึ่งจะ ทำให้กิจกรรมที่อยู่เบื้องหน้าในปัจจุบันรีสตาร์ท คุณจะไม่เห็นการรีสตาร์ทกิจกรรมอีก เว้นแต่จะปิดใช้ค่าสถานะในอุปกรณ์ด้วยตนเอง
หากต้องการปิดใช้ฟีเจอร์นี้ ให้เรียกใช้คำสั่ง adb ต่อไปนี้
adb shell settings delete global debug_view_attributes
หรือปิดเปิดใช้การตรวจสอบแอตทริบิวต์มุมมอง จากตัวเลือกสำหรับนักพัฒนาแอปของอุปกรณ์
เครื่องมือตรวจสอบเลย์เอาต์แบบสแตนด์อโลน
เราขอแนะนำให้ใช้เครื่องมือตรวจสอบเลย์เอาต์ในโหมดฝังเริ่มต้นเพื่อประสิทธิภาพสูงสุด หากต้องการยกเลิกการฝัง Layout Inspector ให้ไปที่ไฟล์ (Android Studio ใน macOS)> การตั้งค่า > เครื่องมือ > Layout Inspector แล้วยกเลิกการเลือกช่องทำเครื่องหมายเปิดใช้ Layout Inspector แบบฝัง
ในโหมดสแตนด์อโลน ให้เปิดใช้การอัปเดตแบบเรียลไทม์โดยคลิกตัวเลือกการอัปเดตแบบเรียลไทม์
จากแถบเครื่องมือเครื่องมือตรวจสอบเลย์เอาต์