Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone



Clound SSD Virtual Server

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 Multiple View (Objective-C, iPhone, iPad)

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)


   
Share


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


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


   


Bookmark.   
       
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2012-10-23 21:46:58 / 2017-03-25 23:57:24
  Download : Download  iOS/iPhone Multiple View (Objective-C, iPhone, iPad)
 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 :


ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
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
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   







Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่