Xcode 4.2 : Custom Storyboard Segue


Xcode 4.2 : Custom Storyboard Segue
การใช้งาน Storyboard Segue แบบสร้างคลาสเอง

สวัสดีครับพบกันอีกแล้วนะครับ สำหรับบทความที่เกี่ยวกับเรื่องการใช้งาน Storyboard Segue ในบทความนี้เป็นเรื่องที่ 3 แล้วนะ จะพูดถึงเรื่องการใช้ Custom Segue นะครับว่า ทำไมเราถึงใช้ และมันเอาไปใช้อย่างไร

ดูวีดีโอสาธิตการใช้งาน Custom Segue กันก่อนเลยดีกว่า

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

ทำไมเราถึงใช้ Custom Segue

เราสามารถเปลี่ยนแปลงค่า UI ในหน้าถัดไปได้จากคลาส Segue ของเรา ได้โดยตรง ไม่เหมือนกับการใช้ฟังก์ชั่น prepareForSegue ที่ต้องโยนค่าใส่ตัวแปรของหน้านั้นก่อนจึงเข้าไปเปลี่ยนแปลงค่า UI ในหน้าถัดไปได้

ขั้นตอนในการใช้งาน Custom Segue

ขั้นตอนการใช้งาน Custom Segue สรุปได้ 4 ขั้นตอนดังนี้

1. ลาก Segue เชื่อมไปยังหน้าที่ต้องการ เลือกเป็นแบบ Custom Segue

2. สร้าง Objective-C class ขึ้นมา 1 คลาส เลือกให้เป็น subclass ของ UIStoryboardSegue

กดที่คลิกขวาโปรเจค > New File > iOS > Cocoa Touch > Objective-C class

3. กำหนดค่าคลาส  segue ให้กับ Custom Segue ที่เราลากเอาไว้ ในส่วนของ Attribute นะ

4. กลับมาที่ไฟล์ .m ของ Custom Segue ของเรา เขียนฟังก์ชั่น perform เพื่อจัดการการไปต่อหน้าต่อไป

เราสามารถพิมพ์ฟังก์ชั่น -perform ได้เลย เนื่องจากเราเป็น sub class  ของ UIStoryboardUI อยู่แล้ว แต่หากเราไม่ได้เป็น sub class ของ UIStoryboardUI เมื่อกด -perform Xcode จะไม่ขึ้น guide ให้เรา


- (void) perform{

}

สิ่งที่เราต้องรู้คือ ตอนนี้คลาส custom segue ของเราเป็น sub class ของ UIStoryboardSegue ดังนั้นเราสามารถเรียกใช้ attribute ของ segue ได้

  • identifier คือ ชื่อระบุ segue
  • sourceViewController คือ view controller ปัจจุบัน
  • destinationViewController คือ view controller ถัดไป

ดังนั้นเราสามารถเปลี่ยนหน้าจากหน้าปัจจุบันไปหน้าถัดไปได้ด้วย

  • ฟังก์ชั่น presentModalViewController หากเป็นการเปลี่ยนหน้าจาก ViewController
  • ฟังก์ชั่น pushViewController หากเป็นการเปลี่ยนหน้าใน Navigation Controller

- (void) perform{

[self.sourceViewController presentModalViewController:self.destinationViewController animated:YES];

}

ไม่เพียงเท่านี้ หลังจากที่เราเปลี่ยนหน้า view เรียบร้อยแล้ว เราสามารถทำการเปลี่ยนแปลงค่าของ UI ใน view นั้นได้โดยตรงด้วย เนื่องจาก view นั้นมันเข้าฟังก์ชั่น viewDidLoad เรียบร้อยแล้ว

ตัวอย่างใช้ เรามี UILabel ชื่อ atext อยู่ในหน้าถัดไป เราจะเปลี่ยนค่าของ attribute text ของ atext ได้ดังนี้


- (void) perform{

[self.sourceViewController presentModalViewController:self.destinationViewController animated:YES];

//เปลี่ยนค่า UI ใน view ถัดไป

//เราต้องเปลี่ยน self.destinationViewController เป็นคลาสของหน้า view ถัดไปก่อน ในตัวอย่างเป็นคลาส Page2 ดังนั้นก็ต้อง #import "Page2" ด้วยนะ

((Page2*)self.destinationViewController).atext.text = @"HELLO A TEXT";

}

เพียงเท่านี้เราก็สามารถสร้าง Custom Storyboard Segue และเรียกใช้เพื่อกำหนดค่าการเปลี่ยนได้แล้วนะครับ และที่ยิ่งไปกว่านั้นคลาส Custom Storyboard Segue ของเรานี้สามารถเชื่อมได้กับ segue หลายๆ กันที่เราสร้างขึ้นได้ด้วย แล้วเราค่อยมาตรวจสอบ identifier เอาในฟังก์ชั่น perform ครับ จะเป็นการประหยัดการเขียนโค้ดไปในตัวด้วย

วิธีการใช้งาน Custom Storyboard Segue ก็คงจะจบลงแค่นี้นะครับ หากเพื่อนๆ มีข้อสงสัย หรือทำตามแล้วมันไม่ได้เนี่ย สามารถโพสคอมเม้นมาได้เลยนะครับ ผมยินดีตอบคำถามและแนะนำในการเขียนโปรแกรมให้ครับ สุดท้ายนี้ก็มีข่าวมาบอกกันนิดหน่อยครับ คือตอนนี้ผมกำลังจัดทำเว็บไซต์ใหม่ที่จะแยกออกไปจาก wordpress.com แล้วนะ จะไปอยู่ที่ blog.adayd3sign.com แล้วนะครับ เตรียมติดตามชมกันได้ครับ

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

adaydesign :)

About adaydesign

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

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

  1. ถ้าต้นทางของผม UIViewcontroller ปลายทางเป็น UITabbarcontroller จะใช้ code อะไรเขียนหรือครับ
    เพราะผมต้องการ Login เข้าแล้วเจอหน้า tabbarcontroller ครับ

    ขอบคุณล่วงหน้าครับ

  2. แต่ถ้าเลือก subclass ให้เป็นของ UIViewController ได้รึเปล่าคะ?

ใส่ความเห็น

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: