[iOS/Swift] Grid형태 Image CollectionView만들기

📌 이번 글은

Grid 형태의 image CollectionView를 만드는 방법입니다.
첨부 이미지는 Storyboard intreface기반 Swift 프로젝트입니다.

 

 

1. Storyboard에 Collection View 추가/설정

프로젝트 생성 후 Main.storyboard > View Controller에 Collection View를 추가합니다.

 

CollectionView의 AutoLayout을 설정합니다.

 

Collection View의 delegate, dataSource를 설정합니다.

 

CollectionView의 Estimate Size를 None으로 설정합니다.

Cell 사이에 구분을 명확히 하기 위해 Collection View의 Background 색상을 변경하면 좋아요.

Collection View Cell > Content View에 Image View를 추가하고, AutoLayout을 설정합니다.

 

2. UICollectionViewCell 클래스 생성

 

New File -> iOS > Cocoa Touch Class를 클릭합니다.

 

Subclass of > UICollectionViewCell로 설정하고, Class 명을 원하는 명으로 바꾼 뒤 Next를 클릭합니다.

 

 

3. Storyboard에서 Cell 설정

Storyboard > Collection View Cell > Custom Class > Class에 Cell의 클래스명을 입력합니다.

 

Collection Reusable View > Identifier에 Cell의 클래스명을 입력합니다.

 

4. GridCollectionViewCell.swift

(Cell클래스명). swift에 ImageView를 추가합니다.

 

 

5. ViewController.swift

@IBOutlet weak var collectionView: UICollectionView!

var arrImageName: [String] = ["image1","image2","image3","image4","image5","image6","image7","image8","image9","image10","image11","image12","image13","image14","image15","image16","image17","image18","image19","image20"]

ViewController.swift > collectionView와 이미지 이름 배열을 선언합니다.

extension ViewController: UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

}

ViewController 클래스 밖에 extension을 생성해 위와 같은 delegate, datasource를 선언합니다.

extension ViewController: UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
    
    // CollectionView item 개수
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return arrImageName.count
    }
    
    // CollectionView Cell의 Object
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "GridCollectionViewCell", for: indexPath) as! GridCollectionViewCell
        
        cell.image.image = UIImage(named: arrImageName[indexPath.row]) ?? UIImage()
        
        return cell
    }
    
    // CollectionView Cell의 Size
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        
        let width: CGFloat = collectionView.frame.width / 3 - 1.0
        
        return CGSize(width: width, height: width)
    }
    
    // CollectionView Cell의 위아래 간격
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 1.0
    }
    
    // CollectionView Cell의 옆 간격
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 1.0
    }
}

extension 안에 위와 같이 작성합니다.

 

 

이제 빌드하면 Gird CollectionView 완성입니다. ✧*.◟(ˊᗨˋ)◞.*✧