본문 바로가기

TIL

UICollectionView

UICollectionView

  • 구성 및 커스텀이 가능한 레이아웃의 집합된 뷰들을 보여줌
    • Cell : 각 컨텐츠의 각 부분에 대한 시각적 요소(item)
    • Layout : 컨텐츠의 시각적 배열을 정의
    • Data Source 객체 : 데이터를 제공
    • Delegate 객체 : 컨텐츠와 사용자 간의 선택, 강조 표시와 같은 상호 작용을 관리
    • CollectionViewController
  • 정렬된 데이터 아이템들을 관리하고, Custom 가능한 레이아웃 사용하여 표시하는 객체
  • CollectionView는 추가하면 앱의 주요 작업은 CollectionView와 관련 데이터를 관리하는 것
  • DataSource에서 객체 데이터를 가져온다
    • UICollectionViewDiffableDataSource를 사용가능하게 됨
    • UICollectionViewDataSourc를 채택하여 custom DataSource 객체를 생성
  • CollectionView의 데이터는 개별 item으로 구성되고, section으로 그룹화할 수 있음
  • Supplementary View : 다른 타입 뷰를 사용하여 데이터를 표시할 수 있음→ 이는 선택 사항이며, CollectionView의 레이아웃 객체에 의해 위치가 결정됨CollectionView의 메소드를 사용하여 보여지는 item과 데이터 소스 객체가 일치하는 지 확인함
  • → 보여지는 item과 데이터 소스 객체 일치여부를 DiffableDataSource는 자동으로 관리함
  • → user Interface에 CollectionView를 넣는 것 뿐만 아니라
  • → 이러한 뷰는 개별의 셀들과 별개이지만, 정보를 알리는 section의 header와 footer의 역할
  • Custom Data Source를 사용하는 경우 Collection에서 데이터 추가, 삭제, 재정렬할 때마다 CollectionView 메소드 사용 - insert, delete, rearrange

Layouts

  • UICollectionViewLayout은 추상클래스라서 메소드가 선언만 되어 있다
  • CollectionView의 컨텐츠 배열을 정의
  • UICollectionViewLayout의 하위 클래스로, CollectionView의 모든 셀과 Supplementary View의 구성과 위치를 정의
  • 위치를 정의하지만 레이아웃에서 뷰에 위치를 적용하진 않음
  • → 셀 생성 시 데이터 소스와 컬레션 뷰 간 레이아웃 정보가 적용됨
  • collectionViewLayout 프로퍼티를 사용하면 동적 효과를 줄 수 있다
  • 이때 애니메이션 적용은 setCollectionViewLayout(_:animated:completion:)메서드 호출

FlowLayout

  • 아이템을 그리드 안에서 옵셔널 header와 footer뷰를 정렬하는 객체
  • 단순한 레이아웃 작업을 할 때 사용 - 제한된 커스터 마이징
  • 선형 레이아웃에 적합
  • 수직 스크롤
  • 수평 스크롤
  • 단일행 스크롤

UICollectionViewCompositionalLayout

  • 복잡한 유형의 레이아웃을 조합 가능
  • 다중 스크롤 방향을 만들 수 있다

Cell & Supplementary View

  • CollectionView의 컨텐츠를 처음 로드할 때 데이터를 각 item에 뷰를 제공하도록 요청
  • 새로은 뷰를 만들어서 사용하는 것이 아닌, 뷰를 dequeue하여 사용함

응답성을 향상시키기 위해 데이터를 미리 부르는 2가지 방법

Data prefetching

  • 셀에 대한 요청보다 먼저 데이터 요수사항을 알림
  • 네트워크 요청과 같은 비용이 많이 드는 데이터 수신 프로세스를 사용하는 경우 유용함

Cell prefetching

  • 다수의 셀을 사용하는 경우 필요시간보다 미리 셀을 불러 놓아 준비 - default = enabled
  • 사용자가 항목을 재정렬하도록 허용한 경우 항목의 위치를 업데이트하도록 Gesture Recognizer를 구성 가능
minimumLineSpacing - 위아래 간격(세로 스크롤), 좌우 간격(가로 스크롤)
minimumInteritemSpacing - 좌우 간격(세로 스크롤), 위아래 간격(가로 스크롤)

