[iOS] Storyboard로 커스텀 Cell을 가진 CollectionView 만들기

구현 결과

 

구현 코드

https://github.com/ryr0121/UIKitPractice/tree/main/CustomCollectionViewPractice

 

구현 과정

1. Storyboard에 CollectionView 추가

컴포넌트 추가 단축키 - cmd + shift + L

 

2. 추가한 CollectionView를 @IBOutlet으로 연결

 

3. CollectionView에 사용할 커스텀 Cell을 Xib으로 생성 및 정의

  3-(1) CollectionViewCell을 xib으로 생성

파일 추가 단축키 - cmd + N

"Also create XIB file"을 반드시 체크해주어야 .xib 생성됨

생성 완

  3-(2) Cell 내부 정의

우측에 있는 width / height로 셀의 크기를 조정하여 스토리보드 사용 가능

파일을 듀얼로 띄우기 - option을 누른 채로 왼쪽 파일 탭에서 띄울 파일을 클릭

 

4. CollectionView를 사용하기 위한 코드 추가 (프로토콜 채택, 커스텀 셀 등록 등)

class ViewController: UIViewController {

    @IBOutlet weak var collectionView: UICollectionView!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupCollectionView()
    }

    func setupCollectionView() {
        // CollectionView를 사용하기 위한 필수 프로토콜 채택
        collectionView.dataSource = self
        collectionView.delegate = self
        // CollectionView에 사용할 커스텀 셀 등록
        collectionView.register(UINib(nibName: "MainCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "MainCollectionViewCell")
    }
}

extension ViewController: UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // CollectionView에 보여질 셀의 개수 반환
        return 10
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        // CollectionView에 보여질 셀 반환
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MainCollectionViewCell", for: indexPath) as? MainCollectionViewCell else { return UICollectionViewCell() }
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        // 셀의 크기 반환
        return CGSize(width: 100, height: 100)
    }
}

 

 

추가

Storyboard에서 CollectionView의 스크롤 방향 조정하기

Vertical	수직 스크롤 (기본값)
Horizontal	수평 스크롤

 

* 한 줄짜리 수평 스크롤이 가능한 CollectionView를 만들기 위해서는, CollectionView의 높이가 셀의 높이의 2배보다 작아야 함

높이를 130으로 지정한 수평 스크롤이 가능한 CollectionView