Xcode 4.2 : Beginning to using Storyboard Segue


Xcode 4.2 : Beginning to using Storyboard Segue
การเริ่มต้นใช้งาน Segue บน Storyboard ของ Xcode 4.2

สวัสดีครับ วันนี้เรามาเริ่มกับวิธีการใช้งาน Segue อย่างง่ายๆ กันก่อนแล้วกัน คือเราต้องทำความรู้จักกับมันก่อนว่ามันคืออะไร และใช้ประโยชน์อะไร ?? นั้นสิมันคืออะไร

ทำความรู้จักกับ Segue กันก่อน

รู้จักชื่อ Segue อ่านว่า Seg-way

ประโยชน์ ใช้แทนการเปลี่ยนหน้าแบบต่างๆ เช่น modal, push และแบบอื่นๆ อีกเยอะ

ถ้าจะเปรียบเทียบ Segue ก้อเหมือนเส้นทางหนึ่ง ซึ่งจะเชื่อมไปยังหน้าต่อไป …

ความเดิมเวอร์ชั่นที่แล้ว (Xcode 4.1) ก่อนยังไม่มี Storyboard หรือแบบที่ไม่ได้ใช้ Storyboard

เวลาเราจะสั่งให้แอพของเรากดปุ่มจากหน้า A เปลี่ยนไปยังหน้า B ทำอย่างไรเอ๋ย ? จำกันได้มั้ย

ใช่แล้วครับ เรายังเขียนโค้ดแบบนี้กันอยู่เลย…


//ในไฟล์ AViewController.m

BViewController *b = [[BViewController alloc] init];

[self presentModalViewController:b animated:YES];

มันคือคำสั่งที่จะให้เปลี่ยนหน้าแบบ Modal นั้นเอง หรืออาจจะเคขเขียนเปลี่ยนหน้าแบบ Navigation ก็ได้เช่นกันครับ … นั่นคือแบบเก่า!!!

การเปลี่ยนแปลงจากการเขียนโค้ดการเป็นการเชื่อม Segue ที่ง่ายแสนง่าย

เรามาดูวีดีโอเดโมการใช้ Segue กันก่อนนะครับ

อธิบายเพิ่มเติม

การใช้ Segue แบบง่ายๆ นะ ผมนำเสนอไว้ 2 แบบก่อนแล้วกัน เดี๋ยวการใช้งาน segue ด้วยวิธีแบบอื่นๆ จะได้เอามาให้ศึกษาอีกที

แบบที่ 1 การใช้งาน Segue Action จากปุ่ม

วิธีทำไม่ยากครับ แค่คลิกขวาจากปุ่มแล้วก็เลือก Storyboard Segue > Modal แล้วก้อลากไปที่ ViewController ตัวที่จะไปได้เลย

Modal Action นั้นก้อคือ presentModalViewController: นั้นเองครับ หากจำกันได้

เมื่อกดที่ Attribute ดูจะสังเกตว่า

จะมี Attribute อยู่ 3 อันคือ

  • identifier คือ ชื่อระบุเส้น segue นั้น เอาไว้ใช้งานเวลาเขียนโปรแกรมด้วย ก็เหมือนกับชื่อตัวแปรที่เรียกใช้ segue ตัวเนี่ยหละ
  • style คือ รูปแบบการเปลี่ยนหน้าของ ViewController
  • Transition คือ รูปแบบแอนิเมชั่นเวลาเปลี่ยนหน้าของ ViewController สามารถเลือกได้ตามใจชอบ นะครับ

*การใช้ Custom และ Push เดี๋ยวเอาไว้โอกาสต่อไปเราได้ใช้กันนะครับ ตอนนี้ใช้ Modal ไปก่อน

แบบที่ 2 การใช้งาน Segue จาก ViewController

มาถึงแบบที่ 2 มีสิ่งที่เราต้องสังเกตเพิ่มขึ้นอีกสักหน่อย คือ

  1. เราจำเป็นต้องตั้งชื่อ identifier ให้กับ segue แล้วนะครับ ตอนนี้เราต้องเขียนโปรแกรมเอาแล้ว
  2. View Controller 1 ตัวนั้นสามารถสร้าง segue ได้หลาย segue แต่เราจำเป็นต้องกำหนดชื่อให้มันด้วยเช่นกัน

ในแบบที่ 2 เรามีปุ่มและเราต้องสร้าง ฟังก์ชั่น Event ให้กับปุ่มด้วยนะครับ ด้วย iPhone: XCode4 Assistant Editor 

ผมจะมาที่ฟังก์ชั่น Event เลยแล้วกัน

//จำได้หรือไม่ว่าเรากำหนด identifier ของเส้น segue ไว้ชื่ออะไร ลิ้งไปหน้าไหน
- (IBAction)goPage3:(id)sender {
//id segue = line2
//go next page
[self performSegueWithIdentifier:@"line2" sender:sender];
}

เมื่อเราต้องการเปลี่ยนหน้า ViewController ถัดไป ให้เราเรียกใช้ฟังก์ชั่น

[self performSegueWithIdentifier:@"line2" sender:sender];

โดยที่เราจะใส่ค่าพารามิเตอร์เข้าไปได้แก่

performSegueWithIdentifier: ใส่ชื่อ identifier ของ segue ที่เราตั้งเอาไว้

sender: ใส่ object อะไรเข้าไปก็ได้ อันนี้จะเอาไว้ใช้ประโยชน์ในโอกาสถัดๆ ไป คือเราอาจจะใส่ object คลาสของเราไปก็ได้เพื่อเป็นการส่งค่าไปให้ ViewController ตัวถัดไป

เพียงเท่านี้เราก้อจะสามารถใช้ segue เปลี่ยนไปยังหน้าต่างๆ ได้อย่างง่ายดายแล้วครับ

บทความที่เกี่ยวข้อง

adaydesign :)

About adaydesign

นักพัฒนาแอพพลิเคชั่นบนโมบาย [iPhone Android] คนหนึ่งซึ่งอยากจะบันทึกเรื่องราวของเส้นทางนักพัฒนาโมบายแอพพลิเคชั่นเอาไว้ในบล็อคน้อยๆ แห่งนี้ เผื่อจะแบ่งบันและแลกเปลี่ยนความรู้ให้กับคนอื่นๆ ได้บ้าง :) Mobile Application Developer; Flash Mobile, iPhone/iPad, Android Mobile Phone/Tablet and Blackberry Playbook.

Posted on ธันวาคม 12, 2011, in [Dev] iOS and tagged , , , , , . Bookmark the permalink. ใส่ความเห็น.

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: