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

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

รูปที่ 1 เครื่องมือตรวจสอบเลย์เอาต์แบบฝังสำหรับแอป Jetchat

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

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

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

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

เลือกหรือแยกมุมมอง

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

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

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

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

หมายเหตุ: ความสามารถในการแยกมุมมองจะเกิดขึ้นชั่วคราว ไม่พร้อมใช้งาน เรากำลังดำเนินการ เกี่ยวกับการแก้ไขปัญหานี้

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

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

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

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

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

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

โหมด 3 มิติ

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

รูปที่ 2 หมุนมุมมอง 3 มิติของเลย์เอาต์แล้ว

รูปที่ 3 วิธีขยายหรือย่อเลเยอร์ของเลย์เอาต์ ใช้แถบเลื่อนระยะห่างเลเยอร์

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

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

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

ตรวจสอบการเขียน

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือตรวจสอบเลย์เอาต์สำหรับ Compose

หลีกเลี่ยงการรีสตาร์ทกิจกรรม

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

1. adb shell settings put global debug_view_attributes_application_package <processname>

   ตัวเลือกนี้จะสร้างข้อมูลเพิ่มเติมสำหรับการตรวจสอบ ขั้นตอนได้

2. adb shell settings put global debug_view_attributes 1

   ตัวเลือกนี้จะสร้างข้อมูลเพิ่มเติมสำหรับการตรวจสอบ กระบวนการต่างๆ บนอุปกรณ์

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

หากต้องการเปิดใช้การรีเฟรชอัตโนมัติใน Android Studio ให้เปิดไฟล์เรียกใช้/แก้ไขข้อบกพร่อง Configurations โดยเลือก Run > Edit Configurations จากเมนู จากนั้น ไปที่แท็บ เบ็ดเตล็ด แล้วทำเครื่องหมายที่ช่อง เชื่อมต่อกับการออกแบบ เครื่องมือตรวจสอบโดยไม่ต้องรีสตาร์ทกิจกรรมในส่วนตัวเลือกเครื่องมือตรวจสอบเลย์เอาต์

รูปที่ 4 เปิดใช้การรีเฟรชอัตโนมัติจากกล่องโต้ตอบเรียกใช้/การกำหนดค่าการแก้ไขข้อบกพร่อง

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

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

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

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