เล่นกับ UICollectionView และ Navigation ดูบ้าง

จริงๆ การใช้งาน UICollectionView มีความคล้ายกับการใช้ UITableView มากๆ ดังนั้นไม่ใช่เรื่องยากที่จะเรียนรู้ UICollectionView อีกสักตัว ซึ่งสิ่งที่เราจะสร้างในหัวข้อนี้คือ แอปพลิเคชันที่แสดงข้อมูลเกี่ยวกับประเทศต่างๆ

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

ทีนี้เรามาวาง UICollectionView กัน เลือกจาก Object Library แล้วลากมาวางบน Storyboard ตามภาพค่ะ

สิ่งที่เราจะต้องสนใจอย่างแรกคือ เรากำลังจะนำเสนอ Object ต่างๆ แนวใด แนวตั้ง (Vertical) หรือแนวนอน (Horizontal) เพียงแค่กำหนดส่วนของ Attributes Inspector หัวข้อ Scroll Direction เป็นสิ่งที่ต้องการเพียงเท่านี้เองค่ะ เราก็จะได้ทิศทางที่ Object ที่เราสนใจ Slide ไปในทิศทางที่ต้องการแล้ว

(เพิ่มให้หน่อย ถ้าอยากได้ Background ของ UICollectionView เป็นสีเดียวกับพื้นหลัง ให้เลือก Background ที่ส่วนของ Attributes Inspector เป็นแบบ Clear Color )

จากตัวอย่างสิ่งที่เราอยากนำเสนอคือ ภาพ (UIImageView) และข้อความ (UILabel) ไม่ใช่เรื่องยาก เพียงนำ UIImageView ไปวางใน UICollectionViewCell ส่วนตัวอักษรเพียงเอา UILabel ไปวางในตำแหน่งที่เราอยากให้แสดงตัวอักษรแค่นั้นเองค่ะ (แล้วอย่าลืมจัด Layout นะคะ) จัดการเรื่อง UI หมดแล้ว มาถึงการเขียน Code ละ

อย่างแรกเลย เรามาเตรียมเครื่องมือให้ครบกันก่อน เริ่มจากจะสร้าง Class สำหรับสร้าง Object เกี่ยวกับข้อมูลประเทศกันก่อน โดยสร้างไฟล์ที่เป็น .swift ขึ้นมา

ทีนี้เราก็เขียน Code สำหรับสร้าง Class ได้เลยค่ะ

เมื่อเราได้ Class แล้ว เวลาจะนำไปใช้เราก็ต้องสร้าง Object ขึ้นมาก่อนแค่นั้นเอง ถัดมาเราจะสร้างไฟล์ Cocoa Touch Class สำหรับสร้าง UICollectionViewCell ในแบบที่เราต้องการกันค่ะ

เมื่อได้ File มาแล้ว สิ่งที่เราอยากได้คือ CollectionViewCell ในแบบที่มีรูปภาพและข้อความ นี่คือสิ่งที่เราอยากได้ ดังนั้นในเมื่อที่ Storyboard มีการวางไว้แล้ว เราก็แค่ประกาศ Outlet ตามนี้เลยค่ะ (อย่าลืมผูก CollectionViewCell กับไฟล์นี้ด้วยนะคะ)

การทำงานของ CollectionViewCell นี้เราต้องการให้แสดงรูปภาพของประเทศและชื่อประเทศ ดังนั้นเราจะเขียน Code ตามนี้ค่ะ

(อ่ออ func layoutSubviews เป็น func ที่เอาไว้จัดภาพให้มีลักษณะเป็นมุมโค้งแค่นั้นค่ะ)

เมื่อเราได้ 2 ไฟล์แล้ว ทีนี้เราก็พร้อมจะเอาเครื่องมือต่างๆ ที่เตรียมไว้มารวมกัน พูดง่ายๆ คือมาเรียกใช้ที่ไฟล์ ViewController.swift นั่นแหล่ะค่ะ การเขียน Code คล้ายๆ กับตอนทำ UITableView เลยค่ะ แต่เพิ่มนิดนึงคือ เราจะประกาศ Outlet ให้ CollectionView แล้วก็สร้าง List ของ Country จริงๆ ก็อยู่ใน Class ที่เราสร้างไว้ก่อนหน้าน่ะค่ะ

มา...เสร็จแล้วก็สร้าง Cell กัน ด้วยคำสั่ง

แค่นี้ก็เสร็จแล้ว เราก็จะได้หน้าแรกของแอปพลิเคชันออกมา (อย่าลืมว่าก่อนจะทดสอบรันแอปพลิเคชัน ย้อนกลับไปดูที่ storyboard หน่อยนะคะ ว่าตัว CollectionView ประกาศ Datasource กับ Delegate หรือยัง เดี๋ยวจะไม่เห็นภาพเอาน้าาา)

สุดท้ายเป็นการสร้าง Navigation นี่เป็นวิธีหนึ่งนะคะ จริงๆ มีอีกหลายวิธีค่ะ เริ่มจากไปที่ Main.storyboard สร้าง Navigation Controller ค่ะ เพียงแค่ไปที่ Menu Editor แล้วเลือก Embed In แล้วก็ Navigation Controller จากนั้นเอา UIViewController มาวางสักอัน วาง UIImageView แล้วก็ UILabel ซะ เราต้องการให้หน้าใหม่นี้แสดงภาพและชื่อประเทศตามที่ผู้ใช้งานแตะ ดังนั้นก็ต้องเขียน Code ตรงนี้ไม่อยากแค่สร้างไฟล์จาก Cocoa Touch Class สร้างเป็น UIViewController ธรรมดาเนี่ยแหล่ะค่ะ แล้วประกาศ Oulet ให้ UIImageView และ UILabel