โฟกัสใน Glimmer ของ Jetpack Compose

อุปกรณ์ XR ที่ใช้ได้
คำแนะนำนี้จะช่วยให้คุณสร้างประสบการณ์การใช้งานสำหรับอุปกรณ์ XR ประเภทต่างๆ เหล่านี้ได้
ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →
แว่นตา AI
ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

คอมโพเนนต์ Glimmer ทั้งหมดของ Jetpack Compose ออกแบบมาให้ทำงานร่วมกับวิธีการป้อนข้อมูลมาตรฐาน เช่น การแตะหรือปัดบนทัชแพดของแว่นตา AI ขณะเดียวกันก็ตอบสนองต่อคำสั่งป้อนข้อมูลระดับล่างที่เฉพาะเจาะจงกับฮาร์ดแวร์ของแว่นตา AI คอมโพเนนต์ Jetpack Compose Glimmer จะจัดการเหตุการณ์อินพุตที่จำเป็นโดยอัตโนมัติ สำหรับคอมโพเนนต์ที่กำหนดเอง คุณสามารถใช้ Compose API ที่มีอยู่ เช่น Modifier.draggable หรือ Modifier.scrollable เพื่อใช้ลักษณะการโต้ตอบที่เฉพาะเจาะจงได้

ในแว่นตา AI ที่มีจอแสดงผล การป้อนข้อมูลด้วยเคอร์เซอร์อาจส่งผลต่อโฟกัสได้ดังนี้

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

การเคลื่อนไหวของโฟกัสและการเปลี่ยนลำดับเมื่อผู้ใช้ไปยังส่วนต่างๆ ของแอป

การเคลื่อนไหวของโฟกัส

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

ลำดับโฟกัส

Jetpack Compose Glimmer ใช้การค้นหาโฟกัสแบบมิติเดียวเช่นเดียวกับใน Jetpack Compose ดูข้อมูลเพิ่มเติมเกี่ยวกับลำดับการส่งผ่านโฟกัสได้ที่เปลี่ยนลำดับการส่งผ่านโฟกัส

หากต้องการเปลี่ยนรายการที่โฟกัสในตอนแรก คุณสามารถเพิ่มModifier.focusGroup()ระดับบนสุดและระบุ onEnter ที่กำหนดเองได้ focusProperty

Modifier.focusProperties {
    onEnter = {
        initialFocus.requestFocus()
        cancelFocusChange()
    }
}
.focusGroup()

คอนเทนเนอร์ที่เลื่อนได้

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

สถานะโฟกัสเริ่มต้น

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

รูปที่ 1 สถานะโฟกัส 3 สถานะใน Jetpack Compose Glimmer ซึ่ง แตกต่างกันโดยใช้ภาพป้อนกลับตามเส้นขอบ

  • ค่าเริ่มต้น: สีพื้นหลังของปุ่มได้มาจาก GlimmerTheme.colors.surface เนื้อหาหลักจะคำนวณสีเนื้อหาของพื้นผิวนั้น และไอคอนจะเป็น GlimmerTheme.colors.primary

  • โฟกัส: เพิ่มความกว้างของเส้นขอบเพื่อสื่อถึงโฟกัส

  • โฟกัส + กด: ระบบจะตั้งค่าพื้นหลังเป็น GlimmerTheme.colors.surface ที่ความทึบแสงเต็มรูปแบบเพื่อสื่อสารสถานะที่เลือก