[iOS] UICollectionView (UIKit - UICollectionView)

공식문서 https://developer.apple.com/documentation/uikit/uicollectionview 를 읽고 작성한 글입니다.

 

UICollectionView

데이터 아이템들의 정렬된 집합을 관리하고, 그들을 커스텀 가능한 레이아웃들을 사용하여 보여주는 객체

 

@MainActor class UICollectionView : UIScrollView

 

Overview

유저 인터페이스에 컬렉션 뷰를 더할 때, 앱의 주요 일은 컬렉션 뷰에 연결된 데이터를 관리하는 것이다. 컬렉션 뷰는 data source 객체로부터 데이터를 얻는다. data source를 위해, UICollectionViewDiffableDataSource 객체를 사용할 수 있다. 이것은 단순하게 효율적이게 컬렉션 뷰의 데이터와 유저 인터페이스를 업데이트하는 것에 필요한 행동들을 제공한다. 대안적으로 UICollectionView DataSource 프로토콜을 채택함에 의해 커스텀 data source 객체를 만들 수 있다.

 

컬렉션 뷰의 데이터는 개인 아이템으로 조직화되어 있다. 우리는 섹션들로 그룹화할 수도 있다. 하나의 사진 앱에서 한 아이템은 그저 하나의 이미지일 수도 있다. 이 컬렉션 뷰는 셀을 사용하여 전체 스크린을 채우는 아이템이다. 

 

 

 

셀에 추가적으로, 컬렉션 뷰는 뷰들의 다른 타입들을 사용하여 데이터를 보여줄 수 있다. 이 추가적인 뷰들은 섹션 헤더와 푸터들이다. 개별적인 셀들로부터 분리가 되지만 정보를 부여할 수 있다. 추가적 뷰를 위한 지원은 선택적이며, 컬렉션 뷰의 레이아웃 객체에 의해 정의된다. 이 뷰들은 위치를 정의하는 것이 필수적이다.

 

유저 인터페이스에서 UICollectionView를 단지 내재시키는 것 뿐만 아니라, data source 객체에 맞게 아이템들의 보여지는 순서를 일치하게 하기 위해서 컬렉션 뷰의 여러 메서드들을 사용한다. UICollectionViewDiffableDataSource 객체는 이 과정을 자동적으로 관리한다. 만약 커스텀 data source를 사용한다면 데이터 추가, 삭제, 재배치할 때마다 UICollectionView의 메서드들을 사용한다.

 

또한 선택된 아이템들을 관리하기 위해 컬렉션 뷰 객체를 사용한다. delegate 객체와 함께 컬렉션 뷰는 이 것을 할 수 있다.

 

Layouts

레이아웃 객체는 컬렉션 뷰의 컨텐츠의 시각적 정열을 정의한다. UICollectionViewLayout 클래스의 하위 클래스, 레이아웃 객체는 모든 셀들과 추가 뷰들의 조직과 위치를 정의한다. 비록 그들의 위치를 정의할지라도, 레이아웃은 실제로 상응하는 뷰에 정보를 적용시키지 않는다. 컬렉션 뷰가 상응하는 뷰들에 레이아웃 정보를 적용시킨다. 그 이유는 셀의 생성과 추가적 뷰는 컬렉션 뷰와 data source 객체 사이의 협력을 포함하고 있기 때문이다. 레이아웃 객체는 아이템 데이터를 대신해 시각적 정보를 제공하는 것을 제외하고 다른 data source와 같다.

 

전형적으로 컬렉션 뷰를 만들 때 레이아웃 객체를 정의힌다. 그러나 또한 동적으로 컬렉션 뷰의 레이아웃을 바꿀 수 있다. 레이아웃 객체는 collectionView Layout 프로퍼티에 저장되어 있다. 프로퍼티를 직접적으로 정의하는 것은 레이아웃을 즉시 업데이트한다. 만약 변화를 애니메이션화하고 싶다면 setCollectionView Layout(_:animated:completion:) 메서드를 호출해라.

 

