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

Registered : 106,802

HOME > Mobile > [iOS/iPhone] Tutorials - สอนเขียน iPhone App ฟรี เขียน iPad App เรียน iPhone เขียนโปรแกรม iPhone > การเชื่อมโยง Segue and View บน Storyboard ของ Xcode 5 (iOS 7)


VPS  250 ҷ͹

การเชื่อมโยง Segue and View บน Storyboard ของ Xcode 5 (iOS 7)

การเชื่อมโยง Segue and View บน Storyboard ของ Xcode 5 (iOS 7) หัวข้อนี้จะเป็นการเขียน App iOS บน Xcode 5 ในรูปแบบของ Storyboard ด้วยการสร้าง View ขึ้นมากกว่า 1 View ที่อยุ่บน Storyboard และสร้าง View ที่เป็น User Interface (.xib) ที่ไม่ได้อยู่ใน Storyboard จากนั้นเราจะทำการเชื่อมโยง Segue หรือสร้างลิ้งค์เชื่อมโยงระหว่าง View โดยในบทความนี้เราจะได้เรียนรู้การเชื่อมโยง 2 รูปแบบ คือ การเชื่อมโยงภายใน Storyboard และการเชื่อมโยงจาก Link ใน Storyboard ไปยัง View (User Interface xib) ที่ไม่ได้อยู่ใน Storyboard

ก่อนอื่นอยากให้อ่านบทความนี้เพื่อความเข้าใจมากขึ้น (Xcode Storyboard Custom Class)


และบทความเกี่ยวกับ Storyboard และ Segue ในรูปแบบต่าง ๆ



iOS/iPhone Storyboard Action Segue and View (Objective-C,iPhone,iPad)


iOS 7 Xcode 5 Storyboard Segue View

จากบทความก่อนหน้านี้เรามี Storyboard ที่ประกอบด้วย View จำนวน 2 View คือ View 1 และ View 2
โดย
View 1 เชื่อมกับ ViewController.h และ ViewController.h
View 2 เชื่อมกับ ViewController2.h และ ViewController2.h

iOS 7 Xcode 5 Storyboard Segue View

และ View 3 ที่อยุ่นอก Storyboard ชื่อว่า ViewController3.xib ทำงานร่วมกับ ViewController3.h และ ViewController3.m

iOS 7 Xcode 5 Storyboard Segue View

ในหน้า Storyboard จะมี View อยู่ 2 View คือ View 1 และ View 2

iOS 7 Xcode 5 Storyboard Segue View

ใน View แรกให้สร้าง Button โดยเขียนข้อความว่า Go to View 2

iOS 7 Xcode 5 Storyboard Segue View

เขียนข้อความว่า Go to View 2








iOS 7 Xcode 5 Storyboard Segue View

จากนั้นเชื่อม Segue ด้วยการคลิกที่ Button จากนั้นคลิก Control ที่ Keyboard พร้อมกับลากไปยัง View 2

iOS 7 Xcode 5 Storyboard Segue View

เลือก modal

iOS 7 Xcode 5 Storyboard Segue View

ตอนนี้เราทำการเชื่อม Segue จาก View 1 ไปยัง View 2 ทีอยู่บน Storyboard เรียบร้อยแล้ว

iOS 7 Xcode 5 Storyboard Segue View

ทดสอบการรันบน Simulator ให้คลิกที่ Go to View 2

iOS 7 Xcode 5 Storyboard Segue View

แสดงหน้า View 2

จากขั้นตอนนี้เราจะเห็นว่าการเชื่อมโยง Segue บน Storyboard นั้นสามารถทำได้ง่ายมาก ๆ เพียงอาศัยการลาก Drag and Drop เท่านั้น ก็สามารถที่จะสร้างได้ง่าย ๆ ด้วยหตุผลนี้เอา Xcode 5 จึงสนุบสันให้เขียนบน Xcode เพราะสามารถทำได้ง่ายและรวดเร็วมาก

แต่ในกรณีที่ต้องการเชื่อม View ที่อยู่บน Storyboard ไปยัง View อื่น ๆ ที่อยู่นอกเหนือจาก Storyboard เราอาจจะต้องทำการเขียน คำสั่งด้วย Objective-C โดยขั้นแรกให้สร้าง Button บน View 2 ที่อยู่บน Storyboard ซะก่อน

