Xcode 4.2 : Beginning to using Storyboard Segue

การใช้งาน Storyboard Segue ตอนที่ 2 ต่อจากบทความที่แล้วนะครับ เรื่องของการใช้งาน Storyboard Segue ใน Xcode 4.2 เราจะมาดู

วิธีการส่งค่าจากหน้า View Controller แรกไปหน้า View Controller ที่สอง มันจะทำยังไงน๋อ

เรามาดูวีดีโอตัวอย่างกันสักหน่อยดีกว่า

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

ในบทความนี้เราจะได้เรียนรู้เพิ่มเติมเกี่ยวกับการใช้งานฟังก์ชั่น performSegueWithIdentifier และ ฟังก์ชั่น prepareForSegue นะครับ

ข้อควรจำ

• ฟังก์ชั่น performSegueWithIdentifier เอาไว้ใช้เรียกใช้งาน Segue ที่เราสร้างขึ้นใน storyboard

• ฟังก์ชั่น prepareForSegue นั้นใช้สำหรับส่งค่าไปยัง หน้า ViewController ปลายทาง ดังตัวอย่างนะครับ

01	//seeDetail เป็นฟังก์ชั่นที่รับอีเวนท์ที่เกิดจากการกดปุ่ม

02

03	- (IBAction)seeDetail:(id)sender {

04

05	//เปลี่ยนไปยังหน้าถัดไป

06

07	//sender ตัวนี้ที่ส่งไปคือ ปุ่มที่เรากดนั้นเองนะครับ

08

09	[self performSegueWithIdentifier:@"line1" sender:sender];

10

11

}

12

13	- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{

14

15	//เรามาดูกันดีกว่าว่า มันส่งพารามิเตอร์อะไรมาให้เราบ้าง และเราใช้ประโยชน์อะไรได้บ้างนะครับ

16

17	//segue : ตัวที่ส่งมาคือ segue ตัวนี้เราสามารถใช้งาน propertyต่างๆ ของมันได้ ได้แก่

18

19

/*

20

21	identifier คือชื่อที่เราระบุไว้ตอนอยู่ที่หน้า storyboard

22

23	source      คือหน้า ViewController หน้าปัจจุบัน

24

25	destination คือหน้า ViewController ที่ segue จะเปลี่ยนไปเป็นหน้านั้น

26

27

*/

28

29	//sender : ตรงนี้เราจะส่งอะไรมาก็ได้ เพราะพารามิเตอร์เป็น (id) แต่ในที่นี้เราส่ง ปุ่มที่ถูกกดเข้ามา ดังนั้นเราจะได้ชื่อปุ่ม นั้นเอง

30

31	//การตรวจสอบว่าเป็น segue ไหน จาก identifier

32

33	//เราตั้งชื่อ segue ที่จะใช้ว่า line1 จำได้มั้ย???

34

35	if([segue.identifier isEqualToString:@"line1"]){

36

37	//segue.sourceViewController = source ที่อธิบายไปแล้ว

38

39	//segue.destinationViewController = destination ก้ออธิบายไว้แล้วเช่นกัน ตอนนี้เราจะส่งค่าไปที่ destination

40

41	//จำเป็นต้องเปลี่ยนเป็น Page2 ด้วยเนื่องจาก destinationViewController นั้นเป็น id (อะไรก็ได้)

42

43	Page2 *p = (Page2*)segue.destinationViewController;

44

45	//เราจะส่งค่า ชื่อของปุ่มไปให้กับ Page2 แล้ว แต่ใน Page2 ต้องมี ตัวแปรเอาไว้รับค่าด้วยเช่นกัน

46

47	//ส่งชื่อปุ่มไปให้หน้าต่อไป

48

49	p.bName = ((UIButton*)sender).titleLabel.text;

50

51

}

52

53

}

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

ฟังก์ชั่น prepareForSegue เนี่ย ทำก่อนฟังก์ชั่น viewDidLoad ของหน้าต่อไปนั้นเอง ดังนั้นในหน้าถัดที่เราส่งค่าไป เราจึงต้องทำการ

เปลี่ยนค่า UI ในฟังก์ชั่น viewDidLoad ด้วยค่าตัวแปรที่หน้าแรกส่งมาให้ ดังนี้

01	- (void)viewDidLoad {

02

03	[super viewDidLoad];

04

05	//set Title

06

07	nText.text = bName;

08

09	//set Image

10

11	//ต้องต่อ ข้อความ String ด้วย .png ด้วยนะครับ เพราะต้องเอาชื่อภาพแบบเต็ม

12

13	nImage.image = [UIImage imageNamed:[bName stringByAppendingFormat:@".png"]];

14

15

}

เราก้อจะสามารถส่งค่าจากหน้าหนึ่งไปยังอีกหน้าหนึ่งได้แล้วครับ สรุปขั้นตอนง่ายๆ มีอยู่ว่า

• เราต้องเรียก Segue ที่เราสร้างใน storyboard เสียก่อน ด้วยฟังก์ชั่น performSegueWithIdentifier

• ส่งค่าไปที่หน้าปลายทางในฟังก์ชั่น prepareForSegue ด้วยค่า segue.destinationViewController

• ในหน้าปลายทาง ในฟังก์ชั่น viewDidLoad เราก็นำค่าที่ส่งจากหน้าที่แล้วมา ให้ค่ากับ UI ของเรา ก็เป็นอันเรียบร้อย

เป็นอย่างไรบ้างครับ สำหรับการใช้งาน Segue ในการส่งค่าจากหน้าหนึ่งไปยังหน้าหนึ่ง นั้นไม่ยากเลยใช่มั้ยครับ หากเพื่อนๆ มีข้อ

สงสัย หรืออยากทราบอะไรเพิ่มเติมเกี่ยวกับการใช้งาน Storyboard Segue ก้อคอมเม้นที่ด้านล่างได้เลยนะครับ แต่บทความสำหรับ

Segue ยังไม่หมดเพียงเท่านี้นะครับ ติดตามกันต่อไปนะครับ :)

Read More