Hiển thị một tập hợp các dữ liệu là một trong những task phổ biến nhất trong quá trình xây dựng một ứng dụng. Apple SDK đã cung cấp cho chúng ta 2 công cụ để làm việc này, đó là UITableView và UICollectionView.
Hôm nay, mình cùng các bạn xây dựng một app nhỏ: Interest có sử dụng UICollectionView dùng storyboard nhé.
Link Github: https://github.com/phammanhha95/Interest
Cùng xem qua app:
1. Thêm các đối tượng và layout trên mainstoryboard
Từng đối tượng mình thêm sẽ có hình ảnh, thông số layout và thuộc tính, bạn cùng thêm nhé:
2. Custom CollectionViewCell
Ánh xạ UICollectionViewCell đến ViewController và thêm 2 phương thức phải thực thi của UICollectionViewCell là UICollectionViewDataSource và UICollectionViewDelegate.
Thực thi các method bắt buộc để custom CollectionViewCell : số lượng mục trong section và phần tử thứ i trong mục có chi tiết là gì, trả về 1 collection view cell
Ở đây mình đặt tạm trả về số items là 10 , app chạy lên với 10 items giống nhau .
withReuseIdentifier: "InterestCollectionViewCell" là id của collectionview cell, nhiều collectionview cell dùng chung 1 id.
Ta vào mainstoryboard để sửa Identifier của CollectionViewCell là: "InterestCollectionViewCell"
3. Hiển thị dữ liệu trên UICollectionViewCell
Đầu tiên, ta tạo 1 class sinh ra các object chứa interest từng item:
gọi hàm khởi tạo mặc định đối tượng Interest, gán các thuộc tính vs thuộc tính đầu vào @@:
Tiếp theo, tạo một lớp InterestCollectionViewCell, kế thừa từ UICollectionViewCell để quản lý việc lấy và hiển thị dữ liệu:
Trong ViewController, khải báo một mảng chứa các đối tượng Interest
var interests = [Interest]()
override func viewDidLoad() {
createData()
super.viewDidLoad()
}
func createData() {
interests = [
Interest(imageName: "r1", titLabel: "We Love Traveling Around the World"),
Interest(imageName: "r2", titLabel: "Romance Stories"),
Interest(imageName: "r3", titLabel: "iOs Dev"),
Interest(imageName: "r4", titLabel: "Race"),
Interest(imageName: "r5", titLabel: "Personal Development"),
Interest(imageName: "r6", titLabel: "Reading News"),
]
Lúc này, số items của UICollectionView là số phần tử trong mảng:
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return interests.count
}
Phần tử thứ i trong mục có chi tiết là:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "InterestCollectionViewCell", for: indexPath) as! InterestCollectionViewCell
cell.imageInterest.image = UIImage(named: interests[indexPath.item].imageName)
cell.titleInterest.text = interests[indexPath.item].titLabel
return cell
}
@@Vậy là mình và bạn đã cloned được một app nhỏ hiện thị dữ liệu đơn giản trên UICollectionView rùi đó.
Bình luận