Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

HOME > Mobile > [iOS/iPhone] Tutorials - สอนเขียน iPhone App ฟรี เขียน iPad App เรียน iPhone เขียนโปรแกรม iPhone > iOS/iPhone Multiple View (Objective-C, iPhone, iPad)

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)

เริ่มต้นด้วยการสร้าง Project เลือกเป็นแบบ Single View Application

iOS/iPhone Multiple View (Objective-C, iPhone, iPad)

กำหนดชื่อโปรเจค และไม่ต้องคลิกเลือกอะไรใน Checkbox

iOS/iPhone Multiple View (Objective-C, iPhone, iPad)

จะสังเกตุว่าตอนนี้มีไฟล์ที่เป็น View ที่เป็นค่า Default อยู่ 1 ชุด ซึ่งประกอบด้วย (ViewController.xib , ViewController.h และ ViewController.m) ต่อไปนี้ผมจะเรียกว่า View 1 ชุด

iOS/iPhone Multiple View (Objective-C, iPhone, iPad)

เราจะสร้าง View ขึ้นมาอีก 2 ชุด ให้คลิกขวาที่โฟเดอร์ App บน Xcode และเลือก New File....

iOS/iPhone Multiple View (Objective-C, iPhone, iPad)

ภายใต้ iOS และ Cocoa Touch เลือก Objective-C Class (ถ้าใน Version อื่น ๆ อาจจะเป็น UIViewController and Class แต่จะคล้าย ๆ กัน)

iOS/iPhone Multiple View (Objective-C, iPhone, iPad)

กรอกชื่อ Class และเลือก Subclass เป็น UIViewController และที่คำสัญจะต้องเลือก Checkbox ว่า With XIB for user interface

iOS/iPhone Multiple View (Objective-C, iPhone, iPad)

จะได้ไฟล์ View ขึ้นมาอีก 1 ชุด (ซึ่งประกอบด้วย .xib .h และ .m)

iOS/iPhone Multiple View (Objective-C, iPhone, iPad)

ลองเพิ่มขึ้นมาอีก 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)

เราได้ออกแบบหน้าจอด้วย Label และ Button ดังรูป

iOS/iPhone Multiple View (Objective-C, iPhone, iPad)

สร้าง IBAction อง Button บน View ที่ 1(ViewController.xib) เพื่อจะเชื่อมโยงไปยัง View ที่ 2 (PageViewController2.xib)

iOS/iPhone Multiple View (Objective-C, iPhone, iPad)

เลือกเป็น Action

iOS/iPhone Multiple View (Objective-C, iPhone, iPad)

กำหนดชื่อ Method ของ IBAction

iOS/iPhone Multiple View (Objective-C, iPhone, iPad)

ได้ Method ของ IBAction เรียบร้อย

iOS/iPhone Multiple View (Objective-C, iPhone, iPad)

เมื่อมาดูที่ไฟล์ ViewController.m จะเห็น Method ขึ้นมาอัตโนมัติ รอแค่เราแรกคำสั่งสำหรับการเชื่อมโยง View เท่านั้น

iOS/iPhone Multiple View (Objective-C, iPhone, iPad)

การเชื่อมโยง 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)

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)

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)

Screenshot for View 1

iOS/iPhone Multiple View (Objective-C, iPhone, iPad)

Screenshot for View 2

iOS/iPhone Multiple View (Objective-C, iPhone, iPad)

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)

https://www.thaicreate.com/mobile/ios-iphone-storyboard-view.html

ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท

ลองใช้ค้นหาข้อมูล


	By :	ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
	Score Rating :
	Create/Update Date :	2012-10-23 21:46:58 / 2017-03-25 23:57:24
	Download :

Sponsored Links / Related

iOS/iPhone Change View Startup Open First (Objective-C, iPhone, iPad)
Rating :

iOS/iPhone Storyboard and View , Multiple View (Objective-C, iPhone, iPad)
Rating :

iOS/iPhone Passing Data Between View (Objective-C,iPhone,iPad)
Rating :

iOS/iPhone Splash Screen Launch and Apps icons Launcher Example (iPhone,iPad)
Rating :

iOS/iPhone Portrait and Landscape Orientation (Objective-C, iPhone, iPad)
Rating :

iOS/iPhone Master Detail Wizard Application (Add/Insert/Delete/Table View)
Rating :

สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8

สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI

Free Tutorial

	สอน Google Maps Api
	สอน Windows Service
	สอน Entity Framework
	สอน Android
	สอน Java เขียน Java
	Java GUI Swing
	สอน JSP (Web App)
	iOS (iPhone,iPad)
	Windows Phone
	Windows Azure
	Windows Store
	Laravel Framework
	Yii PHP Framework
	สอน jQuery
	สอน jQuery กับ Ajax
	สอน PHP OOP (Vdo)
	Ajax Tutorials
	SQL Tutorials
	สอน SQL (Part 2)
	JavaScript Tutorial
	Javascript Tips
	VBScript Tutorial
	VBScript Validation
	Microsoft Access
	MySQL Tutorials
	-- Stored Procedure
	MariaDB Database
	SQL Server Tutorial
	SQL Server 2005
	SQL Server 2008
	SQL Server 2012
	-- Stored Procedure
	Oracle Database
	-- Stored Procedure
	SVN (Subversion)
	แนวทางการทำ SEO
	ปรับแต่งเว็บให้โหลดเร็ว