[iOS] CollectionView Xib 파일 생성하여 Custom Cell로 구현하기

1. Collection view 생성

 

2. Custom Cell에 대한 class 생성

 

3. Xib 파일 생성

 

4. File's Owner, Custom Class 란에 방금 생성한 custom cell의 class 입력

File's Owner class 설정

Custom class 설정

5. 재사용 식별자 등록(여기선 "cell" 로 등록, 원하는 아무 문자로 설정해도 됨)

 

6. 재사용할 형태로 만들고, 추가한 요소들 IBOutlet 연결

 

7. collectionView를 사용하는 class 내부 didLoad 밑에 custom cell의 class 이름(여기선 CardCollectionViewCell), 재사용 식별자(여기선 cell) 넣어서 얻은 nib name 으로 collectionView.register 등록

override func viewDidLoad() {
        super.viewDidLoad()
        
        let nibName = UINib(nibName: "CardCollectionViewCell", bundle: nil)
        self.collectionView.register(nibName, forCellWithReuseIdentifier: "cell")
 
    }

 

 

8. xib에서 만든 custom cell을 쓸 수 있다.

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
//custom cell 가져오기 
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as? CardCollectionViewCell else {
            return UICollectionViewCell()
        }
 
//용도에 맞게 사용 
        if indexPath.section == 0 {
            cell.number.text = game.players[indexPath.row].name
        }
        else if let card = game.getPlayerCard(playerIndex: indexPath.row, cardIndex: indexPath.section - 1) {
            cell.fruitImage.image = UIImage(named: card.fruit.rawValue)
            cell.number.text = card.number.getNumberString() + "(\(String(indexPath.row)),\(String(indexPath.section)))"
        } else {
            cell.number.text = "(\(String(indexPath.row)),\(String(indexPath.section)))"
            cell.fruitImage.image = nil
        }
        return cell
    }