UICollectionView 레이아웃 & UI 세팅 정리

• 팀 소개 앱을 개발하면서 처음 UICollectionView를 써봤는데, 써보면서 잘 되지 않았던 레이아웃 셋팅 관련 내용를 정리합니다.

1️⃣ UICollectionView 셀 크기 자동 조정 방지

estimatedItemSize = .zero

if let flowlayout = resultCollectionView.collectionViewLayout as? UICollectionViewFlowLayout {
    flowlayout.estimatedItemSize = .zero
}

📌 설명

• estimatedItemSize는 셀 크기를 자동으로 조정할지 여부를 결정하는 속성입니다.
• 기본값은 .automatic으로 설정되어 있어, 셀 크기를 내용에 따라 동적으로 조정합니다.
• 하지만 우리는 고정된 크기의 셀을 사용할 것이므로, 자동 크기 조정을 비활성화(.zero) 합니다.

💡 왜 필요한가?

• UICollectionViewDelegateFlowLayout을 이용해서 직접 셀 크기를 설정할 것이기 때문
• 자동 크기 조정이 켜져 있으면, 셀 크기가 예측 불가능하게 변할 수도 있음

2️⃣ UICollectionView 내부 여백 조정

contentInset

resultCollectionView.contentInset = UIEdgeInsets(top: 10, left: 15, bottom: 0, right: 15)

📌 설명

• contentInset은 UICollectionView 또는 UIScrollView에서 내용과 바깥쪽 View 사이의 여백을 설정하는 속성입니다.
• (top: 10, left: 15, bottom: 0, right: 15)를 적용하면:
  • 위쪽 여백: 10
  • 왼쪽 여백: 15
  • 오른쪽 여백: 15
  • 아래쪽 여백: 0

💡 왜 필요한가?

• 오토레이아웃으로 셀 내부 UIImageView를 중앙 정렬했지만, 제대로 정렬되지 않아 강제로 여백을 추가
  컬렉션 뷰의 좌우 여백을 조정하여 셀을 중앙에 배치하는 효과를 줌

3️⃣ View 둥글게 만들기

cornerRadius

resultTeamGoalView.layer.cornerRadius = 15

📌 설명

• layer.cornerRadius를 사용하면 UIView의 모서리를 둥글게 만들 수 있음
  값이 15이므로, 모서리가 부드럽게 둥글어짐

💡 왜 필요한가?

• 뷰가 직사각형이지만, 디자인적으로 부드러운 느낌을 주기 위해 적용
• 뷰 크기의 절반으로 설정하면 완전히 원형이 됨 (예: view.frame.width / 2)

4️⃣ UICollectionView의 셀 크기 및 간격 조정

UICollectionViewDelegateFlowLayout

extension ResultViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        
        let interItemSpacing: CGFloat = 10
        let padding: CGFloat = 10

        let width = (collectionView.bounds.width - interItemSpacing * 2 - padding * 2) / 3
        let height = width
        
        return CGSize(width: width, height: height)
    }
}

📌 설명

• sizeForItemAt는 각 셀의 크기를 설정하는 함수
• 컬렉션 뷰의 전체 너비에서 간격(interItemSpacing)과 여백(padding)을 제외한 후, 3등분하여 크기 계산
• height = width로 설정하여 정사각형 셀을 만듦

💡 왜 필요한가?

• 모든 셀의 크기를 일정하게 유지하기 위해 직접 계산하여 적용
• 화면 크기에 따라 셀 크기를 동적으로 조정

5️⃣ 같은 행의 셀 간 간격 조정

minimumInteritemSpacingForSectionAt

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 0
}

📌 설명

• 같은 행(가로 방향)에서 셀과 셀 사이의 최소 간격을 설정
• 0으로 설정하면 셀 간 여백 없이 배치됨

💡 왜 필요한가?

• sizeForItemAt에서 간격을 직접 설정했으므로, 불필요한 간격을 제거하기 위해 0으로 설정

6️⃣ 행(줄) 사이의 간격 조정

minimumLineSpacingForSectionAt

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 0
}

📌 설명

• 세로 방향(행) 간의 최소 간격을 설정
• 0으로 설정하면 행 간 간격 없이 배치됨

####💡 왜 필요한가?

• 셀을 정사각형으로 맞추었기 때문에 줄 간격을 최소화하여 균일한 배치 유지

📌 정리: UICollectionView 레이아웃 속성

코드	역할
flowlayout.estimatedItemSize = .zero	셀 크기 자동 조정 기능을 비활성화하고, 고정된 크기 적용
contentInset = UIEdgeInsets(top:10, left: 15, bottom: 0, right: 15)	컬렉션 뷰 내부 여백 조정
layer.cornerRadius = 15	특정 View의 모서리를 둥글게 만듦
sizeForItemAt	각 셀의 크기를 계산하여 설정
minimumInteritemSpacingForSectionAt	같은 행의 셀 간 최소 간격 설정
minimumLineSpacingForSectionAt	행(줄) 사이의 최소 간격 설정

• UICollectionView에서 셀 크기와 간격을 직접 조정하려면 UICollectionViewDelegateFlowLayout을 사용해야 함
• 셀 크기를 고정하려면 estimatedItemSize = .zero로 설정
• View를 둥글게 만들고 싶다면 cornerRadius를 활용
• 컬렉션 뷰의 내부 여백은 contentInset을 사용하여 조정 가능
• 셀 간 간격을 제거하려면 minimumInteritemSpacingForSectionAt과 minimumLineSpacingForSectionAt을 0으로 설정