วิธีสร้าง CollectionView Layout ในแอพ iOS

CollectionView with TableView เป็นแนวคิดพื้นฐานสองประการในการพัฒนา iOS นักพัฒนาทุกคนควรเชี่ยวชาญทั้งสองอย่างเพื่อเป็นนักพัฒนาที่ดี

ในโพสต์นี้ เราจะเน้นที่ CollectionView เป็นหลัก ส่วน CollectionView นั้นเหมือนกับมุมมองตารางที่มีความแตกต่างบางอย่าง มุมมองคอลเลกชันรองรับการเลื่อนทั้งแนวนอนและแนวตั้งซึ่งดูเหมือนตาราง CollectionView ใน iOS ยังอ้างถึงมุมมองกริดใน Android

หากต้องการอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ โปรดอ้างอิง https://developer.apple.com/documentation/uikit/uicollectionview

อย่างที่คุณเห็น Collection View ประกอบด้วยมุมมองเสริมและเซลล์ มุมมองคอลเลกชันจะแสดงรายการบนหน้าจอโดยใช้เซลล์ ซึ่งเป็นอินสแตนซ์ของคลาส UICollectionViewCell ที่แหล่งข้อมูลของคุณกำหนดค่าและจัดเตรียมไว้

แหล่งข้อมูลของคุณกำหนดค่าและจัดเตรียมไว้

นอกเหนือจากเซลล์แล้ว มุมมองเสริมอาจเป็นสิ่งต่างๆ เช่น ส่วนหัวและส่วนท้ายของส่วนที่แยกจากแต่ละเซลล์ แต่ยังคงถ่ายทอดข้อมูลบางประเภท การสนับสนุนสำหรับมุมมองเสริมเป็นทางเลือกและกำหนดโดยออบเจ็กต์โครงร่างของมุมมองคอลเลกชัน ซึ่งมีหน้าที่กำหนดตำแหน่งของมุมมองเหล่านั้นด้วย

ในโพสต์นี้ เราจะมาดูวิธีการสร้าง Collection View

มาเริ่มกันเลย

ขั้นตอนที่ 1 − เปิด Xcode และสร้างแอปพลิเคชันมุมมองเดียวและตั้งชื่อเป็น SampleCollectionView

ขั้นตอนที่ 2 - ในหลัก กระดานเรื่องราวเพิ่ม UICollectionView ดังที่แสดงด้านล่าง

วิธีสร้าง CollectionView Layout ในแอพ iOS

ขั้นตอนที่ 3 − เลือกเซลล์มุมมองคอลเลกชันและตั้งชื่อตัวระบุการใช้ซ้ำเป็น “เซลล์” ดังที่แสดงด้านล่าง

วิธีสร้าง CollectionView Layout ในแอพ iOS

ขั้นตอนที่ 4 − สร้างชื่อไฟล์สัมผัส Cocoa ใหม่เป็น CollectionViewCell ประเภท UICollectionViewCell และเพิ่มคลาสเดียวกันกับเซลล์ดังที่แสดงด้านล่าง

วิธีสร้าง CollectionView Layout ในแอพ iOS

ขั้นตอนที่ 5 − สร้าง @IBOutlet ของมุมมองคอลเลกชันใน ViewController.swift

วิธีสร้าง CollectionView Layout ในแอพ iOS

ขั้นตอนที่ 6 − ตอนนี้เพิ่มผู้รับมอบสิทธิ์และแหล่งข้อมูลไปยังมุมมองการรวบรวม

วิธีสร้าง CollectionView Layout ในแอพ iOS

ขั้นตอนที่ 7 − เปิด ViewController.swift และยืนยันไปยัง UICollectionViewDelegate และ UICollectionViewDataSource

คลาส ViewController:UIViewController, UICollectionViewDelegate, UICollectionViewDataSource

ขั้นตอนที่ 8 − ใช้วิธีการมอบหมายที่ได้รับมอบอำนาจตามที่แสดงด้านล่าง

func collectionView (_ collectionView:UICollectionView ส่วน numberOfItemsInSection:Int) -> Int { return 500}func collectionView (_ collectionView:UICollectionView, cellForItemAt indexPath:IndexPath) -> UICollectionViewCell { ให้เซลล์:UICollectionViewCell =collectionView.dequeueReusableCell :"cell" สำหรับ:indexPath) as! CollectionViewCell cell.backgroundColor =UIColor.gray ส่งคืนเซลล์}

ขั้นตอนที่ 9 − เรียกใช้แอปพลิเคชัน คุณสามารถเลื่อนในแนวตั้ง เพื่อให้มุมมองคอลเลกชันเลื่อนในแนวนอน

เปลี่ยนคุณสมบัติ Scroll Direction เป็นแนวนอน

วิธีสร้าง CollectionView Layout ในแอพ iOS

กรอกโค้ด

<ก่อนหน้า>นำเข้า UIKitclass ViewController:UIViewController, UICollectionViewDelegate, UICollectionViewDataSource { @IBOutlet var collectionView:UICollectionView! แทนที่ func viewDidLoad () { super.viewDidLoad () } func collectionView (_ collectionView:UICollectionView ส่วน numberOfItemsInSection:Int) -> Int { return 500 } func collectionView (_ collectionView:UICollectionView, cellForItemAt indexPath:IndexPath) -> ให้ UICollectionViewCell เซลล์:UICollectionViewCell =collectionView.dequeueReusableCell(withReuseIdentifier:"cell" สำหรับ:indexPath) เป็น! CollectionViewCell cell.backgroundColor =UIColor.gray ส่งคืนเซลล์ }}