เปลี่ยนไปแสดงหน้า 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