[ Swift ] UICollectionView 셀이 양옆에 붙지 않았던 이유

목표했던 화면

• UICollectionView는 Safe Area 기준으로 화면에 꽉 차게

• 셀은 컬렉션뷰 너비와 동일

• 이미지가 양옆 여백 없이 딱 붙는 피드 형태

📸 문제 발생 화면

• 셀 사이즈 계산은 맞아 보이는데

• 실제 화면에서는 양옆에 미묘한 여백이 존재

설정 값

1️⃣ 컬렉션뷰 제약

스토리보드에서 UICollectionView를 다음과 같이 설정했다.

• Leading / Trailing / Top / Bottom

• 모두 Safe Area 기준

2️⃣ 셀 사이즈 계산 코드

func collectionView(
    _ collectionView: UICollectionView,
    layout collectionViewLayout: UICollectionViewLayout,
    sizeForItemAt indexPath: IndexPath
) -> CGSize {

    let width = collectionView.bounds.width
    let height = width * 3 / 4

    return CGSize(width: width, height: height)
}

• 컬렉션뷰는 Safe Area에 맞게 잡혀 있고

• 셀 width는 컬렉션뷰 width와 동일하게 계산

이렇게 계산했는데 첫 문제 발생 화면 이미지처럼 양옆에 여백이 생겼다.

원인

처음엔 Safe Area 여백 또는 AutoLayout의 제약설정이 잘 못 된건가 라고 생각했지만 뭘 어떻게해도 동일한 결과가 나왔고 서치한 결과 FlowLayout은 너비값을 추정해서 반영한 것이 었다 즉.

문제의 핵심은 UICollectionViewFlowLayout의 자동 셀 사이즈 추정 로직으로
UICollectionViewFlowLayout은 두 가지 방식으로 아래와 같이 지원된다.

• 정적 셀 사이즈

  • sizeForItemAt으로 명확하게 계산

• Self-Sizing Cell

  • AutoLayout 기반

  • estimatedItemSize를 기준으로 셀 크기를 추정 후 재계산

내 경우에는 이미 셀 사이즈를 코드로 계산하고 있었지만, 셀이 AutoLayout으로 구성되어 크기가 변할 수 있겠다고 추정된 것.

해결

viewDidLoad내에 아래 로직을 추가해서 추정을 비활성화 했고

if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
        flowLayout.estimatedItemSize = .zero
    }

결과는 셀이 collectionView 너비를 그대로 사용할 수 있게 되었다.

estimatedItemSize = .zero 이 한줄은 셀 사이즈를 자동으로 추정하지 않겠다 라고 명시한것이다.