[Swift] CollectionView

1. 정의: 정렬된 데이터 항목들을 관리하고 사용자 지정 가능한 레이아웃을 사용하여 표시하는 개체

 

2. TableView와 다른점

- 1개의 행(Row)에 여러 데이터를 담을 수 있다

- 셀 이외에도 사용자 지정할 수 있다(Ex. 섹션 배경)

 

3. 코드

- Import 해야 하는 Class & Protocol들

//Class
UIViewController

//Protocol
UICollectionViewDataSource
UICollectionViewDelegate
UICollectionViewDelegateFlowLayout

 

- 구현해야 하는 함수

class BountyViewController: UIViewController
,UICollectionViewDataSource,UICollectionViewDelegate, UICollectionViewDelegateFlowLayout{

	// UICollectionViewDataSource
	// 몇개를 보여줄것인가?
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return viewModel.numOfBountyInfoList
    }

	// 셀은 어떻게 표현할것인가?
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "GridCell", for: indexPath) as? GridCell else {
            return UICollectionViewCell()
        }
        
        let info = viewModel.bountyInfo(at: indexPath.item)
        cell.update(info: info)
        return cell
    }
    
    // UICollectionViewDelegate
    // 셀이 클릭되었을때 어떻게 할것인가?
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        performSegue(withIdentifier: "showDetail", sender: indexPath.item)
    }
    
    //UICollectionViewDelegateFlowLayout
    //cell size를 계산(목표: 다양한 디바이스에서 일관적인 디자인을 보여주기 위해)
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let itemSpacing: CGFloat = 10
        let textAreaHeight: CGFloat = 65
        
        let width: CGFloat = (collectionView.bounds.width - itemSpacing)/2
        let height: CGFloat = width * 10/7 + textAreaHeight
        return CGSize(width: width, height: height)
    }
}


//GridCell Class
class GridCell: UICollectionViewCell {
    @IBOutlet weak var imgView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var bountyLabel: UILabel!
    
    func update(info: BountyInfo) {
        imgView.image = info.image            //이미지 설정
        nameLabel.text = info.name      //텍스트 설정
        bountyLabel.text = "\(info.bounty)"
    }
}