แทนที่ Keyboard ด้วย Date Picker

ปกติแล้วเมื่อเราแตะเบาๆ (tap) ที่ UITextField แล้วจะมี keyboard เลื่อนขึ้นมาให้เราอัตโนมัติ ซึ่งเราสามารถกำหนดชนิดของ keyboard ได้จากหน้าต่าง Inspector ใน Tab ชื่อ Attributes ของ UITextField ได้ ดังรูป

บทความนี้จะแสดงวิธีเปลี่ยนจาก Keyboard ที่เลื่อนขึ้นมาหลังจาก tap ที่ UITextField ให้เป็น UIDatePicker แทน

หลักการโดยรวมก็คือ เราจะ implement UITextFieldDelegate ใหม่ เพื่อที่จะกำหนดพฤติกรรมของ UITextFieldว่าควรทำอย่างไรต่อไปเมื่อโดน tap โดย method ที่เราจะใช้ก็คือ

- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField;

สังเกตว่าค่าที่ method return ออกมาจะเป็น BOOL โดยหาก return กลับออกมาเป็น YES แปลว่าให้แสดง Keyboard ปกติอย่างที่เคยทำ ตรงกันข้ามหาก return ออกมาเป็น NO แปลว่าให้อยู่นิ่งๆ ไม่ต้องแสดง Keyboard อย่างที่เคยแสดงเมื่อโดน tap

เริ่มสร้างกันเลย

เริ่มจากการสร้างโปรเจ็คขึ้นมาก่อน โดยเลือกเป็น Window-based Application โดยผมตั้งชื่อมันว่า DatePicker
จากนั้นลาก UITextField ไปวางไว้บน Window หลัก

เปิดไฟล์ชื่อ DatePickerAppDelegate.h ขึ้นมา แล้วเพิ่ม property พร้อมทั้งบอกว่าให้ class นี้เป็น delegate class ของ UITextField ด้วย ดังนี้

@interface DatePickerAppDelegate : NSObject <UIApplicationDelegate, UITextFieldDelegate> {
    UIWindow *window;
    IBOutlet UIDatePicker *datePicker;

}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UIDatePicker *datePicker;

@end

แล้วตามไปบอก UITextField ที่เราวางลงไปด้วยว่าให้คลาสนี้ (DatePickerAppDelegate) เป็น delegate ของมัน ดังรูป

จาก code มีการใช้งาน UIDatePicker ดังนั้น ให้เราลาก UIDatePicker จาก Library เข้ามาวางไว้ใน MainWindow.xib ด้วย จากนั้นเชื่อ, Outlet ชื่อ datePicker ที่เราประกาศไว้ในคลาส DatePickerAppDelegate  เข้ากับ UIDatePicker ที่เราพึ่งวางลงไปตามรูปนี้

จากนั้นใน DatePickerAppDelegate.m ให้ implement delegate method เป้าหมายของเราที่ชื่อ
- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField; ดังนี้

- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField{
NSLog(@"Asked about allowing editing");
if (self.datePicker.superview == nil)
{
NSLog(@"date picker superview == nil");
[window insertSubview: datePicker atIndex: 0];

CGRect screenRect = [[UIScreen mainScreen] applicationFrame];
CGSize pickerSize = [self.datePicker sizeThatFits:CGSizeZero];
CGRect startRect = CGRectMake(0.0,
  screenRect.origin.y + screenRect.size.height,
  pickerSize.width, pickerSize.height);
self.datePicker.frame = startRect;

CGRect pickerRect = CGRectMake(0.0,
  screenRect.origin.y + screenRect.size.height - pickerSize.height,
  pickerSize.width,
  pickerSize.height);

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.3];

[UIView setAnimationDelegate:self];
self.datePicker.frame = pickerRect;
[UIView commitAnimations];

}
return NO;
}

ถึงตรงนี้อย่าลืม @synthisize datePicker; ด้วย

จากนั้นทดสอลงรันโปรแกรมดู พบว่าเมื่อเรา tap ที่ UITextField แล้ว จะมี date picker วิ่งขึ้นมาแทนที่จะเป็น keyboard เหมือนอย่างเคย

หากพบว่า screenshot บางรูปมี Navigation Bar ติดอยู่ด้วยก็ไม่ต้องสงสัย คราวหน้าจะแสดงตัวอย่างสำหรับการซ่อน date picker ที่แสดงขึ้นมาด้วยการกดปุ่มที่ Navigation Bar

Related Link from Roti