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é:

Thêm ảnh vào thư mục Assets.xcassets
Thêm ảnh vào thư mục Assets.xcasset

 

 

 

 

 

 

 

 

 

 

 

Thêm  UIImageView 

 

 

 

 

 

 

 

 

 

 

 

 

Thêm Visual Effect View

 

Thêm UICollection View với Scroll Direction : Horizontal và Background: Clear Color

 

 

 

 

 

 

 

 

 

 

 

 

Kéo UIImageView vào CollectionViewCell của CollectionView

 

 

 

 

 

 

 

 

 

 

 

 

Thêm một Visual Effect View với Blur Style: Extra Light nữa làm background cho label sẽ thêm kế tiếp

 

 

 

 

 

 

 

 

 

 

 

 

 

Cuối cùng là UILabel hiển thị title

 

 

 

 

 

 

 

 

 

 

 

 

  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:

 

 

Ánh xạ các đối tượng trong UICollectionViewCell và custom Cell

 

 

 

 

 

 

 

 

 

 

 

 

          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 đó.