UICollectionView를 활용한 데이터 표현과 레이아웃 구성

UICollectionView 활용하기 

 

❗️UITableView

• 여러 데이터를 싱글 컬럼으로 나열해서 표현해주는 뷰

❗️UICollectionView

• 여러 데이터를 여러 컬럼 또는 레이아웃 커스터마이징해서 표현해주는 뷰 (예: 그리드뷰)

🤔 UITableview vs. UICollectionView

• UICollectionView 가 자유도가 높고, UITableView 로 표현할수 있는 것도 커버가 가능함
• 구현 난이도가 두개의 차이가 많이 있지 않음
• 따라서, 하나만 배워 놓으면 다른 하나 배우는 것은 쉬움

💡 UICollectionView 개념

UICollectionView를 이용해서 리스트 및 그리드를 개발할때는 3가지만 고민하면 됩니다.

Data / Presentation / Layout

Data - Snapshot

• 어플리케이션에서 사용되는 정보나 데이터를 관리한다.
• 데이터의 저장, 검색, 수정, 삭제를 담당한다.
• 주로 데이터베이스, 서버와의 통신, 파일 입출력 등과 관련된 작업을 처리한다.

var snapshot = NSDiffableDataSourceSnapshot<Section, Item>()

snapshot.appendSections([.main])
snapshot.appendItems(list, toSection: .main)

dataSource.apply(snapshot)

NSDiffableDataSourceSnapshot을 사용하여 데이터 소스의 스냅샷을 만들고 초기화하는 예시

NSDiffableDataSourceSnapshot은 UICollectionViewDiffableDataSource의 스냅샷을 나타내는 클래스로, 데이터 소스의 현재 상태를 저장하고 관리하는 데 사용된다. 스냅샷을 통해 section과 item의 구성을 정의하고, 이를 데이터 소스에 적용하여 UI에 반영한다.

1. snapshot 변수를 NSDiffableDataSourceSnapshot<Section, Item>()으로 초기화

Section은 열거형 타입으로, 섹션의 식별을 위해 사용
2. .main 섹션을 추가한 후, appendItems(_:toSection:) 메서드를 사용하여 list 라는 아이템들을 .main 섹션에 추가

이렇게 스냅샷을 구성하면, 이후에 데이터 소스에 스냅샷을 적용하여 콜렉션 뷰에 변경된 데이터를 반영할 수 있다. 

Presentation - diffable datasource

• 셀을 어떻게 표현할꺼야?
  • UI를 구성하는 부분으로, 화면에 표시되는 내용과 사용자의 상호작용을 관리
  • UI 컴포넌트, 이벤츠 처리, 화면 전환 등을 담당한다.
  • 사용자에게 보여지는 부분을 담당한다.

UICollectionViewDiffableDataSource<SectionIdentifierType, ItemIdentifierType>

• SectionIdentifierType: 섹션을 식별하는 유형. 일반적으로 Int, String, Enum 등을 사용.
• ItemIdentifierType: 아이템을 식별하는 유형 일반적으로 Int, String, Enum 등을 사용

dataSource = UICollectionViewDiffableDataSource<Section,Item>(collectionView: collectionView, cellProvider: { collectionView, indexPath, item in

guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "FrameworkCell", for: indexPath) as? FrameworkCell else {
       return nil
  }
    cell.configure(item)
     return cell
})

1. collectionView.dequeueReusableCell(withReuseIdentifier: "FrameworkCell", for: indexPath)를 사용하여 재사용 가능한 셀을 가져오고, 해당 셀을 FrameworkCell 클래스로 다운캐스팅하고, 다운캐스팅( 상위 객체를 하위 타입으로 변환하는 과정 animal ⇒ cat ) 에 실패한 경우 nil을 반환한다. (
2. 다운캐스팅에 성공한 경우 cell.configure(item)을 사용하여 셀을 item에 맞게 구성한다. cell.configure(_:) 메서드에서는 셀을 받아서 적절히 설정하는 로직을 구현해야 한다.
3. 구성된 셀을 반환.
4. 이렇게 코드를 작성하면 UICollectionViewDiffableDataSource는 각 셀을 구성하고 반환하여 데이터 소스에 표시할 셀을 제공한다. FrameworkCell 클래스의 configure(_:) 메서드를 통해 셀의 내용을 채우고, 이를 화면에 표시할 수 있다.

Layout - compositional layout

• 셀들 레이아웃을 어떻게 할꺼야?
  • UI 요소들의 위치, 크기, 배치등을 정의한다.
  • 화면의 구성을 담당하며 , UI 요소들의 시각적인 표현을 결정한다.
  • 주로 UI 컴포넌트의 위치와 크기를 조정하고, 그리드 시스템, 레이아웃 제약 조건 등을 활용하여 UI 구성

private func layout() -> UICollectionViewCompositionalLayout{ 

let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.33), heightDimension: .fractionalWidth(1)) 
let item = NSCollectionLayoutItem(layoutSize: itemSize) 

let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalWidth(0.33)) 
let group = NSCollectionLayoutGroup.horizontal(layoutSize : groupSize, subitem : item, count : 3) 

let section = NSCollectionLayoutSection(group: group) 

let layout = UICollectionViewCompositionalLayout(section: section) return layout }

전체 코드는 06-01 AppleFramework 에서 확인할 수 있다. 

https://github.com/gadisom/MyFirstiOS