แก้ไขข้อบกพร่องการออกแบบด้วยตัวตรวจสอบการออกแบบ

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

android layout

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

ดูข้อมูลเพิ่มเติมได้ที่แก้ไขข้อบกพร่องของ UI ของ Compose

เริ่มต้นใช้งาน

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

วิธีทำงานทั่วไปมีดังนี้

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

เลือกหรือแยกคอมโพเนนต์

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

หากต้องการเลือกคอมโพเนนต์ ให้คลิกคอมโพเนนต์ในแผนผังคอมโพเนนต์หรือ การแสดงเลย์เอาต์ แอตทริบิวต์เลย์เอาต์ทั้งหมดสำหรับคอมโพเนนต์ที่เลือกจะปรากฏ ในแผงแอตทริบิวต์

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

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

ซ่อนเส้นขอบเลย์เอาต์และดูป้ายกำกับ

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

จับภาพสแนปชอตของลำดับชั้นเลย์เอาต์

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

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

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

เปรียบเทียบเลย์เอาต์แอปกับการวางซ้อนภาพอ้างอิง

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

• หากต้องการโหลดการซ้อนทับ ให้เลือกตัวเลือกโหลดการซ้อนทับ จากแถบเครื่องมือเครื่องมือตรวจสอบเลย์เอาต์ ระบบจะปรับขนาดภาพซ้อนทับให้พอดีกับ เลย์เอาต์
• หากต้องการปรับความโปร่งใสของภาพซ้อนทับ ให้ใช้แถบเลื่อนอัลฟ่าของภาพซ้อนทับ
• หากต้องการนำภาพซ้อนทับออก ให้คลิกล้างภาพซ้อนทับ

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

เราขอแนะนำให้ใช้เครื่องมือตรวจสอบเลย์เอาต์ในโหมดฝังเริ่มต้นเพื่อให้ได้ประสิทธิภาพสูงสุด หากต้องการยกเลิกการฝังเครื่องมือตรวจสอบเลย์เอาต์ ให้ไปที่ไฟล์ (Android Studio ใน macOS) > การตั้งค่า > เครื่องมือ > เครื่องมือตรวจสอบเลย์เอาต์ แล้วยกเลิกการเลือกช่องทําเครื่องหมายเปิดใช้เครื่องมือตรวจสอบเลย์เอาต์แบบฝัง

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

แหล่งข้อมูลเพิ่มเติม

ดูเนื้อหา

• แก้ไขข้อบกพร่องของเลย์เอาต์ด้วยเครื่องมือตรวจสอบเลย์เอาต์ (มุมมอง)