นำ CollectionView มาใส่ใน UITableViewCell กัน

สวัสดีครับวันนี้จะมาสอนการนำ CollectionView มาใส่ใน UITableViewCell แบบเก๋ๆกัน

ทำไมถึงต้องนำ CollectionView มาใส่ใน TableViewCell ด้วย ลองยกตัวอย่างแอปพลิเคชัน

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

ซึ่งแอปเหล่านี้จะมีการแสดงทั้ง ภาพตัวอย่าง,หมวดหมู่,สินค้าแนะนำ เป็นต้น ดังนั้นการแสดงข้อมูลที่มากๆจะใช้ TableView มาแสดง จึงทำให้วันนี้จะมาสอนวิธีการนำ CollectionView มาใส่ใน UITableViewCell กัน ถ้าพร้อมแล้วก็ลุยยยย ~~~~

Create New Project

ตั้งชื่อ Project และ เลือกที่อยู่ของ Project ให้เรียบร้อย

ทำการเปิด Main.storyboard ทำการลาก TableView

ลงบน View และจัด Layout ให้สวยงาม

ขั้นตอนถัดมา นำ CollectionView มาใส่ใน UITableViewCell

จัด Layout ให้สวยงาม

ขยายขนาด TableViewCell ตามความสวยงาม จากตัวอย่างใช้ความสูง 176

เว้นระยะห่างจากขอบด้านละ 8 เพื่อความสวยงาม

สิ่งที่จะมีใน UICollectionView ประกอบไปด้วย (ImageView,Visual Effect Blur,Label)

จัด Layout ตามภาพ อย่าลืมปรับ Autoresizing !!!

ขนาด CollectionViewCell 120 x 160 ขนาด ImageView 120 x 160 ขนาด Visual Effect Blur 120 x 38 ขนาด Label 120 x 38

อย่าลืมปรับการ Scroll จาก Vertical เป็น Horizontal ด้วยนะ

เมื่อเราได้ส่วนประกอบที่สำคัญครบแล้วก็ไปลงมือเขียน Code เพื่อขับเคลื่อนการทำงานกันเถอะ

แต่ แต่ แต่ แต่ !!!

ก่อนจะลงมือเขียน Code อย่าลืมทำการ delegate, datasource ของ UITableView ก่อน

แล้วก็อย่าลืมทำการหารูปภาพสวยๆ เพื่อมาตกแต่งแอปพลิเคชันของเราด้วยนะ

อย่างแรกเลยเราต้องมีไฟล์ Class สำหรับเก็บข้อมูลของเราก่อน

ตั้งชื่อว่า Dessert.swift โดยมี Code ดังต่อไปนี้

ถัดมาเรามีการวาง UICollectionView ไว้ภายใต้ UITableViewCell อีกที

เพราะฉะนั้นจะต้องมีไฟล์ หรือ เรียกว่า subclass ขึ้นมาควบคุมการทำงาน

ของ UITableViewCell ตั้งชื่อไฟล์ว่า subClass.swift

เลือก subClass เป็น UITableViewCell

ภายในประกอบไปด้วย Code ดังนี้

เช่นเดียวกันกับ UICollectionViewCell ตั้งชื่อไฟล์ว่า DessertViewCell.swift

ภายในประกอบไปด้วย Code ดังนี้

หลังจากนั้นอย่าลืมไปกำหนด Identity Inspector Class ด้วย

ขั้นตอนถัดมาทำการ delegate, datasource ของ UICollectionViewCell

คลิกที่ SubClass หรือ UITableViewCell

เลือก Referencing Outlets กด control และลากลงบน CollectionView

อย่าลืมประกาศ Identifier และลาก @IBOutlet ให้ครบ

เอาหล่ะใกล้เสร็จแล้วอีกนิดเดียว

มาเขียน Code กันอีกนิดหน่อยที่ ViewController

อธิบาย Code

ในส่วนของ ViewController

var catagories = ["Dessert","Food"] . หมายถึงในกรณีที่ต้องการแบ่งเป็นหมวดหมู่,ประเภท ผู้พัฒนาสามารถนำตรงไปเป็น HeaderInSection ได้
func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
return categories[section] // ชื่อของ catagories
}
func numberOfSections(in tableView: UITableView) -> Int {
return categories.count // จำนวนของ catagories
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 176.0; // ขนาดความสูงของ UITableViewCell
}

เท่านี้เราก็จะได้ UICollectionView เก๋ๆมาอยู่บน TableView แล้ว