การทำ UICollectionView แบบ Vertical และ Horizontal สวยๆ

UICollectionView นั้นจะทำได้ Scroll Direction 2 แบบ คือ Horizontal (เลื่อนได้ซ้าย-ขวา) และ Vertical (เลื่อนได้ขึ้น-ลง) นั้นเอง

เรามาเริ่มทำกันเลยดีกว่า อย่างแรกสร้างโปรเจคขึ้นมา ลากรูปที่ต้องการมาไว้ให้พร้อม จากนั้นเลือกไฟล์ Main.storyboard แล้วลาก CollectionView มาวาง

แล้วปรับขนาดและ Layout แล้วอย่าลืมปรับสีพื้นหลังของ Collection View ให้เป็น Clear Color เพราะว่าถ้าไม่ปรับ ตรงช่องว่างพื้นหลังมันจะเป็นสีขาว

ลาก Image View ลงใน Collection View Cell และอย่าลืมปรับ Layout ด้วย

ลาก Label มาวาง และอย่าลืมปรับ Layout ด้วย

ต่อไปจะสร้าง class ใหม่ ให้ใช้ในการเก็บข้อมูล โดยไปที่ File > New > File สร้างไฟล์แบบที่มีชื่อว่า Swift File ตั้งชื่อไฟล์อะไรก็ได้ ยกตัวอย่าง country

แล้วพิมพ์โค๊ดตามดังรูปเพื่อเก็บข้อมูล

title คือ ชื่อที่จะเอาไปแสดงบน Label ส่วน UIImage(named: “1.jpg”) ก็คือชื่อไฟล์รูปของเรา

ถัดมาไปที่ File > New > File สร้างไฟล์แบบที่มีชื่อว่า Cocoa Touch Class เพื่อแสดงรูปบน UICollection View Cell ยกตัวอย่างตั้งชื่อไฟล์ “showCollectionViewCell” อย่าลืกเลือก SubClass เป็น UICollectionViewCell ด้วย

กำหนด Collection View Cell ให้รับไฟล์ showCollectionViewCell

ลาก Image View และ Label มาประกาศในไฟล์ “showCollectionViewCell”

แล้วพิมพ์โค๊ดตามนี้เพื่อให้อัพเดตและแสดงข้อมูล ส่วนฟังก์ชัน layoutSubviews คือปรับขอบCollection View ให้โค้งสวยๆ

ถัดมาไปที่ไฟล์ ViewController.swift แล้วพิมพ์โค๊ดตามนี้เพื่อให้แสดงข้อมูล

Collection View มาประกาศใน ViewController

ลาก Collection View มาประกาศ dataSource และ delegate

ตั้ง Identifier ของ Collection View Cell เป็น dataCell

Collection View ตั้ง Scroll Direction เป็น Vertical เลื่อนได้ขึ้น-ลง

Collection View ตั้ง Scroll Direction เป็น Vertical เลื่อนได้ซ้าย-ขวา

แค่นี้ก็เสร็จเรียบร้อยแล้วครับ สำหรับUICollectionView