CollectionView với TableView là hai trong số nhiều khái niệm cơ bản về phát triển iOS, mọi nhà phát triển nên nắm vững cả hai để trở thành một nhà phát triển giỏi.
Trong bài này, chúng ta sẽ tập trung chủ yếu vào CollectionView, CollectionView giống như dạng xem bảng với một số khác biệt, Chế độ xem bộ sưu tập hỗ trợ cả cuộn ngang và dọc trông giống như một lưới. CollectionView trong iOS cũng được gọi là chế độ xem lưới trong Android.
Để đọc thêm về nó, bạn có thể tham khảo https://developer.apple.com/documentation/uikit/uicollectionview
Như bạn có thể thấy Chế độ xem bộ sưu tập bao gồm Chế độ xem bổ sung và Ô, Chế độ xem bộ sưu tập hiển thị các mục trên màn hình bằng cách sử dụng một ô, là một phiên bản của lớp UICollectionViewCell mà nguồn dữ liệu của bạn định cấu hình và cung cấp.
nguồn dữ liệu của bạn định cấu hình và cung cấp.
Ngoài các ô của nó, các dạng xem bổ sung có thể là những thứ như tiêu đề phần và chân trang tách biệt với các ô riêng lẻ nhưng vẫn truyền tải một số loại thông tin. Hỗ trợ cho các chế độ xem bổ sung là tùy chọn và được xác định bởi đối tượng bố cục của chế độ xem bộ sưu tập, đối tượng này cũng chịu trách nhiệm xác định vị trí của các chế độ xem đó.
Vì vậy, trong bài đăng này, chúng ta sẽ xem cách tạo Chế độ xem Bộ sưu tập,
Vì vậy, hãy bắt đầu,
Bước 1 - Mở Xcode và tạo một ứng dụng xem duy nhất và đặt tên là SampleCollectionView.
Bước 2 - Trong Main. bảng phân cảnh thêm UICollectionView như hình dưới đây,
Bước 3 - Chọn trên ô xem bộ sưu tập và đặt tên cho số nhận dạng tái sử dụng là “ô” như hình dưới đây.
Bước 4 - Tạo một tệp cảm ứng Cocoa mới đặt tên là CollectionViewCell thuộc loại UICollectionViewCell và thêm lớp giống nhau vào ô như hình dưới đây.
Bước 5 - Tạo @IBOutlet của chế độ xem bộ sưu tập trong ViewController.swift.
Bước 6 - Bây giờ thêm đại biểu và nguồn dữ liệu vào chế độ xem bộ sưu tập
Bước 7 - Mở ViewController.swift và xác nhận với UICollectionViewDelegate và UICollectionViewDataSource
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource
Bước 8 - Thực hiện các phương pháp ủy quyền bắt buộc như hình dưới đây
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 500
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell: UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
cell.backgroundColor = UIColor.gray
return cell
} Bước 9 - Chạy ứng dụng, bạn có thể cuộn theo chiều dọc, để làm cho chế độ xem bộ sưu tập cuộn theo chiều ngang,
Thay đổi thuộc tính Hướng cuộn thành ngang.
Hoàn thành mã
import UIKit
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
@IBOutlet var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 500
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell: UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
cell.backgroundColor = UIColor.gray
return cell
}
}