Layout Inspector ใน Android Studio 4.0
Layout Inspector ตัวตรวจสอบการจัดวาง layout ใน Android Studio 4.0 ได้รับการอัปเดตซึ่งช่วยให้สามารถ debug UI ในลักษณะที่คล้ายกับ Chrome DevTools สามารถตรวจสอบเปรียบเทียบการจัดวาง layout กับ design mockups ได้ด้วยแบบ 3 มิติ ทำให้ง่ายต่อการดูลำดับชั้นของ view เพื่อช่วยให้การ debug ได้ง่ายสะดวกขึ้น
วิธีการเปิด Layout Inspector ก็คือ click View -> Tool Windows -> Layout Inspector ตัว Layout Inspector หน้าจอจะอยู่ที่ตรงกลาง โดยหน้าจอด้านซ้ายจะเกี่ยวข้องกับเลย์เอาต์เช่นลำดับชั้นการดู ส่วนด้านขวาจะเป็นการแสดงข้อมูลเกี่ยวกับตัว view ที่ถูกเลือกไว้
โดยที่ Layout Inspector จะแสดงลำดับชั้น UI (UI hierarchy) ตอนที่แอพอยู่ใน running process และจะต้องเชื่อมต่อการ debuggable บน device หรือ emulator ก็ได้
ในเวอร์ชันนี้มีลักษณะคล้ายกับเวอร์ชันก่อนหน้า แต่มีความสามารถมากกว่าเดิมคือ สามารถดูโครงสร้างของ view ได้ทั้ง 2D แบบปกติและ 3D ที่เรียกว่าโหมดการหมุน (rotation mode) Layout Inspector จะทำการสร้าง snapshot ของ UI hierarchy และถ้าเลือก Live updates มันจะทำการอัปเดต ui ตามการโต้ตอบของเรากับแอปบน device ได้เลย ฟีเจอร์นี้สามารถใช้ได้บน devices API level 29 นะ
นอกจากนี้คุณยังสามารถกดเลือก hide subtree เพื่อซ่อน view ที่ไม่ต้องการหรือเลือกแสดงเฉพาะ view subtree หรือ parent subtree ก็ได้เหมือนกัน เพียงแค่คลิกขวาที่รูปหน้าจอ snapshot หรือคลิกที่ view ด้านข้างด้านซ้ายที่ต้องการ
Navigation to Code
อีกหนึ่งความสามารถที่อยากนำเสนอก็คือ เมื่อเราคลิกที่มุมมองของ view ทางด้านขวา จะมีข้อมูลเกี่ยวกับ view ที่เราเลือกเช่นความกว้าง ความสูง id โดยที่ตัว Layout Inspector เนี่ย เขาจะมีลิ้งอยู่ภายใต้ attributes นั้นๆ เมื่อกดมันก็จะพาเราไปยังบรรทัดของโค้ดที่เรากดเลือก ดังรูปข้างล่างนี้เลย
สำหรับใครที่สนใจอ่านข้อมูลเพิ่มเติมก็ตามนี้เลย
https://developer.android.com/studio/debug/layout-inspector
https://medium.com/androiddevelopers/layout-inspector-1f8d446d048
