iOS) CollectionView - FlowLayout

CollectionView란

iOS 프로그래밍에서 가장 핵심적인 UI 구성 방법이다.

기본적으로 UIScrollView를 상속하여 스크롤 기능이 내장되어 있으며, 여러 데이터를 보여주기 효과적이다.

 

 

CollectionView가 데이터를 표현하는 방식

Width의 값이 디바이스의 너비로 고정되는 TableView와 다르게, CollectionView는 Layout을 잡기 위해 각 아이템의 width, height 정보가 모두 필요하다.

 

CollectionView에는 정확한 Layout을 설정하기 위해 Layout을 전문적으로 설정하는 객체가 있다.

둘 다 UICollectionViewLayout을 상속받은 클래스이다.

1. FlowLayout : 전통적으로 사용하던 방식
2. CompositionalLayout : 최근에 생긴 방식 (더욱 복잡한 형태의 Layout을 구현할 수 있다.)

 

 

스크롤 가능 방향에 따라 아이템이 화면이 쌓이는 순서가 다르다. (수직 / 수평 스크롤)

수직 스크롤의 경우, 0,0 좌료 기준으로 아이템을 오른쪽으로 순서대로 그린 후, 자리가 부족하면 다음 라인으로 넘어가서 그린다.

수평 스크롤은 0,0 좌표 기준으로 아래쪽으로 아이템을 쌓다가, 자리가 부족하면 다음 라인(오른쪽)으로 넘어가서 아이템을 그린다.

수직 스크롤을 사용하는 경우

 

 

 

---

 

 

CollectionView 사용하기

(Delegate, Datasource 메서드)

 

 

사용할 섹션의 개수 반환 (선택)

override func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 3
}

 

 

 

섹션별로 사용할 item의 개수 반환 (필수)

override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 15
}

 

 

 

각 indexPath에 사용할 Cell 반환 (필수)

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as? CollectionViewCell else {
        return UICollectionViewCell()
    }
        
    return cell
}

 

 

 

 

Cell을 선택(Tapped)했을 때, 호출 (선택)

override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    print("\(indexPath.section), \(indexPath.row)")
}

 

 

 

 

---

 

 

 

 

CollectionView FlowLayout을 사용하여 Layout 잡기

 

1. UICollectionViewFlowLayout의 인스턴스를 생성한다.

let layout = UICollectionViewFlowLayout()

 

 

2. section별, item별로 부여할 여백을 상수로 저장하면 좋다.

let sectionSpacing: CGFloat = 20
let itemSpacing: CGFloat = 8

 

 

3. item 사이즈를 디바이스 크기 비율로 잡는다.

디바이스 가로 크기에서 다음의 두 여백값을 제외하면 item이 차지(?)하는 사이즈가 나온다.

• Section 간격 * 2 (왼쪽, 오른쪽 여백)
• item간 간격 (행별 아이템 개수 -1)

// 수직 스크롤이라는 가정 하에, rowCount는 몇개의 행을 사용할지를 저장한 변수
let width: CGFloat = UIScreen.main.bounds.width - (itemSpacing * (rowCount-1)) - (sectionSpacing * 2)
let itemWidth: CGFloat = width / rowCount

 

 

4. UICollectionViewFlowLayout 인스턴스에 값을 설정한다.

// 각 item의 크기 설정 (아래 코드는 정사각형을 그린다는 가정)
layout.itemSize = CGSize(width: itemWidth, height: itemWidth)

// 스크롤 방향 설정
layout.scrollDirection = .vertical

// Section간 간격 설정
layout.sectionInset = UIEdgeInsets(top: sectionSpacing, left: sectionSpacing, bottom: sectionSpacing, right: sectionSpacing)

// item간 간격 설정
layout.minimumLineSpacing = itemSpacing        // 최소 줄간 간격 (수직 간격)
layout.minimumInteritemSpacing = itemSpacing   // 최소 행간 간격 (수평 간격)

 

 

5. collectionView에 설정한 Layout 인스턴스를 할당

collectionView.collectionViewLayout = layout