iPhone: Adjust TextField Hidden by Keyboard


iPhone: Adjust TextField Hidden by Keyboard

บทความนี้จะเสนอวิธีแก้ปัญหาเกี่ยวกับคีย์บอร์ดมาบัง UI ของเรา วิธีนี้เราแก้ไขด้วยการเลื่อน view ของ UI นั้นก็เท่านั้นเอง แต่ว่าเราจะรู้ได้อย่างไรว่า คีย์บอร์ดมันโชวขึ้นมาแล้วหละ มาดูกัน

จากภาพด้านบนคงจะเห็นปัญหากันแล้วใช่มั้ยครับ หากเรามี UI พวก Text อยู่ด้านใต้ๆ ของหน้าจอ เป็นบริเวณที่เป็นจุดเสี่ยงที่จะโดนคีย์บอร์ดบังแน่นอน ดังนั้นเราจึงต้องทำการเลื่อนวิวของ Text ขึ้นด้านบนเมื่อมีการกดที่ Text ดังนี้ครับ

1) ไปที่ Interface Builder ก่อนนะครับ ผมเซ็ตให้มี UIView อันหนึ่งบรรจุ UITextView ทั้ง 5 อันอยู่ ดังนั้นหากเลื่อน UIView นี้ จะทำให้ UITextView ทั้ง 5 อันเลื่อนตามไปด้วย ผมตั้งชื่อว่า textContainer

2) กลับมาที่ไฟล์ .m ครับ เราจะมาเพิ่มส่วนที่เป็น Notification เพื่อให้แจ้งว่า คีย์บอร์ดนั้น แสดงหรือหายไปแล้วนะครับ ในฟังก์ชั่น viewWillAppear และ viewWillDisAppear ดังนี้ครับ


-(void)viewWillAppear:(BOOL)animated{

[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(keyboardDidShow:)
name:UIKeyboardWillShowNotification
object:nil];

[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(keyboardDidHide:)
name:UIKeyboardWillHideNotification
object:nil];
}

-(void)viewWillDisappear:(BOOL)animated{
[[NSNotificationCenter defaultCenter] removeObserver:self];
}

จากโค้ดด้านบน ในฟังก์ชั่น viewWillAppear คือ เมื่อวิวนี้กำลังปรากฏ viewWillDisappear คือ เมื่อวิวนี้กำลังจะหายไป ในสองฟังก์ชั่นนี้เราจะสร้างและลบ Notification นะครับ สิ่งที่บ่งว่า Notification นั้นจะทำอะไรขึ้นอยู่กับค่า name ครับ UIKeyboardWillShowNotification คือเมื่อคีย์บอร์ดกำลังแสดงขึ้นมา และ UIKeyboardWillHideNotification คือเมื่อคีย์บอร์ดกำลังจะซ้อนไป

3) เขียนฟังก์ชั่น selector ของทั้งสองฟังก์ชั่น

โค้ดของ @selector(keyboardDidShow:)


-(void)keyboardDidShow:(NSNotification*)notif{
//animation
[UIView beginAnimations:@"" context:NULL];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
textContainer.frame = CGRectMake(textContainer.frame.origin.x, 60,
textContainer.frame.size.width, textContainer.frame.size.height);
[UIView commitAnimations];
}

จากโค้ดด้านบนส่วนที่สำคัญคือ ส่วนของการเปลี่ยนค่า frame ของ textContainer ให้ค่า y นั้นลดลงเพื่อให้เลื่อนไปอยู่ด้านบน ให้พ้นคีบอร์ด ส่วนการเรียกใช้ [UIView …] เป็นการทำแอนิเมชั่นครับ ผมเอามาใส่เสริมเพื่อไม่ให้มันเลื่อน แบบแข็งๆ ไม่สวยเท่านั้นเองครับ หากสงสัยตรงแอนิเมชั่นเม้มถามได้เลยนะครับ

โค้ดของ @selector(keyboardDidHide:)


-(void)keyboardDidHide:(NSNotification*)notif{
//animation
[UIView beginAnimations:@"" context:NULL];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
textContainer.frame = CGRectMake(textContainer.frame.origin.x, 280,
textContainer.frame.size.width, textContainer.frame.size.height);
[UIView commitAnimations];
}

จากโค้ดด้านบนก้อจะคล้ายๆ กับโค้ดของ keyboardDidShow แต่จะเปลี่ยนแค่ ค่า y เหมือนเดิม ให้กลับคืนตำแหน่งเดิมครับ

เท่านี้ก็เสร็จแล้วครับ วิธีการใช้ Notification เพื่อตรวจสอบว่า Keyboard แสดงหรือซ้อนอยู่เพื่อเราจะได้ เลื่อนวิวที่ต้องการหลบคีย์บอร์ดให้ไปอยู่ในตำแหน่งที่ต้องการได้ แต่ไม่ใช่แค่วิธีนี้วิธีเดียวนะครับที่สามารถใช้แก้ไขปัญหาได้ ยังมีอีกหลายวิธีไม่ว่าจะใช้ Delegate ของ UITextField ก็ได้หรือ Touch Event ก้อทำได้เช่นกัน

จากรูปตัวอย่างเพื่อนๆ คงสงสัยว่าทำไมต้องมี 5 TextField ก็เพราะว่ามันคือเนื้อหาในบทความต่อไปครับ เราจะมาทำให้การกรอกข้อมูลใน TextField ง่ายขึ้นด้วยการกด Next เพื่อไปยัง TextField อันถัดไป รอติดตามอ่านกันได้ครับ สำหรับเรื่องนี้หากเพื่อนๆ สงสัยก็เม้นเข้ามาถามได้เช่นเดิมนะครับ วันนี้เท่านี้ก่อน สวัสดีครับ

Reference

adaydesign :)

About adaydesign

นักพัฒนาแอพพลิเคชั่นบนโมบาย [iPhone Android] คนหนึ่งซึ่งอยากจะบันทึกเรื่องราวของเส้นทางนักพัฒนาโมบายแอพพลิเคชั่นเอาไว้ในบล็อคน้อยๆ แห่งนี้ เผื่อจะแบ่งบันและแลกเปลี่ยนความรู้ให้กับคนอื่นๆ ได้บ้าง :) Mobile Application Developer; Flash Mobile, iPhone/iPad, Android Mobile Phone/Tablet and Blackberry Playbook.

Posted on กรกฎาคม 6, 2011, in [Dev] iOS and tagged , , . Bookmark the permalink. ใส่ความเห็น.

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: