เมื่อผู้ใช้โต้ตอบกับแอปของคุณ มักจะใช้กลไกการป้อนข้อมูลแบบไม่สัมผัส
- สภาพแวดล้อมบนเดสก์ท็อป: ผู้ใช้ไปยังส่วนต่างๆ และป้อนข้อมูล ด้วยคีย์บอร์ดฮาร์ดแวร์และแทร็กแพด
- Android TV: ผู้ใช้จะไปยังส่วนต่างๆ ของอินเทอร์เฟซ โดยใช้D-pad
- ยานยนต์: ผู้ขับขี่และผู้โดยสารโต้ตอบ โดยใช้ตัวควบคุมแบบหมุน
- อุปกรณ์พับและแท็บเล็ต: ผู้ใช้ติดคีย์บอร์ดเคส และอุปกรณ์เสริมอินพุตภายนอก
ในสถานการณ์ทั้งหมดนี้ แอปของคุณต้องติดตาม องค์ประกอบแบบอินเทอร์แอกทีฟที่ใช้งานอยู่บนหน้าจอ ซึ่งสถานะที่ใช้งานอยู่นี้เรียกว่าโฟกัส
ปัจจัยสำคัญสำหรับการไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ที่ใช้งานง่าย
ออกแบบแอปตามหลักการต่อไปนี้เพื่อมอบประสบการณ์การใช้งานที่ยอดเยี่ยมในหน้าจอขนาดใหญ่ และอุปกรณ์ที่ไม่ใช่แบบสัมผัส
- โฟกัสเริ่มต้นเชิงตรรกะ: วางโฟกัสเริ่มต้นไว้ที่องค์ประกอบที่ผู้ใช้มีแนวโน้ม ที่จะโต้ตอบด้วยมากที่สุดเมื่อเข้าสู่หน้าจอ
- ลำดับการไปยังส่วนต่างๆ ที่สอดคล้องกัน: ระบุการเคลื่อนที่โฟกัสแบบมิติเดียว (Tab) และสองมิติ (แป้นลูกศรหรือ D-pad) ที่คาดการณ์ได้
- โฟกัสต่อเนื่อง: คืนค่าโฟกัสได้อย่างราบรื่นหลังจากที่ถูกขัดจังหวะ ปิดกล่องโต้ตอบ หรือมีการเปลี่ยนแปลงการกำหนดค่า
- สถานะโฟกัสที่ชัดเจน: แสดงคิวภาพที่โดดเด่นและเข้าถึงได้ (เช่น วงแหวนหรือระลอกคลื่นโฟกัส) ซึ่งระบุองค์ประกอบที่กำลังโฟกัสอยู่
- การเลื่อนที่ใช้งานง่าย: ตรวจสอบว่าองค์ประกอบที่โฟกัสและบริบทโดยรอบเลื่อนไปยังวิวพอร์ตที่มองเห็นได้อย่างราบรื่น
คำแนะนำเกี่ยวกับโฟกัส
ดูคำแนะนำต่อไปนี้เพื่อเรียนรู้วิธีจัดการและปรับแต่งโฟกัสใน Compose
- เป้าหมายโฟกัส: ดูวิธีที่คอมโพเนนต์แบบอินเทอร์แอกทีฟกลายเป็นเป้าหมายโฟกัสและวิธีทำให้ Composable ที่กำหนดเองโฟกัสได้
- ลำดับการไปยังโฟกัส: ทำความเข้าใจลำดับการแสดงผลแบบ 1 มิติและการนำทางเชิงพื้นที่แบบ 2 มิติ รวมถึงวิธีปรับแต่งเส้นทางการไปยัง
- โฟกัสในช่องข้อความ: ดูวิธีที่ช่องข้อความแบบบรรทัดเดียวและหลายบรรทัด จัดการแป้น Tab และแป้นลูกศร รวมถึงวิธีที่ IME ของทีวีทำงาน
- เป้าหมายโฟกัสกลุ่ม: จัดกลุ่มคอมโพเนนต์ด้วย
focusGroupและสกัดกั้น การเปลี่ยนเส้นทางเข้าหรือออก - คืนค่าโฟกัส: คืนค่าโฟกัสให้กับองค์ประกอบย่อยที่ใช้งานอยู่ก่อนหน้านี้ในคอนเทนเนอร์ จัดการคอมโพเนนต์การนำทาง และจัดการโฟกัสในการเปลี่ยนหน้าจอ
- ระบุสถานะที่มีการโฟกัส: ใช้คิวภาพและการระบุที่กำหนดเองเพื่อ ไฮไลต์คอมโพเนนต์ที่โฟกัส
- ตอบสนองต่อโฟกัส: สังเกตการเปลี่ยนแปลงโฟกัสและค้นหาพร็อพเพอร์ตี้สถานะโฟกัส
โดยใช้
onFocusChanged - ขอโฟกัสโดยอัตโนมัติ: ย้ายโฟกัสอย่างชัดเจนเพื่อตอบสนองต่อ การกระทำของผู้ใช้หรือข้อผิดพลาดในการตรวจสอบ
- ย้ายและล้างโฟกัส: เลื่อนหรือล้างโฟกัสโดยอัตโนมัติโดยใช้
FocusManager - จับภาพและปล่อยโฟกัส: จับภาพโฟกัสสำหรับการโต้ตอบย่อยแบบโมดอลและ ปล่อยโฟกัสอย่างปลอดภัย
- ทดสอบการไปยังส่วนต่างๆ ด้วยโฟกัส: เขียนการทดสอบ Compose อัตโนมัติเพื่อยืนยันการโต้ตอบของแป้นพิมพ์ในช่องข้อความ 1 มิติ 2 มิติ
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- เป้าหมายโฟกัส
- ลำดับการส่งผ่านโฟกัส
- โฟกัสในช่องข้อความ
- โฟกัสเป้าหมายกลุ่ม
- ทดสอบการไปยังส่วนต่างๆ โดยใช้โฟกัส