상호작용적인 변환을 만들기 위해 (제스처 인식, 터치 이벤트에 의해 촉발되는) 레이아웃 객체를 변화시키는 startInteractiveTransition(to:completion:)을 사용해라. 메서드는 중간의 레이아웃 객체를 설치하고 제스처 인식이나 이벤트 핸들링 코드에 작동한다. 이벤트 핸들링 코드가 변환이 끝난 것을 결정했을 때, 이것은 중간 레이아웃 객체를 제거하고 설치된 타겟 레이아웃 객체를 설치하기 위해 finishInteractiveTransition() 이나 cancelInteractiveTranstion() 메서드를 호출한다.

 

Cells and Supplementary Views

컬렉션 뷰의 data source 객체는 아이템을 위한 컨텐츠와 컨텐츠를 보여주기 위해 사용한 뷰들 모두를 제공한다. 컬렉션 뷰가 컨텐츠를 처음 로드했을 때, data source에게 각각의 보여질 아이템을 위한 뷰를 제공하도록 요청한다. 컬렉션 뷰는 data source가 재사용을 위해 마크해 둔 큐나 뷰 객체의 리스트를 유지한다. 새 뷰들을 만들어 내는 것 대신에 뷰들을 항상 dequeue하는 것이다.

 

뷰를 dequeue하는 두 가지 메서드가 있다. 하나는 요청된 뷰 타입에 의존한다.

- dequeueReusableCell(withReuseIdentifier:for:) : 컬렉션 뷰에 하나의 아이템을 위한 셀을 얻는다.

- dequeueReusableSupplementaryView(ofKind:withReuseIdentifier:for:) : 레이아웃 객체에 의해 요청된 추가 뷰를 얻기 위한 메서드.

 

이 메서드들을 호출하기 전에 컬렉션 뷰에게 그들이 존재하지 않는다면 상응하는 뷰를 어떻게 만들건지 말해야 한다. 이것을 위해 컬렉션 뷰와 함께 클래스나 nib 파일을 만든다. 예를 들어 셀을 등록할 때, register(_:forCellWithReuseidentifier:) 메서드를 사용한다. nib 파일을 등록하기 위해 register(_:forCellWithReuseIdentifier:) 메서드를 사용한다. 등록 과정들이 끝나면 재사용 식별자를 정의한다. 이것은 추후에 뷰를 dequeue할 때 사용하는 같은 string이다.

 

data source 메서드에서 적절한 뷰를 dequeue한 후에 컬렉션 뷰에 리턴한다. 레이아웃 객체로부터 레이아웃 정보를 얻은 후에 컬렉션 뷰는 뷰에 적용하고 보여준다.

 

Data Prefetching

컬렉션 뷰는 응답을 개선하기 위해 사용할 수 있는 두 가지 prefetching 기술들을 제공한다.

 

- Cell prefetching 

셀 프리페칭은 셀들이 그들이 요구된 시간에 미리 준비된 것이다. 컬렉션 뷰가 많은 수의 셀을 동시에 요구할 때, 예시로 그리드 레이아웃의 셀들, 셀들은 보여주기 위해 요구되는 시간보다 일찍 요청된다. 셀 렌더링은 그러므로 레이아웃이 지나가자마자 퍼지고, 더 부드러운 스크롤링 경험을 제공한다. 셀 프리페칭은 디폴트에 의해 가능하다.

 

- Data prefetching

데이터 프리페칭은 셀 요청에 앞서 컬렉션 뷰의 데이터 요구사항을 알고있음에 의해 제공되는 메카니즘이다. 이것은 셀이 비용이 크게 드는 네트워크 요청과 같은 데이터 로딩 프로세스에 의존할때 유용하다. UICollectionViewDataSourcePrefetching 프로토콜을 채택하는 객체가 prefetchDataSource 프로퍼티에 할당될 때 셀을 위한 데이터가 프로페치될 때를 알려준다.

 

