//
//  ViewController.swift
//  UIKitTest
//
//  Created by travey on 2018/11/9.
//  Copyright © 2018 ZhouShijie. All rights reserved.
//

import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        // 首先方塊的佈局，注意這裡是方塊之間的，而不是方塊內部的，這個layout是Table沒有的哦
        // 我們採用流式佈局UICollectionViewFlowLayout，它繼承UICollectionViewLayout
        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: 150, height: 150) // 設定方塊長寬
        layout.scrollDirection = UICollectionView.ScrollDirection.horizontal // 設定滑動的方向是水平還是豎直，這裡選擇的是水平
        // Ps. 下面的間距是針對滑動方向而言的，是相對的而不是絕對的
        layout.minimumLineSpacing = 30 // 行最小間距
        layout.minimumInteritemSpacing = 10 // 列最小間距
        
        // 建立一個網格
        let collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout) // 傳入的第二個引數要選擇佈局，我們用上面設定好的佈局就可以了
        collectionView.register(NSClassFromString("UICollectionViewCell"), forCellWithReuseIdentifier: "cell") // 不同於TableView，網格的cell必須要註冊
        // 實現代理
        collectionView.delegate = self
        collectionView.dataSource = self
        self.view.addSubview(collectionView)
    }
    
    // 返回section數
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    
    // 返回對應section的方塊數
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }
    
    // 返回對應的cell
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) // 取一個
        if indexPath.row == 5 {
            cell.backgroundColor = UIColor.red
        } else {
            cell.backgroundColor = UIColor.green
        }
        return cell
    }

}

 

我們還可以對每個cell進行大小的設定

//
//  ViewController.swift
//  UIKitTest
//
//  Created by travey on 2018/11/9.
//  Copyright © 2018 ZhouShijie. All rights reserved.
//

import UIKit

// 這裡繼承了UICollectionViewDelegateFlowLayout，這個類是UICollectionViewDelegate的子類，因此無需再次繼承UICollectionViewDelegate
class ViewController: UIViewController, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        // 首先方塊的佈局，注意這裡是方塊之間的，而不是方塊內部的，這個layout是Table沒有的哦
        // 我們採用流式佈局UICollectionViewFlowLayout，它繼承UICollectionViewLayout
        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: 150, height: 150) // 設定方塊長寬
        layout.scrollDirection = UICollectionView.ScrollDirection.vertical // 設定滑動的方向是水平還是豎直，這裡選擇的是水平
        // Ps. 下面的間距是針對滑動方向而言的，是相對的而不是絕對的
        layout.minimumLineSpacing = 10 // 行最小間距
        layout.minimumInteritemSpacing = 30 // 列最小間距
        
        // 建立一個網格
        let collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout) // 傳入的第二個引數要選擇佈局，我們用上面設定好的佈局就可以了
        collectionView.register(NSClassFromString("UICollectionViewCell"), forCellWithReuseIdentifier: "cell") // 不同於TableView，網格的cell必須要註冊
        // 實現代理
        collectionView.delegate = self
        collectionView.dataSource = self
        self.view.addSubview(collectionView)
    }
    
    // 返回section數
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    
    // 返回對應section的方塊數
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 9
    }
    
    // 返回對應的cell
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) // 取一個
        if indexPath.row == 5 {
            cell.backgroundColor = UIColor.red
        } else {
            cell.backgroundColor = UIColor.green
        }
        return cell
    }
    
    
    // 在這裡可以設定每個方塊的大小
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let temp = indexPath.row % 3
        // 0表示第一列，1是第二列，2是第三列
        switch temp {
        case 0:
            return CGSize(width: 80, height: 80)
        case 1:
            return CGSize(width: 140, height: 140)
        case 2:
            return CGSize(width: 40, height: 40)
        default:
            return CGSize(width: 0, height: 0)
        }
    }

}