sectionInset

let sectionInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = collectionView.frame.width
        let height = collectionView.frame.height
        let itemsPerRow: CGFloat = 2
        let widthPadding = sectionInsets.left * (itemsPerRow + 1)
        let itemsPerColumn: CGFloat = 3
        let heightPadding = sectionInsets.top * (itemsPerColumn + 1)
        let cellWidth = (width - widthPadding) / itemsPerRow
        let cellHeight = (height - heightPadding) / itemsPerColumn
        
        return CGSize(width: cellWidth, height: cellHeight)
}

UICollectionViewDiffableDataSource

  • 데이터를 관리하고 CollectionView에 대한 셀을 제공하는 객체
@MainActor @preconcurrency
class UICollectionViewDiffableDataSource<SectionIdentifierType, ItemIdentifierType> : NSObject where SectionIdentifierType : Hashable, SectionIdentifierType : Sendable, ItemIdentifierType : Hashable, ItemIdentifierType : Sendable
  • DiffableDataSource 객체는 CollectionView와 함께 작용하는 특수 유형 데이터 소스
  • → DiffableDataSource : 변경 가능 데이터
  • CollectionView의 데이터 및 UI를 업데이트를 효율적인 방식 관리에 필요한 동작을 제공
  • UICollectionViewDataSource 프로토콜을 준수해야 사용 가능함
  • CollectionView를 Data로 채우는 방법
    1. diffable data source를 CollectionView에 연결
    2. CollectionView의 셀을 구성하려면 Cell Provider를 구현해야 함
    3. Data의 현재 상태를 생성
    4. UI에 Data를 표시
  • DiffableDataSource를 CollectionView에 연결하려면 init(collectionView:cellProvider:)을 활용하여 변경 가능한 데이터 소스를 만들고 지정된 CollectionView에 연결, UI에 데이터를 표시하는 방법을 결정하도록 셀을 구성하는 Cell Provider를 전달ㅌ
  • diffable 데이터 소스로 구성한 후 CollectionView 데이터 소스를 변경하지 말아야함
  • CollectionView를 초기화 한 후 새 데이터 소스가 필요한 경우에는 새로운 CollectionView와 새로운 diffable 데이터 소스를 만들어서 구성해야함
dataSource = UICollectionViewDiffableDataSource<Int, UUID>(collectionView: collectionView) {
    (collectionView: UICollectionView, indexPath: IndexPath, itemIdentifier: UUID) -> UICollectionViewCell? in
    // Configure and return cell.
}

NSDiffableDataSourceSnapshot

  • 특정 시점에서 View의 데이터 상태를 표현한 것
  • → 특정 시점의 데이터의 갯수
  • Diffable data sources는 Snapshot을 사용하여 CollectionView 및 TableView에 데이터를 제공
  • 데이터를 초기화하고, 변경사항을 반영할때 Snapshot을 사용
  • SnapShot의 데이터는 사용자가 결정한 순서대로 section과 item으로 구성
  • adding, deleting, moving 등으로 내용을 구성
  • section과 item은 Hashable 프로토콜을 준수
  • 식별자에 struct, enum, Int, String, UUID과 같은 값타입이 들어와야 한다
  • → 객체별로 구분이 되어야하기 때문
  • snapshot을 사용하여 View에 데이터를 표기하는 방법
    1. Snapshot을 만들고 디스플레이에 표시하려는 데이터의 상태로 채운다
    2. UI의 변경 사항을 반영하도록 Snapshot을 적용
  • Snapshot 구성 방법
    1. 빈 snapshot을 만들고 section과 item을 넣는다
    2. diffable 데이터 소스의 snapshot() 메서드를 호출하여 현 snapshot을 가져와서 데이터를 수정하여 반영

 

728x90

'TIL' 카테고리의 다른 글

Opaque And Boxe Type (2)  (0) 2024.01.19
Opaque And Boxe Type (1)  (0) 2024.01.19
MarkDown 접기  (0) 2023.12.11
SOLID  (0) 2023.12.01
URL Session  (0) 2023.11.30