เลย์เอาต์ของแอป

ลองใช้วิธีแบบ Compose
Jetpack Compose ใน Wear OS เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Wear OS

หลังจากเข้าใจวิธีจัดการรูปทรงนาฬิกาต่างๆ แล้ว ให้ตัดสินใจเลือกพื้นผิวที่ต้องการใช้

เลย์เอาต์แอปที่พบบ่อยมีดังนี้

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

เราจะอธิบายประเภทเลย์เอาต์เหล่านี้ในส่วนต่อไปนี้ คุณสามารถใช้เลย์เอาต์หลายประเภทร่วมกันได้หากต้องการใช้หลายหน้าจอ

หมายเหตุ: สำหรับกิจกรรม ให้รับค่ามาจาก ComponentActivity หรือ FragmentActivity หากคุณใช้ Fragment กิจกรรมประเภทอื่นๆ จะใช้องค์ประกอบ UI เฉพาะสำหรับอุปกรณ์เคลื่อนที่ ซึ่งคุณไม่จำเป็นต้องใช้สำหรับ Wear OS

หน้าจอเดียว

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

รูปที่ 1 ตัวอย่างเลย์เอาต์หน้าจอเดียว

หน้าจอเดียวทำงานได้ดีกับ BoxInsetLayout ร่วมกับ ConstraintLayout เพื่อจัดเรียงองค์ประกอบ

คอนเทนเนอร์แนวตั้ง

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

รูปที่ 2 แสดงเลย์เอาต์แอปที่สมบูรณ์หลายแบบ ซึ่งมีเพียงบางส่วนของ เนื้อหาเท่านั้นที่มองเห็นได้บนหน้าจอวงกลมของนาฬิกา ในตัวอย่างเหล่านี้ เนื้อหาหลัก จะอยู่ในส่วนบน ของคอนเทนเนอร์ และเส้นทางของผู้ใช้ที่สำคัญ (CUJ) และการตั้งค่าอื่นๆ จะอยู่ ที่ด้านล่าง นี่เป็นแนวทางปฏิบัติแนะนำสำหรับการจัดวางเนื้อหา

รูปที่ 2 ตัวอย่างเลย์เอาต์คอนเทนเนอร์แนวตั้ง

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

รูปที่ 3 เนื้อหาใน ConstraintLayout ภายใน NestedScrollView

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

หมายเหตุ: เพิ่มตัวบ่งชี้การเลื่อนลงใน NestedScrollView โดยตั้งค่า android:scrollbars="vertical" ใน XML เมื่อเป็นไปได้ วิธีนี้จะช่วยให้ผู้ใช้ทราบว่ามี เนื้อหาเพิ่มเติมและช่วยให้ผู้ใช้เห็นตำแหน่งของตนเองเมื่อเทียบกับเนื้อหาทั้งหมด

ตัวเลือกอื่นๆ สำหรับเลย์เอาต์แอป

  • รายการ: แสดงชุดข้อมูลขนาดใหญ่ด้วยวิดเจ็ต WearableRecyclerView ที่ปรับให้เหมาะกับพื้นผิวของอุปกรณ์สวมใส่ ดูข้อมูลเพิ่มเติมได้ที่ สร้างรายการใน Wear OS
  • การแบ่งหน้าแนวนอน: สำหรับกรณีการใช้งานที่มีหน้าจอระดับเดียวกันหลายหน้าจอ ให้ใช้ การปัดแนวนอน หากใช้ การแบ่งหน้าแนวนอน คุณต้องรองรับการปัดเพื่อปิดที่ขอบด้านซ้าย
  • การเลื่อน 2 มิติ: สำหรับกรณีการใช้งาน เช่น แผนที่ ผู้ใช้สามารถ ลากเพื่อเลื่อนไปในทิศทางต่างๆ ได้ เปิดใช้ การปัดเพื่อปิดหากกิจกรรมใช้พื้นที่ทั้งหน้าจอ