[iOS - swift] AlignedCollectionViewFlowLayout 프레임워크 (CollectionView Cell 정렬)

AlignedCollectionViewFlowLayout 프레임워크

• 3개의 섹션에 각 item들이 있는 형태 예시 화면

.horizontalAlignment = .left

.horizontalAlignment = .justified

.horizontalAlignment = .right

AlignedCollectionViewFlowLayout 프레임워크

• github
• 내부적으로 UICollectionViewFlowLayout을 서브 클래싱하여 align을 쉽게 다룰 수 있도록 하는 프레임워크

UI 레이아웃 설정 편의를 위해 사용한 다른 프레임워크 참고

• Reusable
• Then
• SnapKit

AlignedCollectionViewFlowLayout 사용 방법

• cocoapods 종속성
  

  pod 'AlignedCollectionViewFlowLayout'​

• Cell 정의
  

  import UIKit
  import Reusable
  import SnapKit
  import Then
  
  final class CollectionViewCell: UICollectionViewCell, Reusable {
    // MARK: UI
    let label = UILabel().then {
      $0.font = .systemFont(ofSize: 14)
      $0.textColor = .white
      $0.backgroundColor = .systemBlue
      $0.textAlignment = .center
    }
    
    // MARK: Initializers
    override init(frame: CGRect) {
      super.init(frame: frame)
      self.contentView.backgroundColor = .systemBlue
      self.contentView.addSubview(label)
      self.label.snp.makeConstraints {
        $0.left.right.equalToSuperview().inset(10)
        $0.top.bottom.equalToSuperview().inset(20)
      }
    }
    
    @available(*, unavailable)
    required init?(coder aDecoder: NSCoder) {
      fatalError("init(coder:) has not been implemented")
    }
  }​

• CollectionView 사용 - collectionViewLayout 부분에 AlignedCollectionViewFlowLayout 인스턴스를 주입
  

  private lazy var collectionView = UICollectionView(
    frame: .zero,
    collectionViewLayout: AlignedCollectionViewFlowLayout().then { // <- 여기
      $0.scrollDirection = .vertical
      $0.minimumLineSpacing = 10
      $0.minimumInteritemSpacing = 10
      $0.sectionInset = UIEdgeInsets(top: 50, left: 20, bottom: 50, right: 20)
      $0.horizontalAlignment = .right
      $0.estimatedItemSize = .init(width: 100, height: 40) // self resizing 활성화
    }
  ).then {
    $0.register(cellType: CollectionViewCell.self)
    $0.contentInset = .zero
    $0.showsVerticalScrollIndicator = false
    $0.allowsMultipleSelection = false
    $0.allowsSelection = true
    $0.isScrollEnabled = true
    $0.bounces = true
    $0.backgroundColor = Self.Color.clear
  }​

• dataSource를 사용하여 cell에 표출
  

  // ViewController.swift
  
  // viewDidLoad()에서 호출
  private func setupDataSource() {
    self.dataSource = [self.tags1, self.tags2, self.tags3]
    self.collectionView.dataSource = self
  }
  
  // MARK: DataSource
  extension ViewController: UICollectionViewDataSource {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
      return dataSource.count
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
      return dataSource[section].count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
      let cell = collectionView.dequeueReusableCell(for: indexPath) as CollectionViewCell
      cell.label.text = dataSource[indexPath.section][indexPath.item]
      return cell
    }
  }​

* 전체 소스 코드: https://github.com/JK0369/ExAlignedCollectionViewFlowLayout

 

* 참고

- https://github.com/mischa-hildebrand/AlignedCollectionViewFlowLayout