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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

โหมด 3 มิติ

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

เครื่องมือตรวจสอบเลย์เอาต์: มุมมอง 3 มิติ
รูปที่ 2 มุมมอง 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 แบบฝัง

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