iOS/iPhone Multiple View (Objective-C, iPhone, iPad) |
iOS/iPhone Multiple View (Objective-C, iPhone, iPad) ในการสร้าง App (Application) บน iOS แน่นอนว่าในหนึ่ง Application ย่อมจะประกอบด้วยหลาย ๆ หน้า หรือในที่นี้เราเรียกว่า 1 หน้าเท่ากับ 1 View และในแต่ล่ะ View ก็จะสามารถทำการเชื่อมโยงหรือส่งค่าระหว่างกันได้ และการเชื่อมโยงระหว่าง View ก็สามารถทำได้หลายวิธี ผ่านการเขียน Code เอง หรือว่าจะใช้ Storyboard ก็สามารถทำได้ง่าย ๆ ด้วยเวลา 2-3 นาที เท่านั้น
iOS iPhone App and Multiple View
ก่อนที่เราจะไปถึงขั้นตอนารสร้าง Multiple View ด้วย Storyboard บทความนี้จะอธิบายการสร้าง View และการเชื่อมโยง View แบบเขียน Code เอง ด้วยการสร้าง View ขึ้นมาหลาย ๆ View พร้อมกับ Button เพื่อทำการ Link เปลี่ยน View ในมุมมองต่าง ๆ
จากบทความก่อนหน้านี้เราได้เรียนเกี่ยวกับโครงสร้างของ View ว่าภายใน 1 View นั้น ๆ จะประกอบด้วย 3 ไฟล์ ด้วยกับคือ .xib , .h และ .h แต่ปกติแล้วกรณีที่เราไม่ได้เขียน Code อื่น ๆ เราก็สามารถสร้าง View ขึ้นมาด้วยไฟล์ .xib ไฟล์เดียวก็ได้เช่นเดียวกัน จากนั้นเราก็ใช้ Interface Builder ในการตกแต่งหน้า View ต่าง ๆ แต่ในกรณีที่เราจะต้องเขียน Code เพื่อสั่งการทำงานของ View เราจำเป็นจะต้องสร้าง Class ที่เป็น .h และ .m ด้วยทุกครั้ง และในบทความนี้ผมจะใช้การสร้าง View ขึ้นมา 3 ตัว ซึ่งจะได้ไฟล์ทั้งหมด 9 ไฟล์
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-01.jpg?v=1001)
เริ่มต้นด้วยการสร้าง Project เลือกเป็นแบบ Single View Application
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-02.jpg?v=1001)
กำหนดชื่อโปรเจค และไม่ต้องคลิกเลือกอะไรใน Checkbox
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-03.jpg?v=1001)
จะสังเกตุว่าตอนนี้มีไฟล์ที่เป็น View ที่เป็นค่า Default อยู่ 1 ชุด ซึ่งประกอบด้วย (ViewController.xib , ViewController.h และ ViewController.m) ต่อไปนี้ผมจะเรียกว่า View 1 ชุด
![](/images/adv.jpg)
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-04.jpg?v=1001)
เราจะสร้าง View ขึ้นมาอีก 2 ชุด ให้คลิกขวาที่โฟเดอร์ App บน Xcode และเลือก New File....
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-05.jpg?v=1001)
ภายใต้ iOS และ Cocoa Touch เลือก Objective-C Class (ถ้าใน Version อื่น ๆ อาจจะเป็น UIViewController and Class แต่จะคล้าย ๆ กัน)
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-06.jpg?v=1001)
กรอกชื่อ Class และเลือก Subclass เป็น UIViewController และที่คำสัญจะต้องเลือก Checkbox ว่า With XIB for user interface
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-07.jpg?v=1001)
จะได้ไฟล์ View ขึ้นมาอีก 1 ชุด (ซึ่งประกอบด้วย .xib .h และ .m)
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-08.jpg?v=1001)
ลองเพิ่มขึ้นมาอีก 1 ชุดเป็นชุดที่ 3
สรุปตอยนนี้เรามีไฟล์ View อยู่ 3 ชุดคือ ViewController.xib , PageViewController2.xib และ PageViewController3.xib ถ้าต้องการเข้าไปในแต่ล่ะ View เพื่อออกแบบ View เช่น Label หรือ Button ต่าง ๆ สามารถคลิกเข้าไปได้ในแต่ล่ะ View การสร้าง IBOutlet , IBAction ซึ่งวิธีการสามารถหาอ่านได้จากบทความก่อน ๆ หน้านี้ และผมจะไม่อธิบายว่าจะต้องทำอย่างไรบ้าง และจะเจาะจงไปยังการเชื่อมโยงระหว่าง View
ภายใต้ View ที่ 1 ที่ชื่อว่า ViewController.xib
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-09.jpg?v=1001)
เราได้ออกแบบหน้าจอด้วย Label และ Button ดังรูป
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-10.jpg?v=1001)
สร้าง IBAction อง Button บน View ที่ 1(ViewController.xib) เพื่อจะเชื่อมโยงไปยัง View ที่ 2 (PageViewController2.xib)
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-11.jpg?v=1001)
เลือกเป็น Action
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-12.jpg?v=1001)
กำหนดชื่อ Method ของ IBAction
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-13.jpg?v=1001)
ได้ Method ของ IBAction เรียบร้อย
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-14.jpg?v=1001)
เมื่อมาดูที่ไฟล์ ViewController.m จะเห็น Method ขึ้นมาอัตโนมัติ รอแค่เราแรกคำสั่งสำหรับการเชื่อมโยง View เท่านั้น
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-15.jpg?v=1001)
การเชื่อมโยง View จะต้อง import ชื่อ View ที่อยู่หลายทาง ซึ่งจะใช้การ import ตัว class ที่เป็น .h ในตัวอย่างจะใช้ PageViewController2.h และก็ใส่ Event ใน Method ดังรูป
ViewController.h
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
{
}
- (IBAction)GotoView2:(id)sender;
@end
ViewController.m
#import "ViewController.h"
#import "PageViewController2.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (IBAction)GotoView2:(id)sender {
PageViewController2 *view2 = [[PageViewController2 alloc] initWithNibName:nil bundle:nil];
[self presentViewController:view2 animated:NO completion:NULL];
}
@end
เมื่อเสร็จสิ้นขั้นตอนดังกล่าวแล้วก้จะสามารถทำการรันเพื่อทดสอบได้ทันที และตอนนี้เราจะได้ View 1 ที่มีปุ่ม Button เพื่อคลิกและเปิด View 2 ขึ้นมา และถ้าต้องการสร้าง Event ที่ View ที่ 2 และ 3 ก็สามารถใช้หลักการเดียวกันทุกประการ ส่วนคำสั่งต่าง ๆ ใน View ที่ 2 และ 3 มีดังนี้
PageViewController2.xib (View 2)
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-16.jpg?v=1001)
PageViewController2.h
#import <UIKit/UIKit.h>
@interface PageViewController2 : UIViewController
{
}
- (IBAction)btnBack:(id)sender;
- (IBAction)GotoView3:(id)sender;
@end
PageViewController2.m
#import "PageViewController2.h"
#import "PageViewController3.h"
@interface PageViewController2 ()
@end
@implementation PageViewController2
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (IBAction)btnBack:(id)sender {
[self dismissViewControllerAnimated:YES completion:NULL];
}
- (IBAction)GotoView3:(id)sender {
PageViewController3 *view3 = [[PageViewController3 alloc] initWithNibName:nil bundle:nil];
[self presentViewController:view3 animated:NO completion:NULL];
}
@end
PageViewController3.xib (View 3)
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-17.jpg?v=1001)
PageViewController3.h
#import <UIKit/UIKit.h>
@interface PageViewController3 : UIViewController
{
}
- (IBAction)BacktoView2:(id)sender;
- (IBAction)GotoView1:(id)sender;
@end
PageViewController3.m
#import "PageViewController3.h"
#import "ViewController.h"
@interface PageViewController3 ()
@end
@implementation PageViewController3
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (IBAction)BacktoView2:(id)sender {
[self dismissViewControllerAnimated:YES completion:NULL];
}
- (IBAction)GotoView1:(id)sender {
ViewController *view1 = [[ViewController alloc] initWithNibName:nil bundle:nil];
[self presentViewController:view1 animated:NO completion:NULL];
}
@end
Screenshot
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-18.jpg?v=1001)
Screenshot for View 1
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-19.jpg?v=1001)
Screenshot for View 2
![iOS/iPhone Multiple View (Objective-C, iPhone, iPad) iOS/iPhone Multiple View (Objective-C, iPhone, iPad)](https://www.thaicreate.com/upload/tutorial/ios-multiple-view-20.jpg?v=1001)
Screenshot for View 3
สำหรับการสร้าง Event เพื่อทำการเปลี่ยน View ไปยัง View ต่าง ๆ ก็มีหลักการง่าย ๆ เพียงเท่านี้ อาจจะดูแล้วหลายขั้นตอน แต่ถ้าเราเข้าใจ จะรู้เลยว่ามันเป็นเพียงขั้นตอนง่าย ๆ เท่านั้น และไม่ต่างอะไรกับการเขียน Android กับ Windows Phone หรือ Application อื่น ๆ
หรือถ้าคิดว่าวิธีนี้ยากหรือเข้าใจยากและไม่อยากมานั่งเสียเวลากับการเขียน Code ลองใช้ Storyboard ก็สามารถทำวิธีทั้งหมดนี้ได้ภายใน 3-5 นาทีเท่านั้น
iOS/iPhone Storyboard and View , Multiple View (Objective-C, iPhone, iPad)
|
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
|
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
|
Score Rating : |
![](/images/resource/startrue.gif) ![](/images/resource/startrue.gif) ![](/images/resource/startrue.gif) |
|
|
Create/Update Date : |
2012-10-23 21:46:58 /
2017-03-25 23:57:24 |
|
Download : |
|
|
Sponsored Links / Related |
|
|
|
|
|
|
|