แทนที่ Keyboard ด้วย Date Picker (จบ)

ต่อจากครั้งที่แล้ว เรามาต่อกันด้วยการทำให้มัน date picker ที่โผล่ขึ้นมามันหายไปบ้างล่ะ

วิธีโดยทั่วไปสำหรับการทำให้ keyboard ที่โผล่ออกมาหายไป ก็คือเรียก

[self.doneButton resignFirstResponder]

จากนั้น keyboard ก็จะเลื่อนลงไปอย่างสวยงาม แต่สำหรับ date picker ที่เราสร้างขึ้น เราจะเขียนให้มันเลื่อนหายลงไป

ด้านล่าง เช่นเดียวกับ keyboard บ้าง

เริ่มกันเลย

เริ่มจากลาก Navigation Bar ไปแปะในหน้าต่างที่เราออกแบบบริเวณบนๆให้สมกับเป็น Navigation Bar

จากนั้นลาก Bar Button Item ไปวางไว้ในหน้าต่าง MainWindow.xib ถึงตอนนี้เราจะได้ object ต่างๆใน MainWindow.xib ดังนี้

เข้าไปที่ DatePickerAppDelegate.h เพิ่ม property เข้าไป เพราะเดี๋ยวเราจำเป็นต้องอ้างถึงมัน

IBOutlet UINavigationItem *navItem;
IBOutlet UIBarButtonItem *doneButton;

และ

@property (nonatomic, retain) UINavigationItem *navItem;
@property (nonatomic, retain) UIBarButtonItem *doneButton;

เมื่อเพิ่ม outlet แล้วจากนั้นก็ทำการเชื่อม property ที่เพิ่มเข้าไป กับ object ในหน้าต่าง MainWindow.xib โดยเมื่อ clck ขวาที่ Date Picker App Delegate แล้วจะพบว่ามี property ที่เราพึ่งเพิ่มเข้าไปในส่วนของ Outlets ดังรูปด้านล่าง จากนั้นทำการลากเชื่อม Outlet ต่างๆเข้ากับ object ใน MainWindow.xib

โดยลาก doneButton เชื่อมกับ Bar Button และ navItem เชื่อมกัน Navigation Item ตามรูป

ถึงตรงนี้เราก็เตรียม object ที่จะใช้งานครบแล้ว ต่อไปจะเป็นการเขียนโปรแกรมควบคุมพฤติกรรมของปุ่ม doneButton

สิ่งที่เราต้องทำต่อไปมี 2 อย่างคือ
1. เพิ่มปุ่ม Done เข้าไปใน Navigation Bar หลังจากมีการ tap ที่ textfield และแสดง date picker แล้ว
2. เมื่อกดปุ่ม Done แล้วให้ date picker หายไป รวมทั้งเอาปุ่ม Done ออกจาก Navigation Bar ด้วย

เริ่มกันเลย

เข้าไปใน method ชื่อ - (BOOL)textFieldShouldBeginEditing:(UITextField *)textField; เที่เราเคยสร้างไป
จากนั้นเพิ่ม code เข้าไปอีก 1 บรรทัดสำหรับเพิ่มปุ่ม Done เข้าไปใน Navigation Bar ดังนี้

...
[UIView commitAnimations];
// New Code
[self.navItem setRightBarButtonItem: self.doneButton animated: YES];

สั่ง animated: YES ก็เพื่อให้มัน... ลองเปลี่ยนเป็น NO ดู แล้วดูความแตกต่าง

ต่อไปเราจะมาสร้าง method สำหรับเหตุการณ์เมื่อกดปุ่ม Done กัน เริ่มจากเขียน code เพิ่มลงไปในไฟล์ DatePickerAppDelegate.m ดังนี้

- (IBAction) removePicker: (id) sender{
CGRect screenRect = [[UIScreen mainScreen] applicationFrame];
CGRect endFrame = self.datePicker.frame;
endFrame.origin.y = screenRect.origin.y + screenRect.size.height;
// start the slide down animation
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.3];
// we need to perform some post operations after the animation is complete
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(slideDownDidStop)];
self.datePicker.frame = endFrame;
[UIView commitAnimations];
[self.navItem setRightBarButtonItem: nil animated: YES];
}

- (void)slideDownDidStop
{
[self.datePicker removeFromSuperview];

}

เป็นการบอกให้เลื่อน date picker กลับลงไป และท้ายสุดให้เอาปุ่ม Done ออกจาก Navigation Bar ด้วย
และหลังจากทำ animation เสร็จแล้ว ก็ให้ Window เอา datePicker ออกตามไปด้วย โดยการเรียก method slideDonwDidStop นั่นเอง

สุดท้าย เหตุการณ์จะเกิดขึ้นได้ เราต้องไปเชื่อมเหตุการณ์ removePicker เข้ากับปุ่ม Done ด้วย

ลากไปหา DatePicker App Delegate ที่ซึ่งมี method ชื่อ removePicker ของเราอยู่

เท่านี้ก็ทดลองรันโปรแกรมได้เลย

หลังจากทำเสร็จแล้วจะได้พฤติกรรมของ textfield แบบนี้




Related Link from Roti