โฟกัสในการเขียน

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

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

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

หน้าต่อไปนี้อธิบายวิธีใช้โฟกัสในแอป

• เปลี่ยนลำดับการย้ายโฟกัส: อธิบายวิธีเปลี่ยนลำดับโฟกัสเริ่มต้น เพิ่มกลุ่มโฟกัส และปิดใช้โฟกัสของ Composable
• เปลี่ยนลักษณะการทำงานของโฟกัส: อธิบายวิธีขอ จับภาพ และปล่อยโฟกัส รวมถึงวิธีเปลี่ยนเส้นทางโฟกัสเมื่อเข้าสู่หน้าจอ
• ตอบสนองต่อโฟกัส: อธิบายวิธีตอบสนองต่อการเปลี่ยนแปลงโฟกัส เพิ่มคิวภาพลงในองค์ประกอบ และทำความเข้าใจสถานะโฟกัสขององค์ประกอบ

ลำดับการย้ายโฟกัสเริ่มต้น

ก่อนที่จะเจาะลึกพฤติกรรมเริ่มต้นของการค้นหาโฟกัส สิ่งสำคัญคือต้องทำความเข้าใจแนวคิดของระดับในลำดับชั้น โดยทั่วไปแล้ว เราสามารถพูดได้ว่าComposables 2 รายการอยู่ในระดับเดียวกันเมื่อเป็นพี่น้อง ซึ่งหมายความว่ามีองค์ประกอบหลักเดียวกัน เช่น องค์ประกอบภายใน Column จะอยู่ที่ระดับเดียวกัน การขึ้นไป 1 ระดับหมายถึงการเปลี่ยนจากรายการย่อยเป็นComposable รายการหลัก หรือในตัวอย่างเดิมคือการย้อนกลับจากรายการไปยังColumnที่ มีรายการนั้น การลงไปอีกระดับจะเป็นการย้อนกลับจากColumn รายการหลักไปยังรายการที่อยู่ในนั้น แนวคิดนี้ใช้ได้กับทุก Composable ที่อาจมี Composables อื่นๆ

การไปยังส่วนต่างๆ ของ UI ทำได้หลายวิธี ซึ่งผู้ใช้ส่วนใหญ่จะทราบอยู่แล้ว

• แท็บ: การนำทางแบบมิติเดียว โดยจะไปข้างหน้าหรือย้อนกลับ การไปยังส่วนต่างๆ ด้วย TAB จะเลื่อนโฟกัสไปยังองค์ประกอบถัดไปหรือก่อนหน้าในลำดับชั้น โดย ค่าเริ่มต้น Compose จะทำตามการประกาศของ Composables การไปยังทิศทางเดียว ทำได้โดยใช้แป้น tab บนแป้นพิมพ์หรือกรอบหมุน บนนาฬิกา และการค้นหาโฟกัสประเภทนี้จะไปที่องค์ประกอบแต่ละรายการบน หน้าจอ
• ปุ่มลูกศร: การนำทางแบบ 2 มิติ โดยไปทางซ้าย ขวา ขึ้น หรือลง การไปยังส่วนต่างๆ แบบ 2 มิติทำได้ผ่าน D-Pad บนทีวีหรือปุ่มลูกศรบนแป้นพิมพ์ และลำดับการไปยังส่วนต่างๆ จะไปที่องค์ประกอบในระดับที่กำหนดเท่านั้น คุณใช้ปุ่มตรงกลางของ D-Pad และปุ่มย้อนกลับเพื่อเลื่อนลงและเลื่อนกลับขึ้นไปยัง ระดับอื่นได้

ตัวอย่างเช่น ภาพหน้าจอด้านล่างซึ่งมีปุ่ม 4 ปุ่มเรียงกัน และคุณต้องการหมุนเวียนปุ่มทั้งหมดตามลำดับที่ปรากฏ Jetpack Compose มีลักษณะการทำงานนี้พร้อมใช้งานทันที โดยชุดเครื่องมือช่วยให้คุณ วนรอบแต่ละ Composable ตามลำดับแนวตั้งจากบนลงล่างโดยใช้ ปุ่ม tab หรือย้ายโฟกัสโดยกดลูกศรขึ้นหรือลง

เมื่อเปลี่ยนไปใช้เลย์เอาต์ประเภทอื่น สิ่งต่างๆ จะเปลี่ยนแปลงไปเล็กน้อย หากเลย์เอาต์มีมากกว่า 1 คอลัมน์ เช่น เลย์เอาต์ด้านล่าง Jetpack Compose จะช่วยให้คุณ ไปยังส่วนต่างๆ ได้โดยไม่ต้องเพิ่มโค้ด หากกดtab คีย์ Jetpack Compose จะไฮไลต์รายการตามลำดับการประกาศโดยอัตโนมัติ จากรายการแรกถึงรายการที่สี่ การใช้แป้นลูกศรบนแป้นพิมพ์จะทำให้การเลือก เป็นไปตามทิศทางที่ต้องการในพื้นที่ 2 มิติ

Column {
    Row {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Row {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

โดยจะประกาศ Composables ใน Rows 2 รายการ และประกาศองค์ประกอบโฟกัสตามลำดับจากรายการแรกถึงรายการที่ 4 เมื่อกดแป้น tab ระบบจะ กำหนดลำดับโฟกัสต่อไปนี้

ในข้อมูลโค้ดด้านล่าง คุณจะประกาศรายการใน Columns แทนที่จะประกาศใน Rows

Row {
    Column {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Column {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

เลย์เอาต์นี้จะเลื่อนรายการในแนวตั้งจากบนลงล่าง จากจุดเริ่มต้น ของหน้าจอไปจนถึงจุดสิ้นสุด

ตัวอย่าง 2 รายการก่อนหน้านี้แม้จะแตกต่างกันในด้านการนำทางแบบทิศทางเดียว แต่ก็ให้ประสบการณ์การใช้งานเดียวกันเมื่อพูดถึงการนำทางแบบ 2 มิติ โดยปกติแล้วสาเหตุเป็นเพราะรายการบนหน้าจอมีตำแหน่งทางภูมิศาสตร์เดียวกันในทั้ง 2 ตัวอย่าง การไปยังทางขวาจาก Column แรกจะย้ายโฟกัสไปยังColumn ที่ 2 และการไปยังด้านล่างจาก Row แรกจะย้ายโฟกัสไปยังRow ที่อยู่ด้านล่าง