ทำ Navigation Control สำหรับ TableView

จากบทความก่อนหน้านี้ที่เรียนรู้การสร้าง UITableView แบบง่ายๆ ไป (ย้อนอ่าน) คราวนี้เราจะมาส่งข้อมูลจาก TableView ณ ช่อง Cell ที่ผู้ใช้เลือกใช้งาน ส่งค่าไปยังหน้า View Controller หน้าใหม่กันค่ะ

ดังนั้นเราจะนำงานเดิมที่สร้างไว้มาทำงานต่อ โดย Main.storyboard เราจะเพิ่ม ViewController ลงไปอีกอันดังภาพที่ 1

ภาพที่ 1 วาง UIViewController ตัวใหม่

จากภาพ ViewController ตัวใหม่ที่นำมาวางนั้นจำเป็นต้องมี File ที่จะทำหน้าที่ควบคุมการทำงานของตัวมันเอง ด้วยเหตุนี้เราจึงต้องสร้าง File ใหม่ขึ้นมาด้วย โดยไปที่ Menu File -> New -> File ดังภาพที่ 2

ภาพที่ 2 สร้าง File ใหม่

หลังจากนั้นเราจะใช้ File Cocoa Touch Class โดยตั้งชื่อไฟล์ตามต้องการ และกำหนด Subclass เป็น UIViewController ดังภาพที่ 3

ภาพที่ 3 สร้าง File Cocoa Touch Class
ภาพที่ 4 กำหนดชื่อ File และ Subclass ที่จะใช้งาน

เรียบร้อยแล้วให้คลิกที่ Next และ Create ไปตามลำดับ ซึ่งหลังจากสร้าง File ขึ้นมาแล้ว ขณะนี้ File ที่สร้างมายังไม่ได้ถูกประกาศให้ใช้กับ ViewController ที่นำมาวางบน Main.storyboard ซึ่งเราจะต้องไปกำหนดที่ Indentities Inspector ดังภาพที่ 5 โดยเลือก Custom Class เป็นชื่อ File เดียวกับที่เราสร้างมาเมื่อสักครู่ (ตามภาพที่ 3และ 4)

ภาพที่ 5 กำหนด File ที่จะทำงานกับ ViewController

เสร็จแล้วเราจะสร้างเส้นทางเชื่อมต่อระหว่างหน้า View ทั้งสองอันเข้าด้วยกัน ด้วยการกดที่ control + คลิกที่ Cell แล้วลากไปยังหน้าที่เราต้องการจะเชื่อมต่อ ดังภาพที่ 6 จากนั้นเราจะได้หน้าต่างให้เลือกรูปแบบการเชื่อมต่อดังภาพที่ 7 ซึ่งเราจะเลือกเป็นแบบ Push

ภาพที่ 6 การสร้างการเชื่อมต่อระหว่างหน้า ViewContrller
ภาพที่ 7 เลือกรูปแบบการเชื่อมต่อ

หลังจากได้รูปแบบการเชื่อมต่อแล้ว จะมีเส้นทางการเชื่อมต่อปรากฏขึ้นมา ซึ่งเราจะตั้งชื่อให้เส้นทางนั้นกันดังภาพที่ 8 ค่ะ (ตั้งชื่ออะไรก็ได้นะคะ)

ภาพที่ 8 กำหนด Segue Identifier

คราวนี้สิ่งที่เราจะต้องสร้างต่อไป คือ Navigation Controller ด้วยการคลิกเลือกที่ view ที่เราจะให้เป็นหน้าเริ่มต้นของสาย Navigation จากนั้นไปที่ Menu Editor -> Embed In -> Navigation Controller ดังภาพที่ 9

ภาพที่ 9 การสร้าง Navigation Controller

เพียงเท่านี้ เมื่อเราลอง Run Application ดูการทำงาน เราก็จะสามารถแตะที่ Cell และเปิดหน้า ViewController ที่ผูกกับ showViewController.swift ได้แล้ว

ขั้นตอนต่อมาเป็นการส่งค่าจากหน้า ViewController ไปยังหน้า showViewController กันบ้าง ซึ่งเราต้องไปประกาศตัวแปรสำหรับฝั่ง showViewController เพื่อเป็นตัวรับค่ากันก่อนค่ะ

(ตามตัวอย่างนี้เราจะรับค่าเป็น String ดังนั้นจะประกาศตัวแปรสำหรับรอรับ String ค่ะ)

จากตัวอย่างเราประกาศ tempData และทดลอง print เพื่อดูการทำงานค่ะ

คราวนี้มาเขียนคำสั่งเพื่อส่งค่ากันบ้าง โดยไปที่ File ViewConteroller.swift หรือ File ที่ทำหน้าที่ควบคุมการทำงานของ TableView น่ะค่ะ

จากนั้นสร้าง function prepare ขึ้นมาดังนี้ค่ะ

ซึ่งในส่วนของ code เราจะสร้าง object ที่ทำหน้าที่เป็นตัวแทนของหน้า showViewController ซึ่งเป็นปลายทางของเราขึ้นมา จากนั้นเราก็จะส่งค่าผ่านตัวแปรได้แล้วค่ะ

แต่นิดนึงนะคะ ตรงที่เราจะส่งค่าไปหาตัวแปรที่เราประกาศได้เราต้องรู้ว่าผู้ใช้งานแตะที่ Cell ใดใน Table ดังนั้นเราต้องรู้จัก TableView ของเราก่อน นั่นคือการประกาศ Outlet

จากนั้นก็ดึงได้แล้วค่ะ ดังนี้

คราวนี้ไปทดสอบ Run Application ดูการทำงานได้แล้วค่ะ

ไม่น่าจะยากเกินไปลองดูนะคะ ^_^

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.