เครื่องมือตรวจสอบเลย์เอาต์ใน Android Studio ช่วยให้คุณแก้ไขข้อบกพร่องของเลย์เอาต์ของแอปได้โดย ซึ่งแสดงลำดับชั้นของข้อมูลพร็อพเพอร์ตี้ ซึ่งคุณสามารถตรวจสอบคุณสมบัติของข้อมูลพร็อพเพอร์ตี้แต่ละรายการ ด้วย เครื่องมือตรวจสอบเลย์เอาต์ คุณจะสามารถเปรียบเทียบเลย์เอาต์ของแอปกับแบบจำลองการออกแบบ แสดงมุมมองขยายหรือมุมมอง 3 มิติของแอป และตรวจสอบรายละเอียดการจัดวางที่ รันไทม์ ซึ่งจะเป็นประโยชน์อย่างยิ่งเมื่อสร้างเลย์เอาต์ในระหว่างรันไทม์ เมื่อเทียบกับ XML ทั้งหมด และเลย์เอาต์ทำงานผิดปกติ
![](https://developer.android.google.cn/static/studio/images/embedded-layout-inspector.png?authuser=8&hl=th)
เริ่มต้นใช้งาน
หากต้องการเริ่มใช้เครื่องมือตรวจสอบเลย์เอาต์ ให้เรียกใช้แอป แล้วไปที่
หน้าต่าง Running Devices แล้วคลิก Toggle Layout Inspector
หากคุณสลับไปมาระหว่างอุปกรณ์หรือโปรเจ็กต์ต่างๆ เครื่องมือตรวจสอบเลย์เอาต์
จะเชื่อมต่อโดยอัตโนมัติกับกระบวนการที่แก้ไขข้อบกพร่องได้ซึ่งทำงานอยู่ในเบื้องหน้า
อุปกรณ์ที่เชื่อมต่อ
วิธีทำงานทั่วไปมีดังนี้
- หากต้องการดูลำดับชั้นและตรวจสอบพร็อพเพอร์ตี้ของแต่ละข้อมูลพร็อพเพอร์ตี้ ให้ใช้ หน้าต่างเครื่องมือแผนผังคอมโพเนนต์และแอตทริบิวต์ เครื่องมือตรวจสอบเลย์เอาต์อาจ จำเป็นต้องรีสตาร์ทกิจกรรมเพื่อเข้าถึงแอตทริบิวต์ สำหรับข้อมูลเพิ่มเติม โปรดดู หลีกเลี่ยงการรีสตาร์ทกิจกรรม
- เพื่อเลือกมุมมองโดยคลิก 1 ครั้งที่ข้อมูลพร็อพเพอร์ตี้โดยตรง หรือไปยังโค้ด
โดยดับเบิลคลิกมุมมอง เปิดใช้สลับการตรวจสอบเชิงลึก
- หากต้องการโต้ตอบกับแอป ให้ปิดใช้ตัวเลือกสลับการตรวจสอบเชิงลึก
- หากต้องการตรวจสอบอุปกรณ์จริง ให้เปิดใช้ การมิเรอร์อุปกรณ์
- หากต้องการเปิดใช้การอัปเดตแบบสดขณะอัปเดต UI ของแอป ให้ตรวจสอบว่า การแก้ไขทันที คือ เปิดอยู่
- หากต้องการใช้โหมด 3 มิติ ให้ถ่ายภาพสแนปชอตของเครื่องมือตรวจสอบเลย์เอาต์
จากนั้นจ่าย คลิกโหมด 3 มิติ
เลือกหรือแยกมุมมอง
มุมมองมักจะดึงสิ่งที่ผู้ใช้เห็นและโต้ตอบด้วย แผนผังคอมโพเนนต์แสดงลำดับชั้นของแอปแบบเรียลไทม์พร้อมข้อมูลพร็อพเพอร์ตี้แต่ละรายการ ซึ่งจะช่วยคุณแก้ไขข้อบกพร่องของเลย์เอาต์ของแอปเพราะคุณจะได้เห็นภาพ องค์ประกอบภายในแอปและค่าที่เชื่อมโยงกับองค์ประกอบนั้นๆ
หากต้องการเลือกมุมมอง ให้คลิกมุมมองในแผนผังคอมโพเนนต์หรือการแสดงเลย์เอาต์ แอตทริบิวต์การออกแบบทั้งหมดสำหรับมุมมองที่เลือกจะปรากฏในแอตทริบิวต์ แผง
หากเลย์เอาต์มีมุมมองที่ทับซ้อนกัน คุณจะเห็นมุมมองทั้งหมดในภูมิภาค
เมื่อคุณคลิกขวาในโหมดตรวจสอบอย่างละเอียด
หากต้องการเลือก
มุมมองที่ไม่ได้อยู่ด้านหน้า ให้คลิกมุมมองในแผนผังคอมโพเนนต์ หรือ
หมุนเลย์เอาต์
ในการใช้งานเค้าโครงที่ซับซ้อน คุณสามารถแยกมุมมองแต่ละมุมมองออกเพื่อให้มีเพียง
ชุดย่อยของเลย์เอาต์จะแสดงในแผนผังคอมโพเนนต์และแสดงผลใน
การแสดงเลย์เอาต์ หากต้องการแยกมุมมอง ให้ถ่ายสแนปชอต
, คลิกขวา
มุมมองในแผนผังคอมโพเนนต์ แล้วเลือกแสดงเฉพาะซับทรีหรือ
แสดงผู้ปกครองเท่านั้น หากต้องการกลับไปดูมุมมองแบบเต็ม ให้คลิกขวาที่มุมมอง
เลือกแสดงทั้งหมด คุณต้องถ่ายสแนปชอตก่อนที่จะแยกมุมมอง
ซ่อนเส้นขอบของเลย์เอาต์และดูป้ายกำกับ
หากต้องการซ่อนกรอบล้อมรอบหรือดูป้ายกำกับขององค์ประกอบการออกแบบ ให้คลิก ดู
ตัวเลือก
ที่ด้านบนของการแสดงเลย์เอาต์และสลับแสดงขอบหรือแสดงมุมมอง
ป้ายกำกับ
จับภาพสแนปชอตลำดับชั้นของเลย์เอาต์
เครื่องมือตรวจสอบเลย์เอาต์ช่วยให้คุณบันทึกสแนปชอตของลำดับชั้นเลย์เอาต์ของแอปที่ทำงานอยู่ได้ เพื่อให้คุณแชร์กับผู้อื่นหรือใช้อ้างอิงในภายหลังได้
สแนปชอตจะเก็บข้อมูลที่คุณมักเห็นเมื่อใช้การออกแบบ
เครื่องมือตรวจสอบ รวมถึงการแสดงผล 3 มิติโดยละเอียดของเลย์เอาต์ แผนผังคอมโพเนนต์
ของมุมมอง เขียน หรือแบบผสม และแอตทริบิวต์โดยละเอียดสำหรับแต่ละ
ของ UI ของคุณ หากต้องการบันทึกสแนปชอต ให้คลิกส่งออก/นำเข้าสแนปชอต
จากนั้นจ่าย
ส่งออกสแนปชอต
โหลดสแนปชอตของเครื่องมือตรวจสอบเลย์เอาต์ที่บันทึกไว้ก่อนหน้านี้โดยคลิก นำเข้าสแนปชอต
โหมด 3 มิติ
การแสดงเลย์เอาต์จะมีการแสดงภาพ 3 มิติขั้นสูง
ลำดับชั้นการแสดงผลของแอปขณะรันไทม์ ถ่ายสแนปชอตเพื่อใช้ฟีเจอร์นี้
คลิก
ปุ่มโหมด 3 มิติ
ในช่วง
หน้าต่างเครื่องมือตรวจสอบสแนปชอต และหมุนหน้าต่างนั้นโดยการลากเมาส์
![เครื่องมือตรวจสอบเลย์เอาต์: มุมมอง 3 มิติ](https://developer.android.google.cn/static/studio/images/li-3d-mode.png?authuser=8&hl=th)
![เครื่องมือตรวจสอบเลย์เอาต์: มุมมองระยะห่างของเลเยอร์](https://developer.android.google.cn/static/studio/images/debug/layout-inspector-layer-spacing.png?authuser=8&hl=th)
เปรียบเทียบการจัดวางแอปกับการวางซ้อนภาพอ้างอิง
หากต้องการเปรียบเทียบเลย์เอาต์ของแอปกับรูปภาพอ้างอิง เช่น การจำลอง UI คุณสามารถทำดังนี้ โหลดการวางซ้อนภาพบิตแมปในเครื่องมือตรวจสอบการออกแบบ
- หากต้องการโหลดการวางซ้อน ให้เลือกโหลดโฆษณาซ้อนทับ
จากแถบเครื่องมือเครื่องมือตรวจสอบการออกแบบ โฆษณาซ้อนทับได้รับการปรับขนาดให้พอดีกับ เลย์เอาต์
- หากต้องการปรับความโปร่งใสของการวางซ้อน ให้ใช้แถบเลื่อนอัลฟ่าของการวางซ้อน
- หากต้องการนำการวางซ้อนออก ให้คลิกล้างการวางซ้อน
ตรวจสอบการเขียน
เครื่องมือตรวจสอบเลย์เอาต์ให้คุณตรวจสอบเลย์เอาต์ของ Compose ในแอปที่ทำงานอยู่ใน โปรแกรมจำลองหรืออุปกรณ์จริง คุณสามารถใช้เครื่องมือตรวจสอบเลย์เอาต์เพื่อดูวิธี บ่อยครั้งที่ Composable ถูกจัดเรียงใหม่หรือข้าม ซึ่งจะช่วยระบุปัญหาเกี่ยวกับ แอปของคุณ เช่น ข้อผิดพลาดในการเขียนโค้ดบางอย่างอาจทำให้ UI ต้องเขียนใหม่ มากเกินไป ซึ่งอาจทำให้ประสิทธิภาพไม่ดี ข้อผิดพลาดในการเขียนโค้ดบางอย่างอาจป้องกัน UI ของคุณไม่สามารถเขียนใหม่ ทำให้ไม่สามารถเปลี่ยนแปลง UI ของคุณได้ ขึ้นบนหน้าจอ
ดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือตรวจสอบเลย์เอาต์สำหรับ Compose
หลีกเลี่ยงการรีสตาร์ทกิจกรรม
เครื่องมือตรวจสอบเลย์เอาต์ต้องมีการตั้งค่าส่วนกลางอย่างใดอย่างหนึ่งต่อไปนี้จึงจะทำงานได้ อย่างเหมาะสม หากคุณไม่ได้ระบุการตั้งค่าโดยรวม ระบบจะใช้เครื่องมือตรวจสอบเลย์เอาต์โดยอัตโนมัติ ตั้งเป็น 1
adb shell settings put global debug_view_attributes_application_package <processname>
ตัวเลือกนี้จะสร้างข้อมูลเพิ่มเติมสำหรับการตรวจสอบ ขั้นตอนได้
adb shell settings put global debug_view_attributes 1
ตัวเลือกนี้จะสร้างข้อมูลเพิ่มเติมสำหรับการตรวจสอบ กระบวนการต่างๆ บนอุปกรณ์
การเปลี่ยนการตั้งค่าส่วนกลางอาจทำให้การรีสตาร์ทกิจกรรม เพื่อหลีกเลี่ยงกิจกรรม คุณสามารถเปลี่ยนการตั้งค่าใน Android Studio หรือเปลี่ยน ตัวเลือกสำหรับนักพัฒนาซอฟต์แวร์ในการตั้งค่าของอุปกรณ์
หากต้องการเปิดใช้การรีเฟรชอัตโนมัติใน Android Studio ให้เปิดไฟล์เรียกใช้/แก้ไขข้อบกพร่อง Configurations โดยเลือก Run > Edit Configurations จากเมนู จากนั้น ไปที่แท็บ เบ็ดเตล็ด แล้วทำเครื่องหมายที่ช่อง เชื่อมต่อกับการออกแบบ เครื่องมือตรวจสอบโดยไม่ต้องรีสตาร์ทกิจกรรมในส่วนตัวเลือกเครื่องมือตรวจสอบเลย์เอาต์
![ตัวเลือกการรีสตาร์ทกิจกรรมในการกำหนดค่าเรียกใช้](https://developer.android.google.cn/static/studio/images/debug/li-activity-restart.png?authuser=8&hl=th)
หรือ เปิดใช้ตัวเลือกสำหรับนักพัฒนาซอฟต์แวร์ของอุปกรณ์ และ แล้วเปิด เปิดใช้การตรวจสอบแอตทริบิวต์มุมมองจาก การตั้งค่านักพัฒนาซอฟต์แวร์ของอุปกรณ์
เครื่องมือตรวจสอบเลย์เอาต์แบบสแตนด์อโลน
เพื่อประสิทธิภาพที่ดีที่สุด เราขอแนะนำให้ใช้เครื่องมือตรวจสอบการออกแบบโดยค่าเริ่มต้น โหมดแบบฝัง หากคุณต้องการยกเลิกการฝังเครื่องมือตรวจสอบการออกแบบ ให้ไปที่ไฟล์ (Android Studio ใน macOS)> การตั้งค่า > เครื่องมือ > เครื่องมือตรวจสอบเลย์เอาต์ แล้วล้างช่องทำเครื่องหมายเปิดใช้เครื่องมือตรวจสอบการออกแบบที่ฝังไว้
ในโหมดสแตนด์อโลน ให้เปิดข้อมูลอัปเดตแบบเรียลไทม์โดยคลิกอัปเดตแบบเรียลไทม์
ตัวเลือก รายการจาก
แถบเครื่องมือเครื่องมือตรวจสอบเลย์เอาต์