Building StareBrain ตอนที่ 17: ฟีเจอร์ลากย้ายหน้าต่าง
เจาะลึกการพัฒนา StareBrain ตอนที่ 17 เพิ่มฟีเจอร์ลากย้ายหน้าต่าง Overlay พร้อมระบบบันทึกตำแหน่งอัตโนมัติและการป้องกันหน้าต่างหลุดจอ
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- เพิ่มฟีเจอร์ Drag-to-Reposition ให้หน้าต่าง Overlay ลากย้ายอิสระ
- ใช้ View.OnTouchListener และ WindowManager.LayoutParams คำนวณตำแหน่ง
- บันทึกพิกัดลงใน SessionMemory เพื่อจดจำตำแหน่งล่าสุด
- เตรียมต่อยอดในตอนที่ 18 กับฟีเจอร์ Auto-collapse ย่อหน้าต่างอัตโนมัติ
ในบทความซีรีส์ Building StareBrain ตอนที่ 17 นักพัฒนาได้เผยแพร่ความคืบหน้าสำคัญต่อยอดจากตอนที่ 16 ซึ่งได้แนะนำหน้าต่าง Overlay แบบลอยตัวสำหรับแสดงความคืบหน้าของงานและการแจ้งเตือนยืนยันต่างๆ แต่จากการทดสอบใช้งานจริงพบปัญหาทันทีว่า หน้าต่างดังกล่าวไปบังส่วนติดต่อผู้ใช้ (UI) ที่ผู้ใช้งานจำเป็นต้องกดใช้งาน
ทางออกของปัญหานี้คือฟีเจอร์ลากเพื่อเปลี่ยนตำแหน่ง (drag-to-reposition) โดยผู้ใช้งานสามารถกดค้างและลากหน้าต่าง Overlay ไปวางไว้ ณ จุดใดก็ได้บนหน้าจอ และเมื่อเปิดใช้งาน StareBrain อีกครั้ง หน้าต่างจะยังคงอยู่ ณ ตำแหน่งล่าสุดที่ผู้ใช้จัดวางไว้
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
ในเชิงเทคนิค ระบบได้เลือกใช้ View.OnTouchListener เพื่อคอยติดตามการเคลื่อนไหวของการลากหน้าต่าง พร้อมกับคำนวณค่าเดลตา (delta) จากจุดเริ่มต้นที่สัมผัสหน้าจอ และทำการอัปเดต WindowManager.LayoutParams ในทุกๆ การกระทำแบบ ACTION_MOVE
อย่างไรก็ตาม การสัมผัสหน้าจอแบบสั้นๆ ที่ไม่มีการเคลื่อนไหว จะต้องถูกบันทึกเป็นการแตะ (tap) เช่น การขยายหรือย่อหน้าต่าง รวมถึงการกดปุ่มยืนยันหรือปฏิเสธ โดยระบบสามารถแยกแยะการกระทำเหล่านี้ได้จากการตรวจสอบระยะการเคลื่อนที่ (displacement)
สำหรับการจัดเก็บข้อมูลพิกัด ระบบได้บันทึกตำแหน่งของ Overlay ไว้ใน SessionMemory ควบคู่ไปกับพฤติกรรมการใช้งาน เนื่องจากตำแหน่งดังกล่าวไม่ใช่ข้อมูลที่มีความละเอียดอ่อน แต่เป็นเพียงการตั้งค่าส่วนบุคคลของผู้ใช้งาน (UI preference) เท่านั้น
นอกจากนี้ ทีมพัฒนายังได้คำนึงถึงกรณีที่ความละเอียดหน้าจอของผู้ใช้เกิดการเปลี่ยนแปลง เช่น การหมุนหน้าจอหรือการเปลี่ยนอุปกรณ์ ซึ่งอาจทำให้พิกัดที่บันทึกไว้แสดงผลหลุดออกไปจากหน้าจอ ระบบจึงได้เพิ่มฟังก์ชันตรวจสอบขอบเขต (clamp) ตอนเรียกคืนค่า ดังตัวอย่างฟังก์ชันโหลดพิกัดตำแหน่ง
fun loadOverlayPosition ( displayMetrics : DisplayMetrics ): OverlayPosition {
val x = prefs . getInt ( "overlay_x" , DEFAULT_X )
val y = prefs . getInt ( "overlay_y" , DEFAULT_Y )
val clampedX = x . coerceIn ( 0 , displayMetrics . widthPixels - OVERLAY_WIDTH_PX )
val clampedY = y . coerceIn ( 0 , displayMetrics . heightPixels - OVERLAY_HEIGHT_PX )
return OverlayPosition ( clampedX , clampedY )
}การเพิ่มฟีเจอร์จำตำแหน่งหน้าต่าง UI ในแอปพลิเคชันประเภท Overlay ถือเป็นรายละเอียดเล็กๆ น้อยๆ ที่ช่วยยกระดับประสบการณ์ใช้งาน (UX) อย่างมาก เนื่องจากหน้าต่างลอยมักสร้างความหงุดหงิดให้ผู้ใช้หากไปบังปุ่มสำคัญ การใช้วิธีคำนวณผ่าน OnTouchListener ร่วมกับ WindowManager เป็นแนวทางปฏิบัติมาตรฐานบน Android ที่มีความเสถียรและตอบสนองได้รวดเร็ว
สำหรับก้าวต่อไปในตอนที่ 18 จะมีการพูดถึงฟีเจอร์ auto-collapse ซึ่งหน้าต่าง Overlay จะย่อขนาดเหลือเพียงจุดเล็กๆ เมื่อผู้ใช้งานกำลังใช้งานแอปพลิเคชันอื่นอยู่ และจะขยายกลับขึ้นมาเมื่อมีขั้นตอนงานเสร็จสิ้นหรือต้องการการยืนยัน โดยไม่รบกวนการทำงานของผู้ใช้
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น