เครื่องมือสำหรับการแก้ไขข้อบกพร่องของ Compose UI มีอยู่ใน Android Studio
เครื่องมือตรวจสอบเลย์เอาต์
เครื่องมือตรวจสอบเลย์เอาต์ช่วยให้คุณตรวจสอบเลย์เอาต์ Compose ภายในแอปที่ทำงานอยู่ในโปรแกรมจำลองหรืออุปกรณ์จริงได้ คุณสามารถใช้เครื่องมือตรวจสอบเลย์เอาต์เพื่อตรวจสอบความถี่ที่ Composable จะถูกจัดองค์ประกอบใหม่หรือข้ามไป ซึ่งจะช่วยระบุปัญหาเกี่ยวกับแอปได้ ตัวอย่างเช่น ข้อผิดพลาดในการเขียนโค้ดบางอย่างอาจบังคับให้ UI จัดองค์ประกอบใหม่มากเกินไป ซึ่งอาจทำให้ประสิทธิภาพต่ำ ข้อผิดพลาดในการเขียนโค้ดบางอย่างอาจทำให้ UI ไม่สามารถจัดองค์ประกอบใหม่ได้ จึงทำให้การเปลี่ยนแปลง UI ไม่แสดงบนหน้าจอ หากคุณเพิ่งเคยใช้เครื่องมือตรวจสอบเลย์เอาต์ โปรดดูคำแนะนำเกี่ยวกับวิธีเรียกใช้
รับจำนวนการจัดองค์ประกอบใหม่
เมื่อแก้ไขข้อบกพร่องของเลย์เอาต์ Compose การรู้ว่าเมื่อใดที่ Composable จะจัดองค์ประกอบใหม่เป็นสิ่งสำคัญในการทำความเข้าใจว่า UI ของคุณได้รับการติดตั้งใช้งานอย่างถูกต้องหรือไม่ ตัวอย่างเช่น หากมีการจัดองค์ประกอบใหม่หลายครั้งเกินไป แอปอาจทำงานมากกว่าที่จำเป็น ในทางกลับกัน คอมโพเนนต์ที่ไม่จัดองค์ประกอบใหม่เมื่อคุณคาดการณ์อาจทำให้เกิดลักษณะการทำงานที่ไม่คาดคิด
เครื่องมือตรวจสอบเลย์เอาต์จะแสดงให้คุณเห็นเมื่อ Composable ที่แยกกันในลำดับชั้นเลย์เอาต์มีการจัดองค์ประกอบใหม่หรือข้ามไปเมื่อคุณโต้ตอบกับแอป ใน Android Studio ระบบจะไฮไลต์การจัดองค์ประกอบใหม่เพื่อช่วยให้คุณระบุได้ว่า Composable กำลังจัดองค์ประกอบใหม่ที่ส่วนใดใน UI
รูปที่ 1 ระบบจะไฮไลต์การจัดองค์ประกอบใหม่ในเครื่องมือตรวจสอบเลย์เอาต์
ส่วนที่ไฮไลต์จะแสดงการวางซ้อนการไล่ระดับสีของ Composable ในส่วนรูปภาพของเครื่องมือตรวจสอบเลย์เอาต์ และจะค่อยๆ หายไปเพื่อให้คุณทราบตำแหน่งใน UI ที่จะพบ Composable ที่มีการจัดองค์ประกอบใหม่สูงสุด หาก Composable รายการหนึ่งกำลังจัดองค์ประกอบใหม่ในอัตราที่สูงกว่า Composable อีกรายการหนึ่ง Composable รายการแรกจะได้รับสีซ้อนทับแบบไล่ระดับสีที่เข้มกว่า หากดับเบิลคลิก Composable ในเครื่องมือตรวจสอบเลย์เอาต์ ระบบจะนำคุณไปยังโค้ดที่เกี่ยวข้องเพื่อวิเคราะห์
เปิดหน้าต่างเครื่องมือตรวจสอบเลย์เอาต์ แล้วเชื่อมต่อกับกระบวนการของแอป ในแผนผังคอมโพเนนต์ มี 2 คอลัมน์ที่ปรากฏข้างลำดับชั้นเลย์เอาต์ คอลัมน์แรกแสดงจำนวนการเขียนสำหรับแต่ละโหนด และคอลัมน์ที่ 2 แสดงจำนวนการข้ามสำหรับแต่ละโหนด การเลือกโหนด Composable จะแสดงมิติข้อมูลและพารามิเตอร์ของ Composable เว้นแต่จะเป็นฟังก์ชันอินไลน์ ซึ่งในกรณีนี้จะแสดงพารามิเตอร์ไม่ได้ นอกจากนี้ คุณยังดูข้อมูลที่คล้ายกันได้ในแผงแอตทริบิวต์เมื่อเลือก Composable จากแผนผังคอมโพเนนต์หรือการแสดงเลย์เอาต์
การรีเซ็ตจำนวนจะช่วยให้คุณเข้าใจการจัดองค์ประกอบใหม่หรือการข้ามระหว่างการโต้ตอบที่เฉพาะเจาะจงกับแอป หากต้องการรีเซ็ตจำนวน ให้คลิกรีเซ็ตบริเวณด้านบนของแผงแผนผังคอมโพเนนต์
รูปที่ 3 เปิดใช้ตัวนับการคอมโพสและการข้ามในเครื่องมือตรวจสอบเลย์เอาต์
ความหมายของ Compose
ใน Compose Semantics จะอธิบาย UI ของคุณในลักษณะอื่นที่บริการการช่วยเหลือพิเศษและเฟรมเวิร์กการทดสอบเข้าใจได้ คุณสามารถใช้เครื่องมือตรวจสอบเลย์เอาต์เพื่อตรวจสอบข้อมูลเชิงความหมายในเลย์เอาต์ Compose ได้
เมื่อเลือกโหนด Compose ให้ใช้แผงแอตทริบิวต์เพื่อตรวจสอบว่าโหนดประกาศข้อมูลความหมายโดยตรง ผสานความหมายจากโหนดย่อย หรือทั้ง 2 อย่าง หากต้องการระบุอย่างรวดเร็วว่าโหนดใดมีความหมาย ไม่ว่าจะประกาศหรือผสานรวม ให้เลือกเมนูแบบเลื่อนลงตัวเลือกมุมมองในแผงแผนผังคอมโพเนนต์ แล้วเลือกไฮไลต์เลเยอร์ความหมาย ซึ่งจะไฮไลต์เฉพาะโหนดในแผนผังที่มีความหมาย และคุณสามารถใช้แป้นพิมพ์เพื่อไปยังส่วนต่างๆ ระหว่างโหนดได้อย่างรวดเร็ว
การตรวจสอบ UI ของ Compose
Android Studio มีโหมดการตรวจสอบ UI ในตัวอย่าง Compose เพื่อช่วยคุณสร้าง UI ที่ปรับเปลี่ยนได้และเข้าถึงได้มากขึ้นใน Jetpack Compose ฟีเจอร์นี้คล้ายกับเครื่องตรวจการเข้าถึงสำหรับมุมมอง
เมื่อเปิดใช้งานโหมดตรวจสอบ UI ของ Compose ในตัวอย่าง Compose แล้ว Android Studio จะตรวจสอบ UI ของ Compose โดยอัตโนมัติและแนะนำการปรับปรุงเพื่อให้ UI ของคุณเข้าถึงได้ง่ายและปรับเปลี่ยนได้มากขึ้น Android Studio จะตรวจสอบว่า UI ของคุณทำงานได้ในหน้าจอขนาดต่างๆ ในแผงปัญหา เครื่องมือจะแสดงปัญหาที่ตรวจพบ เช่น ข้อความยืดออกบนหน้าจอขนาดใหญ่หรือคอนทราสต์ของสีต่ำ
หากต้องการเข้าถึงฟีเจอร์นี้ ให้คลิกไอคอนการตรวจสอบ UI ในตัวอย่างการเขียนโค้ด
การตรวจสอบ UI จะแสดงตัวอย่าง UI ของคุณในการกำหนดค่าต่างๆ โดยอัตโนมัติ และไฮไลต์ปัญหาที่พบในการกำหนดค่าต่างๆ ในแผงปัญหา เมื่อคลิกปัญหา คุณจะเห็นรายละเอียดของปัญหา วิธีแก้ไขที่แนะนำ และการแสดงผลที่ไฮไลต์บริเวณที่มีปัญหา
แก้ไขด้วย AI
สำหรับปัญหาที่ตรวจพบในโหมดการตรวจสอบ UI คุณสามารถใช้ AI Agent เพื่อเสนอและใช้การแก้ไขโค้ดได้ คลิกปุ่มแก้ไขด้วย AI บนปัญหาในแผงปัญหา Agent จะวิเคราะห์ปัญหาและโค้ดของคุณเพื่อแนะนำการเปลี่ยนแปลงที่จะช่วยแก้ไขปัญหาด้านการช่วยเหลือพิเศษหรือการปรับเปลี่ยน