iOS 7 Xcode 5 Storyboard Segue View

ใน View 2 บน Storyboard สร้าง Button ตั้งชื่อว่า Go to View 3

iOS 7 Xcode 5 Storyboard Segue View

จากนั้นเชื่อม IBOutlet และ IBAction เพื่อสร้าง Event ของ Go to View 3 ที่อย่บน View 2 ของ Storyboard

โดยการสร้าง IBOutlet หรือ IBAction จะต้องสร้างภายใต้ Class ของ .h และ .m ที่ได้เชื่อมโยงกันไว้ก่อนหน้านี้ ซึ่งก็คือ ViewController2.h

iOS 7 Xcode 5 Storyboard Segue View

กำหนดเป็น Action

iOS 7 Xcode 5 Storyboard Segue View

ตั้งชื่อว่า GotoView3

iOS 7 Xcode 5 Storyboard Segue View

ใน ViewController2.h เราได้ IBAction เรียบร้อยแล้ว

iOS 7 Xcode 5 Storyboard Segue View

จากนั้นให้ไปดูใน ViewController2.m

iOS 7 Xcode 5 Storyboard Segue View

เลือก ViewController2.m

iOS 7 Xcode 5 Storyboard Segue View

จะเห็นว่ามีการสร้าง Action ให้อัตโนัมติ








iOS 7 Xcode 5 Storyboard Segue View

ทำการ Include ไฟล์ ViewController3.h ซึ่งเป็น View ที่อยู่นอก Storyboard ที่เราจะเชื่อมโยงไป

iOS 7 Xcode 5 Storyboard Segue View

เขียนคำสั่งสำหรับเชื่อมโยงไปยัง View 3

- (IBAction)GotoView3:(id)sender {
    
    ViewController3 *view3 = [[ViewController3 alloc] initWithNibName:nil bundle:nil];
    [self presentViewController:view3 animated:NO completion:NULL];
    
}


ทดสอบการทำงาน

iOS 7 Xcode 5 Storyboard Segue View

แสดง View 1 บน Storyboard ให้ทดสอบคลิกเพื่อไปยัง View 2 ที่อยู่บน Storyboard เดียวกัน

iOS 7 Xcode 5 Storyboard Segue View

จากนั้น View 2 บน Storyboard จะเชื่อมโยงไปยัง View 3 ที่อยู่นอก Storyboard

iOS 7 Xcode 5 Storyboard Segue View

แสดง View 3 ที่อยู่นอก Storyboard

Code ทั้งหมดลอง ViewController.h และ ViewController.m

ViewController.h
//
//  ViewController2.h
//  iOS7App
//
//  Created by Weerachai on 3/23/2557 BE.
//  Copyright (c) 2557 Weerachai. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController2 : UIViewController


- (IBAction)GotoView3:(id)sender;


@end

ViewController.m
//
//  ViewController2.m
//  iOS7App
//
//  Created by Weerachai on 3/23/2557 BE.
//  Copyright (c) 2557 Weerachai. All rights reserved.
//

#import "ViewController2.h"
#import "ViewController3.h"

@interface ViewController2 ()

@end

@implementation ViewController2

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


- (IBAction)GotoView3:(id)sender {
    
    ViewController3 *view3 = [[ViewController3 alloc] initWithNibName:nil bundle:nil];
    [self presentViewController:view3 animated:NO completion:NULL];
    
}

@end



.

   
Share


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


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


   


Bookmark.   
       
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2014-03-23 11:46:59 / 2017-03-25 23:18:48
  Download : No files
 Sponsored Links / Related

 
สร้าง Project ของ iOS 7 บน Xcode 5 และการปรับแต่ง Run บน Simulator
Rating :

 
Xcode 5 กับ Storyboard สร้าง View หลาย View กับ Custom Class (.h , .m) (iOS 7)
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
ปรับแต่งเว็บให้โหลดเร็ว


สุดยอด Source Code V2.0
 

แจ้งชำระเงิน/โอนเงิน
 

Hit Link
   


Acc : thaicreate@hotmail.com






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