เปลี่ยนไปแสดงหน้า view อื่นด้วย modal view

คราวนี้ก็เป็นการเขียนโปรแกรมใน iPhone เหมือนครั้งก่อน :)

การแสดง view อื่นๆทับ view ที่เรากำลังดูอยู่เพื่อทำอะไรบางอย่าง จากนั้นเราก็ปิดมันไป พฤติกรรมแบบนี้เรามักพบการนำไปใช้ในลักษณะของการที่ผู้ใช้ต้องการตั้งค่าอะไรบางอย่างเล็กน้อย หรือไม่ก็เป็นการแสดง credit หรือบอกเกี่ยวกับ (About) application นั้นๆ

เริ่มกันเลย
ขั้นตอนหลักๆที่จะทำกันก็คือ
1. สร้าง view และ controller ของมันขั้นมา 2 อัน ซึ่งอันหนึ่งจะเป็น view หลัก และอีกอันหนึ่งจะเป็นหน้าที่เราใช้เป็น modal view
2. ใส่ปุ่มให้กับทั้ง 2 view ที่เราสร้างไปในข้อ 1 และกำหนด event ให้ว่า เมื่อทำการ click แล้ให้สลับเอาอีก view หนึ่งมาแสดง หรือเอา view ที่กำลังแสดงอยู่ออกไป


เรามาเริ่มที่ขั้นแรกกันก่อน
ด้วยการสร้างโปรเจ็คเป็น Window-based Application จากนั้นสร้าง UIViewController subclass ขึ้นมา 2 อัน อันแรกให้ชื่อ RootController อันที่สอให้ชื่อ ModalViewController

เปิดไฟล์ MainWindow.xib ขึ้นมา แล้วลาก View Controller จาก Library มาวางไว้ในหน้าต่าง MainWindow.xib พร้อมทั้งลาก View เข้ามาเป็นลูกของ View Controller แต่ละอันด้วย

จากนั้นกำหนด class ให้ View Controller แต่ละอันเป็น RootController และ ModalViewController ตามลำดับ

ถึงตรงนี้เราจะได้ดังรูปด้านล่างนี้

จากนั้นสร้างตกแต่ง view ของทั้ง 2 controller โดยให้แต่ละ View มีปุ่มกดอย่างน้อย 1 ปุ่มแปะอยู่ด้วย

ขั้นที่ 2 ก็คือการให้มันรับรู้ว่าหากกดปุ่มแล้วให้ทำอะไร
หลังจากเรามีปุ่มบน view ทั้ง 2 แล้วให้เปิดไฟล์ ModalViewAppDelegate.h ขึ้นมาและเพิ่ม outlet ดังนี้

    IBOutlet ModalViewController *modalViewController;
    IBOutlet RootController *rootController;

และประกาศ action method ขึ้นมาอีก 2 ตัว สำหรับการแสดง และซ่อน modal view

- (IBAction) showModalView: (id) sender;
- (IBAction) hideModalView: (id) sender;

ถึงตรงนี้อย่าลืม import class ทั้งสองที่เราประกาศว่าจะใช้งานมันด้วยล่ะ

เมื่อเขียน interface เรียบร้อยแล้วก็ตามเข้าไปในไฟล์ ModalViewAppDelegate.m เพื่อ implement method ทั้ง 2 ต่อดังนี้

- (IBAction) showModalView: (id) sender{
    [rootController presentModalViewController:modalViewController animated:YES];
}

- (IBAction) hideModalView: (id) sender{
    [rootController dismissModalViewControllerAnimated:YES];
}

ถึงตรงนี้ก็เสร็จเรียบร้อย ซึ่งจะสังเกตได้ว่างเราเขียน code ในแต่ละ action แค่อย่างละบรรทัดเท่านั้นเอง!

ขั้นตอนต่อไปก็ถึงคราวต้องเชื่อมส่วนต่างๆเข้าด้วยกัน โดยลากเชื่อม rootController และ modalViewController ที่ประกาศไว้ใน ModalViewAppDelegate.h เชื่อมเข้ากับ view controller ของแต่ละอัน และลากปุ่มแต่ละปุ่มในแต่ละ view ที่เราสร้างไว้ เชื่อเข้ากับ method ที่เราประกาศไว้ใน ModalViewAppDelegate เช่นกัน

ถึงตรงนี้เราจะได้ดังรูปด้านล่าง

เมื่อทำเสร็จแล้ว ก็ทดลองสั่งรันเล่นได้เลย เราจะเห็นว่าหน้าต่าง modal view จะแสดงโดยการเลื่อนขึ้นมาจากด้านล่างเมื่อเรากดปุ่มในหน้าแรก และหากดปุ่มอีกทีในหน้า modal view มันก็จะเลื่อนกลับลงไปอย่างสวยงาม

transition สำหรับการแสดง modal view นั้นหลักๆที่มีใน standard library นั้นมีด้วยกัน 3 แบบคือ

UIModalTransitionStyleCoverVertical
UIModalTransitionStyleFlipHorizontal
UIModalTransitionStyleCrossDissolve

แบบแรกเป็นการเลื่อนจากล่างขึ้นบน และจากบนลงล่างตอนเราสั่งปิดมัน
แบบที่สองเป็นการ flip หน้าจอ เหมือนพลิกไปด้านหลังของ view และพลิกกลับหากเราสั่งปิดมัน
แบบที่สาม modal view จะค่อยๆชัดเจนขั้นมา ในขณะเดียวกัน view หลักจะค่อยๆจางหายไป

อ่านเพิ่มเติมได้ที่นี่

ซึ่งหากเราไม่ได้กำหนดอะไรเลย จะเป็นการใช้ transition แบบแรกเป็นค่าปริยาย

หากต้องการเปลี่ยน transition เป็นแบบอื่นๆอีก 2 อัน สามารถทำได้โดยกำหนดค่าให้กับ property ชื่อ modalTransitionStyle ให้กับ view controller ที่จะใช้เป็น modal view ซึ่งอาจกำหนดให้เลยใน method ชื่อ viewDidLoad ใน ModalViewController.m เลยก็ได้ ดังนี้

- (void) viewDidLoad{
    self.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
}

สำหรับคราวหน้าจะเขียนเกี่ยวกับการเปลี่ยนหน้า view ด้วย transition แบบอื่นๆ ที่ไม่ได้มีแค่ 3 แบบที่บอกไป :)

ผลลัพธ์ที่ได้จะเป็นแบบนี้



download code ตัวอย่างได้ที่นี่


Related Link from Roti

แทนที่อักขระพิเศษที่จะใช้ใน URL

ในการเขียนโปแกรมให้ส่ง http request ในบางครั้ง parameter ที่เราส่งไปด้วยเป็นอักขระที่ไม่สามารถแสดงได้ และต้องถูกเปลี่ยนให้เป็นรหัสพิเศษก่อน เช่น white space จะถูกเปลี่ยนเป็น %20 และเครื่องหมาย % จะถูกเปลี่ยนเป็น %25 เป็นต้น ทำให้เราจำเป็นต้องแทนที่อักขระเหล่านั้นก่อนนำไปใช้งาน

ดูเหมือนจะเหนื่อยแต่ในคลาส NSString มี method สำหรับช่วยในการเปลี่ยนให้แล้ว method นั้นคือ

stringByAddingPercentEscapesUsingEncoding

:)

Related Link from Roti

แทนที่ 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

แทนที่ 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