[EasyCloset] 🎠 Compositional Layout 으로 Carousel 뷰 구현

CollectionView 가로 스크롤을 할 때 사이즈가 동적으로 움직이게 구현

배경

• 이런 형태의 Carousel View를 구현해야 했음

  

• 초기엔 컬렉션뷰의 컴포지셔널 레이아웃으로 구성하려고 시도
• orthogonal 방식으로 툭툭 다음으로 넘어가게 구현하는 것은 쉬웠지만, 사용자의 스크롤에 따라 사이즈를 자연스럽게 키우고 줄이는 형태의 구현에서 막힘.
• CompositionalLayout에서 세로 스크롤 내부에 중첩 형태로 가로 스크롤을 구현 할 경우, contentOffset 을 출력하면 x좌표의 변경은 출력되지 않았음.

  (각 섹션이 가로 스크롤을 하는 것이지, 전체 컬렉션뷰의 스크롤뷰가 가로 스크롤을 하는 것이 아니기 때문)

1차 구현 - FlowLayout 커스텀

• UPCarouselFlowLayout 라이브러리를 참고해, 뜯어보면서 필요한 부분만 뽑아서 따로 FlowLayout을 상속한 Custom Class 구현
• 각 상의/하의/…의 카테고리를 컬렉션뷰의 셀로 구성하고 해당 셀 내부에 가로로 스크롤 하는 Carousel 레이아웃의 컬렉션뷰가 들어가 있는 중첩 컬렉션뷰의 형태로 구현
  

1차 구현한 CaroselFlowLayout 코드

매우.. 복잡한 코드…

final class CarouselFlowLayout: UICollectionViewFlowLayout {

  private var sideItemScale: CGFloat = 0.6
  private var spacing: CGFloat = 40

  // collectionView의 크기
  private var size: CGSize = .zero

  // 처음 컬렉션 뷰가 나타날 때 호출되거나 레이아웃을 명시적 혹은 암묵적으로 무효화했을 때 호출
  override func prepare() {
    super.prepare()

    let currentSize = collectionView?.bounds.size ?? .zero
    if currentSize != size {
      self.setupCollectionView()
      self.updateLayout()
      self.size = currentSize
    }
  }

  private func setupCollectionView() {
    guard let collectionView = collectionView else { return }
    // 컬렉션뷰의 스크롤 감속 속도를 설정
    if collectionView.decelerationRate != .fast {
      collectionView.decelerationRate = .fast
    }
  }

  private func updateLayout() {
    guard let collectionView = collectionView else { return }

    let collectionSize = collectionView.bounds.size

    let horizontalInset = (collectionSize.width - self.itemSize.width) / 2
    self.sectionInset = UIEdgeInsets.init(top: 0, left: horizontalInset,
                                          bottom: 0, right: horizontalInset)

    let scaledItemOffset = (self.itemSize.width - self.itemSize.width * self.sideItemScale) / 2
    self.minimumLineSpacing = self.spacing - scaledItemOffset
  }

  // 매번 레이아웃을 업데이트 하도록 설정 (기본값은 false)
  override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
    return true
  }

  // 각 아이템의 레이아웃 속성
  override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    return super.layoutAttributesForElements(in: rect)?.compactMap { self.transform($0) }
  }

  // 각 아이템의 레이아웃 속성 변환
  private func transform(_ attributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
    guard let collectionView = self.collectionView else { return attributes }

    let contentOffsetX = collectionView.contentOffset.x
    let normalizedCenter = attributes.center.x - contentOffsetX

    let maxDistance = self.itemSize.width + self.minimumLineSpacing
    // 아이템의 중앙과 컬렉션 뷰의 중앙 사이의 거리를 계산
    let distance = min(abs(collectionView.center.x - normalizedCenter), maxDistance)
    let ratio = (maxDistance - distance) / maxDistance // 거리에 따른 scale 비율

    // 거리에 따라 아이템의 스케일(비율로) 계산
    let scale = ratio * (1 - self.sideItemScale) + self.sideItemScale
    attributes.alpha = 1
    // 아이템의 크기와 위치 변형
    attributes.transform3D = CATransform3DScale(CATransform3DIdentity, scale, scale, 1)
    attributes.zIndex = Int(scale * 10)

    return attributes
  }

  // 스크롤이 끝나려는 시점에 호출, 스크롤이 멈출 위치를 제어
  override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint,
                                    withScrollingVelocity velocity: CGPoint) -> CGPoint {
    guard let collectionView = collectionView,
          collectionView.isPagingEnabled == false,
          let layoutAttributes = self.layoutAttributesForElements(in: collectionView.bounds) else {
      return super.targetContentOffset(forProposedContentOffset: proposedContentOffset)
    }

    let midSide = collectionView.bounds.size.width / 2
    // 컬렉션뷰의 중앙지점에 제안된 오프셋의 중앙 지점을 더해 새로운 중앙 지점을 계산
    let proposedContentOffsetCenter = proposedContentOffset.x + midSide

    let closest = layoutAttributes.min {
      abs($0.center.x - proposedContentOffsetCenter) < abs($1.center.x - proposedContentOffsetCenter)
    } ?? UICollectionViewLayoutAttributes()

    let targetContentOffset = CGPoint(x: floor(closest.center.x - midSide), y: proposedContentOffset.y)

    return targetContentOffset
  }
}

1차 구현 방식의 문제점

• 중첩 컬렉션뷰의 특성 상 "컬렉션뷰 -> 셀 -> 컬렉션뷰 -> 셀" 의 형태였기 때문에 코드의 흐름, 데이터의 흐름이 알기 어려워지는 현사 발생
• 셀이 재사용되기 때문에 발생되는 자잘한 이슈도 겪음

최종 구현 - CompositionalLayout에 적용

• 그러던 중, Compositional Layout의 공식 문서에서 visibleItemsInvalidationHandler를 발견함.
  
• 해당 섹션의 scroll Offset를 가져올 수 있었고, 화면에 표시되고 있는 visibleItems의 정보를 가져와서 중심부로부터의 거리를 계산 해 tranform해줄 수 있었음
• 이렇게 단일 컬렉션뷰로 구성할 수 있었고 코드의 흐름과 데이터의 흐름이 훨씬 직관적이어짐
  

 /// Carousel 을 적용하기 위해 셀 아이템에 중심부 부터의 거리를 계산 해 transform 을 적용
private func setupCollectionViewCarousel(to section: NSCollectionLayoutSection) {
  section.visibleItemsInvalidationHandler = { visibleItems, offset, environment in

    // 헤더가 아닌 셀 아이템들
    let cellItems = visibleItems.filter {
      $0.representedElementKind != UICollectionView.elementKindSectionHeader
    }
    let containerWidth = environment.container.contentSize.width

    cellItems.forEach { item in
      let itemCenterRelativeToOffset = item.frame.midX - offset.x

      // 셀이 컬렉션 뷰의 중앙에서 얼마나 떨어져 있는지
      let distanceFromCenter = abs(itemCenterRelativeToOffset - containerWidth / 2.0)

      // 셀이 커지고 작아질 때의 최대 스케일, 최소 스케일
      let minScale: CGFloat = 0.7
      let maxScale: CGFloat = 1.0
      let scale = max(maxScale - (distanceFromCenter / containerWidth), minScale)

      item.transform = CGAffineTransform(scaleX: scale, y: scale)
    }
  }
}