[iOS Dev] Solve Problem when Keyboard is Covered Input View (UITextField, UITextView)

มันเป็นปัญหาหนึ่งของผมนะครับ ... ที่เจอมา
นั่นคือ ถ้าคุณมี UI จำพวก Input (UITextField และ UITextView) อยู่ด้านล่างของจอ ...
แล้วเมื่อคุณกดเพื่อจะทำการ Input ข้อมูล จะเกิดปัญหาที่ว่า

"Keyboard นั้นขึ้นมาบังส่วน Input ของคุณ ทำให้คุณไม่เห็นสิ่งที่กำลัง Input อยู่"

เราจะมาแก้ปัญหานี้กันด้วยความคิดง่ายๆ ที่ว่า

"เมื่อมันบัง เราก็เลื่อนส่วนนั้นขึ้นไปสิ เลื่อนให้เลยตัว Keyboard ขึ้นไป"

สิ่งที่เราต้องรู้คือ

  • เมื่อไหร่ที่ Keyboard จะขึ้นมา
  • เมื่อไหร่ที่ Keyboard จะลง
  • ขนาดของ Keyboard (เพื่อให้เลื่อนขึ้นไปเท่าไร และ เลื่อนลงเท่าไร ตอน Keyboard ถูกเก็บ)
iOS มีตัวช่วยที่จะบอกว่า Keyboard ขึ้นหรือลงครับ 
พระเอกของเราวันนี้คือ NSNotificationCenter 


ประกาศตัวแปรที่ต้องใช้ก่อนนะครับ ประกาศเป็น Instance Variable ไว้ที่ Implementation File (.m) 


ต่อไปก็ให้ NSNotificationCenter ทำการ Observer ตัว Keyboard ว่ามันขึ้น หรือมันลง 
และใส่ @selector ด้วยว่า เมื่อ Keyboard ขึ้นให้ทำอะไร และลงให้ทำอะไร

ส่วนการ Implement ให้ View ขึ้นลง ก็ตามนี้ครับ เราจะใช้ UIView Animation ในการเลื่อนตำแหน่งกลางจิ ขึ้น และ ลง ตามสถานการณ์ของ Keyboard

แค่นี้แหละครับ จบแล้ว ~

Tip and Tricks เพิ่มเติม..

กรณีด้านบนจะทำได้ต่อเมื่อมีแค่ TextView ที่ถูกบังเท่านั้น
แต่ถ้ามันเป็นแบบนี้ล่ะ ?


ปัญหาเกิดแน่ เพราะกดที่ UITextField 4 ตัวด้านบน Keyboard มันก็ขึ้นมาเหมือนกัน ...
จึงทำให้ View มันเลื่อนไปด้านบนด้วย (งานงอก) เราจะแก้ปัญหาอย่างไรกันดี

ขั้นแรก เราต้องเปลี่ยน Notification สักหน่อย โดยให้มันฟัง TextView อย่างเดียว


จากนั้นปัญหาต่อมาคือ เราไม่สามารถ Get ค่า Frame ของ Keyboard มาใช้จาก userInfo ได้
ถ้าเราไม่ได้ฟัง Notification ของ Keyboard
สิ่งที่ต้องทำคือ เราต้องหาขนาดของ Keyboard เอง ซึ่งคำตอบก็หาได้โค้ดนี้จากค่าด้านบน



แล้วก็แก้ Duration นิดหน่อย เพราะถ้าใช้แบบปกติ ผมทดสอบแล้วว่ามันขึ้นมาไม่ทัน ... (ไม่สวย)

แค่นี้ล่ะครับ จบอีกครั้ง

Popular posts from this blog

12 วิธี การบริการและดูแลลูกค้าในร้าน Starbucks

"อีสุกอีใส" ประสบการณ์เมื่อต้องมาเป็นตอนอายุ 22

[Android Dev] การติดตั้ง Eclipse+AndroidSDK เพื่อพัฒนาโปรแกรมบน Android