กลุ่มเป้าหมายที่เน้น

คุณจัดกลุ่มเป้าหมายโฟกัสหลายรายการเข้าด้วยกันได้โดยใช้ตัวแก้ไข focusGroup การจัดกลุ่มช่วยให้คุณจัดการลำดับชั้นของโฟกัส แยกส่วน UI เชิงตรรกะ (เช่น แถบเครื่องมือ การดำเนินการในกล่องโต้ตอบ หรือรายการการ์ด) และขัดจังหวะเมื่อโฟกัสเข้าหรือออกจากส่วนนั้นได้

แนวคิดของกลุ่มที่โฟกัส: การเข้า การออก และการไปยังส่วนต่างๆ เริ่มต้น

กลุ่มโฟกัสจะสร้างขอบเขตการนําทางที่เชื่อมโยงกันรอบเป้าหมายโฟกัสย่อย การทำความเข้าใจวิธีที่โฟกัสย้ายข้ามขอบเขตนี้ขึ้นอยู่กับแนวคิดหลัก 2 ประการ ได้แก่

• Enter: เหตุการณ์ที่เกิดขึ้นเมื่อโฟกัสเปลี่ยนจากองค์ประกอบภายนอกกลุ่มโฟกัสไปยังองค์ประกอบภายในกลุ่ม
• ออก: เหตุการณ์ที่เกิดขึ้นเมื่อโฟกัสออกจากองค์ประกอบภายในสุดท้ายของกลุ่มและเปลี่ยนไปยังเป้าหมายโฟกัสภายนอก

รูปที่ 1 การสนทนากลุ่มที่มีเหตุการณ์เข้าและออก

ลักษณะการทำงานของการข้ามโฟกัสเริ่มต้น

โดยค่าเริ่มต้น เมื่อกลุ่มโฟกัสได้รับโฟกัสจากภายนอก ระบบจะดำเนินการดังนี้

1. การเข้าสู่กลุ่ม: Compose จะเลือกเป้าหมายโฟกัสย่อยภายในโดยอัตโนมัติ สำหรับการนำทางแบบมิติเดียว (Tab) ระบบจะเลือกองค์ประกอบย่อยแรกตามลำดับลักษณะที่ปรากฏ สำหรับการไปยังส่วนต่างๆ แบบ 2 มิติ (ปุ่มลูกศรหรือ D-pad) ระบบจะเลือกองค์ประกอบย่อยที่อยู่ใกล้กับทิศทางขาเข้ามากที่สุดในทางเรขาคณิต
2. การไปยังส่วนต่างๆ ภายในกลุ่ม: การกดปุ่มไปยังส่วนต่างๆ ซ้ำๆ จะย้ายโฟกัสไปยังเป้าหมายโฟกัสที่อยู่ระดับเดียวกันซึ่งอยู่ในกลุ่ม
3. การออกจากกลุ่ม: เมื่อผู้ใช้ไปยังเป้าหมายโฟกัสสุดท้ายภายในกลุ่มแล้ว การกดแป้นครั้งถัดไปจะออกจากกลุ่มและย้ายโฟกัสไปยังเป้าหมายโฟกัสที่อยู่ใกล้เคียงนอกกลุ่ม

ปรับแต่งการเปลี่ยนเส้นทางรายการโฟกัส

ในการออกแบบ UI หลายๆ แบบ เป้าหมายรายการเริ่มต้น (เช่น รายการย่อยรายการแรกในลำดับที่ปรากฏ) ไม่ใช่ตัวเลือกที่สมเหตุสมผลหรือสะดวกที่สุดสำหรับผู้ใช้

เจตนาและกรณีการใช้งาน

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

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

รูปที่ 2 ปุ่มยกเลิกและยืนยันพร้อมเป้าหมายการโฟกัสเริ่มต้น

กรณีการใช้งานอื่นๆ ที่พบบ่อย ได้แก่

• ย้ายโฟกัสไปยังแท็บที่เลือกไว้ในปัจจุบันโดยตรงเมื่อเข้าสู่TabRow
• การย้ายโฟกัสไปยังตัวควบคุม "เล่น / หยุดชั่วคราว" โดยตรงเมื่อเข้าสู่แถบการเล่นสื่อ

การใช้งานด้วย onEnter และ FocusRequester

วิธีเปลี่ยนเส้นทางโฟกัสเมื่อเข้าสู่การสนทนากลุ่ม

1. ใช้ตัวแก้ไข focusGroup กับคอนเทนเนอร์หลักที่ล้อมรอบเป้าหมายโฟกัสที่เกี่ยวข้อง
2. ใช้ตัวแก้ไข focusProperties กับคอนเทนเนอร์ และกำหนดค่า Callback onEnter
3. ใน Callback onEnter (กำหนดขอบเขตเป็น FocusEnterExitScope) ให้เรียกใช้ requestFocus() ใน FocusRequester ที่เชื่อมโยงกับบุตรหลานเริ่มต้นที่ต้องการโดยใช้ focusRequester

val defaultChildRequester = remember { FocusRequester() }

Row(
    modifier = Modifier
        .focusGroup()
        .focusProperties {
            // Intercept entry into this group and redirect focus to the primary action
            onEnter = {
                defaultChildRequester.requestFocus()
            }
        }
) {
    Button(onClick = { /* Cancel action */ }) {
        Text("Cancel")
    }
    Button(
        onClick = { /* Confirm action */ },
        modifier = Modifier.focusRequester(defaultChildRequester)
    ) {
        Text("Confirm (Default)")
    }
}
FocusGroup.kt

ภายใน onEnter และ onExit คุณยังสามารถเรียกใช้ cancelFocusChange() เพื่อบล็อกการเปลี่ยนโฟกัสข้ามขอบเขตโดยสมบูรณ์ หรือตรวจสอบ requestedFocusDirection เพื่อปรับแต่งการกำหนดเส้นทางตามการไปยังส่วนต่างๆ ของผู้ใช้โดยใช้ Tab, Down หรือ Left

คอนเทนเนอร์ที่เลื่อนได้จะเป็นกลุ่มที่โฟกัสได้โดยค่าเริ่มต้น

ใน Jetpack Compose คอนเทนเนอร์ที่เลื่อนได้ เช่น LazyRow, LazyColumn และ LazyVerticalGrid จะทำหน้าที่เป็นกลุ่มโฟกัสโดยอัตโนมัติ คุณไม่จำเป็นต้องใช้ตัวแก้ไข focusGroup กับออบเจ็กต์เหล่านั้นอย่างชัดแจ้งเพื่อตั้งค่า Callback onEnter หรือ onExit