Reordering Items Interactively

컬렉션  뷰는 아이템을 유저 인터렉션에 기초하여 움직이는 것을 허락한다. 전형적으로, 아이템들의 순서는 data source에 의해 정의된다. 만약 사용자가 아이템을 재조정할 수 있도록 한다면, 사용자의 상호작용이 컬렉션 뷰 아이템을 끌고, 올바른 위치에 업데이트시키도록  gesture recognizer를 설정할 수 있다.

 

아이템 상호작용적인 재조정을 시작하기 위해서 beginInteractiveMovementForItem(at:) 메서드를 호출해라. gesture recognizer가 터치 이벤트들을 끌고있는 동안 updateInteractiveMovementTargetPosition(_:) 메서드가 터치 위치의 변화를 보고하기 위해 호출된다. 제스처를 읽는 것을 끝냈다면 endInteractiveMovement()나 cancelInteractiveMovement() 메서드를 컬렉션 뷰 업데이트를 결론 짓기 위해 호출해라.

 

유저 상호작용 동안, 컬렉션 뷰는 아이템의 현재 위치를 반영하기 위해 레이아웃을 동적으로 불가능하게 했다. 만약 아무것도 하지 않았다면 디폴트 레이아웃 행동은 아이템들을 재위치시킨다. 그러나 원하는 대로 레이아웃 애니메이션을 커스텀할 수 있다. 상호작용이 끝나면 컬렉션 뷰가 data source 객체를 새 위치로 업데이트한다.

 

UICollectionViewController 클래스는 관리된 컬렉션 뷰에서 아이템 재위치를 사용할 수 있도록 디폴트 gesture recognizer를 제공한다. gesture recognizer를 설치하기 위해 installsStandardGestureForInteractiveMovement 프로퍼티를 true로 설정해라.

 

Interface Builder Attributes

인터페이스 빌더에서 컬렉션 뷰들을 설정할 수 있는 속성들

 

- Items

프로토타입 셀들의 숫자이다. 이 프로퍼티는 스토리보드에서 프로토타입 셀들의 특정 숫자를 설정한다. 컬렉션 뷰는 반드시 적어도 하나의 셀을 가져야 하고, 다른 타입의 컨텐츠를 보여주기 위해 다양한 셀들을 가질 수도 있다.

 

- Layout

사용하기 위한 레이아웃 객체. UICollectionViewFlowLayout 객체와 커스텀 레이아웃 객체 사이에 선택하기 위해 컨트롤을 사용해야 한다.

flow layout이 선택될 때, 컬렉션 뷰의 컨텐츠의 스크롤 방향과 헤더 푸터 뷰를 가질지도 결정할 수 있다. 헤더 푸터 뷰를 가능하게 하는 것은 스토리보드에 재사용가능한 뷰들을 더한다. 코드로 뷰들을 만들 수도 있다. 

커스텀 레이아웃이 선택되면, UICollectionViewLayout 클래스를 정의해야 한다.

 

Flow layout이 선택될 때, 컬렉션 뷰를 위한 사이즈 조사자가 추가적 속성들을 포함한다. 셀의 사이즈, 헤더 푸터의 사이즈를 설저앟기 위해 이 속성들을 사용해라. 

 

Internationalization

컬렉션 뷰는 국제화를 위한 직접적인 컨텐츠가 없다. 대신에 셀을 국제화하고 컬렉션 뷰의 재사용가능한 뷰를 국제화할 수 있다.

 

Accessibility

컬렉션 뷰는 접근가능한 스스로의 컨텐츠가 없다. 만약 셀과 재사용가능한 뷰가 UIKit 표준 컨트롤을 포함한다면 컨트롤을 접근가능하게 할 수 있다. 컬렉션 뷰가 전체 화면 레이아웃으로 바뀔 때, UIAccessibilityLayoutChangeNotification 알림을 받는다.