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

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

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

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

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

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

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

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

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

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

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

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

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

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

บันทึกสแนปชอตลําดับชั้นของเลย์เอาต์

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

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

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

โหมด 3 มิติ

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

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

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

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

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

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

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

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

ดูการตรวจสอบแอตทริบิวต์

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

adb shell settings put global debug_view_attributes 1

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

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

หากต้องการปิดใช้ Flag ให้เรียกใช้คำสั่ง adb ต่อไปนี้

adb shell settings delete global debug_view_attributes

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

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

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

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