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

อุปกรณ์ XR ที่รองรับ

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

ดูข้อมูลเกี่ยวกับอุปกรณ์ XR ประเภทต่างๆ →

แว่นตา AI

ดูข้อมูลเกี่ยวกับอุปกรณ์ XR ประเภทต่างๆ →

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

ในแว่นตา AI ที่มีจอแสดงผล อินพุตตัวชี้อาจส่งผลต่อโฟกัสได้ ดังนี้

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

(ข้อกำหนดชั่วคราว) เปิดใช้แฟล็กอินพุตที่จำเป็น:

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

class GlassesActivityExample : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        @OptIn(ExperimentalComposeUiApi::class)
        ComposeUiFlags.isInitialFocusOnFocusableAvailable = true
        super.onCreate(savedInstanceState)
    }
}

ลักษณะการทำงานและลำดับการไปยังส่วนต่างๆ

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

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

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

ลำดับโฟกัส

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

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

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

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

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

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

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

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

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

• โฟกัส: ความกว้างของขอบจะเพิ่มขึ้นเพื่อแสดงว่ามีการโฟกัส

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