วันพฤหัสบดีที่ 7 กรกฎาคม พ.ศ. 2554

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 ดังนี้ครับ

[sourcecode language="objc"]

-(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];
}

[/sourcecode]

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

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

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

[sourcecode langauge="objc"]

-(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];
}

[/sourcecode]

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

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

[sourcecode language="objc"]

-(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];
}

[/sourcecode]

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


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

Reference

adaydesign :)

ไม่มีความคิดเห็น:

แสดงความคิดเห็น