ปรับแต่ง UITableView กันเถอะ ^^

สวัสดีค้าทุกคน ขออนุญาติเรียกแทนตัวเองว่านุ่นนะคะ 

วันนี้นุ่นจะมาสอนการปรับแต่ง UITableView ค่ะ

จากเมื่อก่อนเราใช้ค่าเริ่มต้นของ UITableView ที่มีรูปแบบตายตัว ทำให้แอปของเราไม่น่าสนใจ
ดังนั้นเรามาปรับแต่ง Table Cell กัน เพื่อทำให้แอปของเราน่าสนใจขึ้นกันดีกว่า

Let's Start!

*ภาษา Swift 3.0

* Xcode 8.2.1

ขั้นตอนแรกนะคะเปิดโปรแกรม Xcode ขึ้นมาก่อน จากนั้น New Project ใหม่ขึ้นมา

ตั้งชื่อให้เรียบร้อย จากนั้นกด Create ค่ะ

ขั้นตอนถัดมานะคะ เราจะมาทำที่ Main Storyboard เพื่อจัดการกับหน้าตาของแอปเราค่ะ

จากนั้นวาง Table View ใน ViewController

เพิ่ม Prototype Cell เป็น 1 จะได้ Table View ที่มีหน้าตาแบบนี้ค่ะ

จากนั้นก็อย่าลืมตั้งชื่อ Identifier ของ cell ด้วยนะ

 เพิ่ม Navigation เข้าไปหน่อย โดยกดที่เมนู Editor>Embed in>Navigation Controller

มาปรับแต่ง cell กัน
อย่างแรกเลย กดขยายขนาดของ cell ให้มีพื้นที่ตามที่เราต้องการ
โดยกดที่ cell แล้วลากลงมาได้เลย ง่ายใช้มั้ยล้าาา

ต่อมา ตกแต่งตามใจชอบ จะเพิ่มรูปภาพ หรือข้อความยังไงก็ได้ ตามสไตล์เรา

แบบนี้

เราต้องสร้าง Connection เชื่อมระหว่างโค้ดกับ table เพื่อควบคุมการทำงาน

มีวิธีง่ายๆโดยการ คลิกที่ table แล้วกด Ctrl ลากขึ้นไปที่ปุ่มสีเหลืองบน ViewController

เลือกเป็น datasource แล้วทำแบบนี้อีกรอบ เลือกเป็น delegate

มาเขียนโค้ดกัน เริ่มที่สร้างไฟล์สำหรับ class ข้อมูลของเรา เป็น .swift 

(File>New>File>เลือกเป็น .swift)

ในโปรเจคนี้จะตั้งชื่อว่า food.swift ค่ะ

มีโค้ดดังต่อไปนี้......

static func เป็นการเตรียมพื้นที่ในเซลล์ของตาราง สำหรับข้อมูลที่คงที่ ไม่เปลี่ยนแปลง

เสร็จแล้วเรามาเขียนโค้ดต่อที่ viewconcroller

ฟังก์ชัน numberOfRowsInSection เป็นตัวกำหนดว่า ตารางของเราจะมีกี่ Cell
ฟังก์ชัน cellForRow เป็นตัวที่ส่งข้อมูลไปแสดงผลที่เซล

จะเห็นได้ว่า มี error ติดอยู่

ที่ foodTableViewCell และ myData 

เพราะว่าเรายังไม่ได้สร้างไฟล์  foodTableViewCell เลย

ดังนั้นเรามาสร้างไฟล์นี้เพื่อทำให้ error หายไปกันเถอะ

เลือก SubClass ดีๆนะ ต้องเลือกเป็น UITableViewCell

คลิกที่ Cell แล้วเลือก Class foodTableViewCell  เพื่อมาควบคุมการทำงานของเซลล์

เขียนโค้ดที่ Class foodTableViewCell ดังนี้

อย่าลืมประกาศ Outlets ด้วยนะจ๊ะ

ลองรันดู.........อิอิ

สวยมั้ยล่ะ table ในแบบของเรา

ตอนนี้เราก็ได้ Table แล้ว

เรามาเพิ่มให้เมื่อแตะที่เซลล์แล้วไปอีกหน้า เพื่อแสดงรายละเอียดกัน

เพิ่ม ViewController มาอีกหน้า วางรายละเอียดที่เราจะใส่ไปให้เรียบร้อย

สร้างไฟล์ DetailViewController เพื่อควบคุมหน้านี้กัน

เขียนโค้ดดังนี้

อย่าลืมประกาศ Outlets น้าาา

ตั้งชื่อ StoryboardID ด้วยนะ

พอเสร็จแล้วเราไปเพิ่มโค้ดที่ ViewController อีกนิดหน่อย

เสร็จแล้วววว 

ลองรันดูอีกที ^^

เป็นยังไงกันบ้างคะ

ง่ายใช่มั้ยเอ่ย

ลองนำวิธีนี้ไปปรับใช้กับแอปของเพื่อนๆกันนะคะ

อันนี้เป็นคลิปนะคะเผื่อมีส่วนไหนที่อธิบายไม่ครบ

ขอบคุณสำหรับการรับชมค้า :)