[ Swift ] Nike Running App 온보딩을 따라 만들며 UICollectionView이해하기

Nike Running App의 온보딩 화면을 iOS App으로 구현했다.

온보딩 UI에 필요한 조건

온보딩 화면은 요구사항이 명확하다.

• 좌우 스와이프 기반 화면 전환

• 한 번 스와이프 시 정확히 한 페이지 이동

• 현재 위치를 나타내는 PageControl

• 스크롤 인디케이터는 노출하지 않음

UICollectionView + Paging 구조로 모두 해결 가능

UICollectionView는 UIScrollView다

UICollectionView는 UIScrollView를 상속한다.

따라서 다음을 기본으로 제공한다.

• 스크롤

• Paging

• contentOffset

• UIScrollViewDelegate

Storyboard 설정

• Show Vertical Indicator 비활성화

• Paging Enabled 활성화

• 기본 디자인 레이아웃

UI 동작의 기본은 Storyboard에서 처리하고,
코드는 레이아웃과 상태 제어에만 사용했다.

FlowLayout 자동 사이즈 비활성화

layout.estimatedItemSize = .zero

• Self-sizing cell 비활성화

• 셀 크기를 delegate에서 명확히 제어

• 페이징 UI에서는 필수 설정

한 셀 = 한 화면

func collectionView(
    _ collectionView: UICollectionView,
    layout collectionViewLayout: UICollectionViewLayout,
    sizeForItemAt indexPath: IndexPath
) -> CGSize {
    return collectionView.bounds.size
}

• 셀 하나가 화면 전체를 차지

• Paging Enabled와 결합해 페이지 전환 완성

간격은 모두 0으로 설정해야 딱딱 붙는다.

minimumLineSpacingForSectionAt -> 0
minimumInteritemSpacingForSectionAt -> 0

한 셀 = 한 화면

func collectionView(
    _ collectionView: UICollectionView,
    layout collectionViewLayout: UICollectionViewLayout,
    sizeForItemAt indexPath: IndexPath
) -> CGSize {
    return collectionView.bounds.size
}

• 셀 하나가 화면 전체를 차지

• Paging Enabled와 결합해 페이지 전환 완성

간격은 모두 0으로 설정했다.

minimumLineSpacingForSectionAt -> 0
minimumInteritemSpacingForSectionAt -> 0

PageControl 동기화

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    pageControl.currentPage =
    Int(scrollView.contentOffset.x / collectionView.bounds.width)
}

• 스크롤이 끝난 시점만 사용

• contentOffset 기반 페이지 계산

Cell 역할 분리

func configure(_ message: OnboardingMessage) {
    thumbnailImageView.image = UIImage(named: message.imageName)
    titleLabel.text = message.title
    descriptionLabel.text = message.description
}

• Cell은 UI 렌더링만 담당

• 흐름 제어 로직 없음

프로토콜 관계 정리

• UICollectionViewDataSource
  → 무엇을 보여줄지

• UICollectionViewDelegateFlowLayout
  → 어떻게 배치할지

• UICollectionViewDelegate
  → 어떻게 동작할지

• UIScrollViewDelegate
  → 스크롤 상태를 언제 감지할지