CompositionalLayout에서 CustomCollectionViewCell 사용시 레이아웃 이슈

[yeahg-dev]

문제 상황

• customCollectionViewCell을 만들 때, UIImageView의 사이즈를 상수로 설정했다.

  final class ScreenShotCollectionViewCell: UICollectionViewCell {
  
  private let screenShotView = UIImageView(
      frame: CGRect(x: 0, y: 0, width: 280, height: 500))
  ...
  }

• Cell사이즈를 기반으로 CompositionalLayout의 item과 group사이즈를 계산하기 위해 .estimated()프로퍼티로 dimension을 설정했다.

  
  private func createLayout() -> UICollectionViewLayout {
      let sectionProvider = { [weak self] (sectionIndex: Int, layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in
  
          guard let sectionKind = AppDetailViewModel.Section(rawValue: sectionIndex) else { return nil }
  
          let section: NSCollectionLayoutSection
  
          if sectionKind == .summary {
          ...
          } else if sectionKind == .screenshot {
  
              let itemSize = NSCollectionLayoutSize(
                  widthDimension: .estimated(280),
                  heightDimension: .fractionalHeight(1.0))
              let item = NSCollectionLayoutItem(layoutSize: itemSize)
              let groupSize = NSCollectionLayoutSize(
                  widthDimension: .fractionalWidth(1.0),
                  heightDimension: .estimated(500))
              let group = NSCollectionLayoutGroup.horizontal(
                  layoutSize: groupSize,
                  subitems: [item])
              section = NSCollectionLayoutSection(group: group)
              section.orthogonalScrollingBehavior = .groupPaging
  
          } else if sectionKind == .descritption {
           ....
          } else {
              fatalError("Unknown section!")
          }
  
          return section
      }
      return UICollectionViewCompositionalLayout(sectionProvider: sectionProvider)

• 스크롤하니 section이 사라지는 현상이 발생했다.

[yeahg-dev]

해결 시도 1️⃣

• Cell의 UIImageView의 frame으로 크기를 정해주는 대신 제약으로 넗이와 높이를 설정
• UIImageView는 frame으로 설정했기 때문에 슈퍼뷰인 셀의 사이즈에 영향을 받음. 따라서 셀이 디큐되어 화면에 보여지기 전까지는 UIImageView의 사이즈는 설정될 수 없음.
• estimated는 셀의 실제 사이즈를 기반으로 Group과 item의 사이즈를 계산하는데, 셀의 사이즈는 디큐되어 보여지기전까지는 결정될 수 없으므로 item과 group의 사이즈도 0으로 결정되어 위와 같이 없어지는 것이라고 분석.

• 따라서 제약으로 사이즈를 결정하도록함

  // ScreenShotCollectionViewCell
  private let screenShotView = UIImageView()
  
  private func setConstraintOfScreenShotView() {
      invalidateTranslateAutoResizingMasks(
          of: [screenShotView])
      NSLayoutConstraint.activate([
          screenShotView.leadingAnchor.constraint(
              equalTo: self.contentView.leadingAnchor),
          screenShotView.topAnchor.constraint(
              equalTo: self.contentView.topAnchor),
          screenShotView.trailingAnchor.constraint(
              equalTo: self.contentView.trailingAnchor),
          screenShotView.bottomAnchor.constraint(
              equalTo: self.contentView.bottomAnchor),
          screenShotView.widthAnchor.constraint(equalToConstant: CGFloat(280)),
          screenShotView.heightAnchor.constraint(equalToConstant: CGFloat(500))
      ])
  }

결과

• 스크롤을 해도 컬렉션뷰가 사라지지 않음.
• 정해준 사이즈대로 정상적으로 셀을 디큐함

새로운 문제

• 셀의 스페이싱이 정상적으로 적용이 안됨
• 셀 옆에 여러개의 셀의 잔상이 발생

  group.interItemSpacing = .fixed(15)

  

[yeahg-dev]

해결 방법 ✅

• 하나의 Cell을 하나의 group에 배치하도록 group의 size 변경

• section.interGroupSpacing으로 spacing 구현

  private func createLayout() -> UICollectionViewLayout {
      let sectionProvider = { [weak self] (sectionIndex: Int, layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in
  
          guard let sectionKind = AppDetailViewModel.Section(rawValue: sectionIndex) else { return nil }
  
          let section: NSCollectionLayoutSection
  
          if sectionKind == .summary {
            ...
  
          } else if sectionKind == .screenshot {
  
              let itemSize = NSCollectionLayoutSize(
                  widthDimension: .estimated(280),
                  heightDimension: .fractionalHeight(1.0))
              let item = NSCollectionLayoutItem(layoutSize: itemSize)
              let groupSize = NSCollectionLayoutSize(
                  widthDimension: .estimated(280),
                  heightDimension: .estimated(500))
              let group = NSCollectionLayoutGroup.horizontal(
                  layoutSize: groupSize,
                  subitems: [item])
              section = NSCollectionLayoutSection(group: group)
              section.interGroupSpacing = 10
              section.orthogonalScrollingBehavior = .groupPaging
  
          } else if sectionKind == .descritption {
             ... 
  
          } else {
              fatalError("Unknown section!")
          }
  
          return section
      }
      return UICollectionViewCompositionalLayout(sectionProvider: sectionProvider)
  }