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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ดูเนื้อหา