[트러블 슈팅] UICollectionView 상단에 여백 주기

⚠️ 문제: UICollectionView 상단에 여백 미존재

Sheet VC에 UICollectionView를 배치했는데 top 여백이 없이 배치되었습니다.

 

❗️ 원인: 잘못된 여백 설정

기존에는 아래와 같이 여백을 설정하고 있었습니다.

class SheetAnimalCollectionView: UICollectionView {
	private func setAttributes() {
    	directionalLayoutMargins = NSDirectionalEdgeInsets(top: 40, leading: 20, bottom: 0, trailing: 20) // 여백 설정
	}

	// 컬렉션뷰 레이아웃 설정
	private func makeCollectionViewLayout() -> UICollectionViewLayout {
    	let configuration = UICollectionViewCompositionalLayoutConfiguration()
    	configuration.contentInsetsReference = .layoutMargins // 여백
        
    	return UICollectionViewCompositionalLayout(sectionProvider: { ... }
	}
}

 

directionalLayoutMargin에 top, leading, trailing 여백을 부여하여

CompositionalLayoutConfiguration에서 해당 여백을 사용하였습니다.

 

그러나 directionalLayoutMargins는 양옆 여백(top, leading)만 유효하고 위아래 여백은 의미가 없다고 합니다.

 

✅ 해결: contentInset을 통한 여백 설정

contentInset을 통해 위 여백을 설정해주었습니다.

class SheetAnimalCollectionView: UICollectionView {
	private func setAttributes() {
    	directionalLayoutMargins = NSDirectionalEdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20) // 양옆 여백 설정
        contentInset = .init(top: 40, left: 0, bottom: 0, right: 0) // 위 여백 설정
	}

	// 컬렉션뷰 레이아웃 설정
	private func makeCollectionViewLayout() -> UICollectionViewLayout {
    	let configuration = UICollectionViewCompositionalLayoutConfiguration()
    	configuration.contentInsetsReference = .layoutMargins // 여백
        
    	return UICollectionViewCompositionalLayout(sectionProvider: { ... }
	}
}

 

ContentInset은 컬렉션뷰 내부의 컨텐츠의 inset을 설정하는 것이므로

배치된 컬렉션뷰에서 컨텐츠가 어디에 표시될 것인지를 설정할 수 있습니다.

 

의도한대로 컬렉션뷰가 표시되는 것을 확인하였습니다.