[iOS 앱개발 기초] Collection View Basics(컬렉션 뷰의 기초)

이번 글에서는 저번 글에 이어 컬렉션 뷰의 기초를 닦아보자! 해당 정보는 공식 문서를 참고했다.

 

Apple Developer Document - Collection View Basics

Collection View Basics

콘텐츠를 화면에 표시하기 위해 컬렉션 뷰는 많은 객체들과 함께 동작한다. 객체들 중 몇 개는 앱에서 반드시 제공해야 하는 것들이 있는데 컬렉션 뷰의 표시할 항목 수를 알려주는 데이터 소스 객체를 제공해야 한다. 다른 객체는 UIKit에서 제공하며 기본 컬렉션 뷰 디자인의 일부이다.

 

컬렉션 뷰는 테이블 뷰와 마찬가지로 데이터 기반 객체로 구현할 때 앱의 객체들과 함께 동작해야한다. 코드에서 해야 할 일을 이해하려면 컬렉션 뷰의 기능에 대한 약간의 배경지식이 필요한다.

A Collection View Is a Collaboration of Objects

컬렉션 뷰의 구성은 화면에 보여지는 방법과 화면에 보여지는 데이터로 나뉜다. 앱은 보여지는 데이터 관리를 책임 치지만 보여지는 방법의 경우엔 다양한 객체로 나뉜다. 다음 표는 UIKit의 클래스를 컬렉션 뷰 인터페이스를 구현할 때 수행하는 역할별로 나열한 것이다. 대부분의 클래스가 서브 클래싱이 필요 없으므로 적은 코드로 컬렉션 뷰를 구현할 수 있다. 기본적으로 제공되는 기능 이외의 것을 구현하고 싶다면 상속받은 클래스를 생성하여 그러한 기능을 제공할 수 있다.

 

Purpose	Classes / Protocols	Description
최상위 구성 및 관리	UICollectionView UICollectionViewController	UICollectionView 객체는 컬렉션 뷰의 표시 영역을 정의한다. 이 클래스는 UIScrollView를 상속받으며 필요에 따라 큰 스크롤 가능 영역을 포함할 수 있다. 레이아웃 객체에서 받은 레이아웃 정보를 기반으로 데이터를 표시하는데도 도움을 준다. UICollectionViewController 객체는 컬렉션 뷰에 대하여 뷰 컨트롤러 수준의 관리를 지원한다. 사용이 필수는 아니다.
컨텐츠 관리	UICollectionViewDataSource protocol UICollectionViewDelegate protocol	데이터 소스 객체는 컬렉션 뷰와 연관된 가장 중요한 객체이며 반드시 제공해야한다. 데이터 소스는 컬렉션 뷰의 컨텐츠를 관리하고 해당 컨텐츠를 보여줄 뷰를 만든다. 데이터 소스 객체를 구현하려면 UICollectionViewDataSource 프로토콜을 준수하는 객체를 만들어야한다. 컬렉션 뷰 delegate 객체를 사용하면 컬렉션 뷰에서 발생하는 메시지들을 가로채서 동작들을 설정할 수 있다. 예를들어 delegate 객체를 사용하여 컬렉션 뷰에서 항목을 선택하고 강조하는 것을 추적할 수 있다. 하지만 이는 필수가 아닌 선택사항이다.
보여주기	UICollectionReusableView UICollectionViewCell	컬렉션 뷰로 보여지는 모든 뷰는 UICollectionReusableView 클래스의 인스턴스이다. 이 클래스는 컬렉션 뷰를 사용할 때 재사용 기법을 지원하는데 재사용 뷰란 매번 새로운 뷰를 만드는 것이 아닌 한 번 만든 뷰를 재활용하는 것이다. 이렇게 하면 성능이 향상되고 특히 스크롤 중 성능이 크게 향상된다. UICollectionViewCell 객체는 주요 데이터 항목에 사용하는 특수항 유형의 재사용 가능한 뷰이다.
레이아웃	UICollectionViewLayout UICollectionViewLayoutAttributes UICollectionViewUpdateItem	UICollectionViewLayout의 서브클래스는 레이아웃 객체라고 하며 셀의 위치, 크기 및 시각적 속성 및 컬렉션 뷰 내에서 재사용 가능한 뷰를 정의한다. 레이아웃 과정 중 레이아웃 객체는 컬렉션 뷰에게 재사용 가능 셀을 어디에 어떻게 보여줄 것인지 알려주는 layout attribute objects를 생성한다. 레이아웃 객체는 데이터가 컬렉션 뷰에 추가, 이동, 삭제 될 때마다 UICollectionViewUpdateItem 객체를 받게 된다. 이 클래스의 인스턴스를 직접 만들진 말길 바란다.
Flow 레이아웃	UICollectionViewFlowLayout UICollectionViewDelegateFlowLayout protocol	UICollectionViewFlowLayout 클래스는 grid 또는 기타 선형 레이아웃을 구현하는데 사용하는 레이아웃 객체이다. 클래스를 있는 그대로 사용하거나 delegate 객체와 함께 사용하여 레이아웃 정보를 동적으로 직접 정의할 수 있다.

 

 

위의 그림은 컬렉션 뷰와 관련된 핵심 객체들과의 관계를 보여준다. 컬렉션 뷰는 데이터 소스에서 보여줄 셀에 대한 정보를 가지고온다. 데이터 소스 및 델리게이트 객체는 앱에서 제공하는 사용자 정의 객체이며 셀이 선택되고 강조되는 등의 기능들을 관리하는 데 사용된다. 레이아웃 객체는 해당 셀이 속하는 위치를 결정하고 하나 이상의 레이아웃 속성 객체로 컬렉션 뷰에 전송한다. 그런 뒤 컬렉션 뷰는 레이아웃 정보를 실제 셀이나 다른 뷰들과 결합하여 최종족으로 보이게 되는 화면을 만든다.

 

컬렉션 뷰 인터페이스를 만들 때 제일 먼저 스토리 보드 또는 nib file에 UICollectionView 객체를 추가하자. 컬렉션 뷰를 다른 객체들이 나오는 중앙 허브라고 생각하자. 그런 뒤 아까 추가한 객체에 데이터 소스, 델리게이트와 같은 객체를 구성하면 된다. 모든 구성은 컬렉션 뷰 자체를 중심으로 한다. 예를 들어 컬렉션 뷰를 만들기도 전에 레이아웃 객체를 만들지 말라는 말이다.

Reusaable View Improve Performance

컬렉션 뷰의 효율성을 향상시키기 위해서 재활용 프로그램을 사용한다. 어떠한 뷰가 화면에서 사라지면 화면에서는 사라지지만 데이터는 삭제되지 않고 재사용 큐에 배치된다. 새로운 콘텐츠가 화면에 스크롤되면 아까 배치된 뷰가 큐에서 제거되고 새로운 콘텐츠로 변경된다. 이러한 재사용을 용이하게 하려면 컬렉션 뷰에 표시되는 모든 뷰가 UICollectionReusableView 클래스에서 파생되어야 한다.

컬렉션 뷰는 재사용이 가능한 세 가지 유형의 뷰를 지원하며 각자 고유한 용도가 있다.

 

• Cell은 컬렉션 뷰에서 주된 콘텐츠를 보여준다. 셀의 역할은 데이터 소스 객체에서 하나의 항목을 보여주는 것이다. 각자의 셀은 UICollectionViewCell 클래스의 인스턴스이며 필요에 의해 이 클래스의 서브 클래스를 만들어서 사용해도 된다. 셀 객체는 자신이 선택되고 강조된 것을 관리하기 위한 자체적인 기능을 제공한다. 실제로 셀에 강조 표시를 하려면 개발자가 직접 작성해줘야 한다.

• Supplementary view는 섹션에 대한 정보가 표시된다. 셀과 마찬가지로 보충 뷰도 데이터 중심적이다. 셀과는 다르게 보충 뷰는 필수는 아니며 사용과 배치는 레이아웃 객체에 의해 제어된다. 직접적인 사용 예로는 Footer, Header가 있다.

• Decoration view는 레이아웃 객체가 소유하고 있으며 데이터 소스 객체의 데이터에는 연결되지 않는 시각적 요소이다. 예를 들어보자면 장식 뷰를 사용하여 배경의 모양을 바꿀 수 있다.

테이블 뷰와는 다르게 컬렉션 뷰는 데이터 소스에서 제공하는 셀 및 보충 뷰에 특정 스타일을 적용하지 않는다. 대신 재사용 가능한 뷰 클래스는 기본적으로 빈 캔버스이다. 예를 들면 작은 이미지 계층을 구성하거나 이미지를 보여주거나 콘텐츠를 동적으로 그리는 데 사용할 수 있다.

 

데이터 소스 객체는 컬렉션 뷰의 셀과 보충 뷰를 제공해야 한다. 하지만 데이터 소스 객체가 뷰를 직접 만들지는 않기 때문에 필요한 뷰를 요청하게 된다. 요청하면 컬렉션 뷰의 메서드를 사용하여 필요한 타입의 뷰를 재사용 큐, 클래스, nib 파일 또는 스토리 보드에서 가져온다.

The Layout Object Controls the Visual Presentation

레이아웃 객체는 컬렉션 뷰에서 항목들의 위치와 시각적 스타일을 정해준다. 데이터 소스 객체가 뷰의 실제 내용을 제공하지만 레이아웃 객체는 이러한 내용의 크기, 위치, 기타 모양과 관련된 속성을 결정한다. 이러한 분리된 역할로 앱에서 관리하는 데이터는 데이터 객체를 바꾸지 않더라도 레이아웃을 동적으로 바꿀 수 있다.

 

컬렉션 뷰에서 사용되는 레이아웃 프로세스는 앱의 컬렉션 뷰를 제외한 나머지 뷰에서 사용하는 레이아웃 프로세스와 관련은 있지만 차별성이 있다. 즉 레이아웃 객체가 부모 뷰 안의 자식 뷰의 위치를 변경하는 데 사용되는 layoutSubviews 메서드와 혼동하면 안 된다. 레이아웃 객체는 실제로 해당 뷰를 소유하는 것은 아니므로 직접 관리하는 뷰를 건드리진 않는다. 대신 컬렉션 뷰에서 셀의 위치, 크기, 시각적 요소, 보충 뷰, 장식 뷰를 설명하는 속성을 생성한다. 그런 뒤 이러한 속성을 뷰 객체에 적용하는 것이 컬렉션 뷰의 할 일이다.

 

레이아웃 객체가 컬렉션 뷰의 뷰에 영향을 주는 방법에는 제한이 없다. 레이아웃 객체는 어떤 뷰는 이동 가능하지만 어떤 뷰는 이동시킬 수 없다. 뷰를 조금만 이동하거나 화면에서 임의로 이동할 수 있다. 또한 주변 뷰를 고려하지 않고 뷰를 재배치할 수도 있다. 예를 들어 레이아웃 객체는 뷰들을 서로 쌓을 수도 있다.

 

위의 그림은 수직 스크롤 flow 레이아웃이 셀과 보조 뷰를 정렬하는 방법이다. 수직 스크롤 flow 레이아웃에서 내용 영역의 너비는 고정된 상태로 유지되며 내용에 맞게 높이가 증가한다. 배치 객체는 뷰와 셀을 한 번에 하나씩 배치하고 각자 가장 적합한 위치를 선택한다. Flow 레이아웃의 경우 셀과 보조 뷰의 크기는 레이아웃 객체 또는 델리게이트를 사용하여 속성으로 지정된다. 레이아웃 계산은 이러한 속성을 사용하여 각 뷰를 배치하기만 하면 된다.

 

레이아웃 객체는 뷰의 크기와 위치와 같이 간단한 것보다 더 많은 것을 제어한다. 레이아웃 객체는 투명도, 3D 공간에서의 이동, 다른 뷰의 위아래에 보이게 하기 등 뷰들 사이의 관계도 지정할 수 있다. 이러한 속성을 사용하여 다양한 레이아웃을 만들 수 있다. 예를 들어 뷰를 서로의 위에 두고 z 순서를 변경하여 셀 스택을 만들거나 변환을 사용하여 모든 축에서 회전시킬 수 있다. 이러한 부분은 Creating Custom Layouts 에서 더 알아보자.

Collection Views Initiate Animations Automatically

컬렉션 뷰는 기본적으로 애니메이션을 지원하도록 만들어진다. 항목을 추가하거나 제거할 때 영향을 받는 모든 뷰가 컬렉션 뷰에서 자동으로 애니메이션으로 표시된다. 예를 들어 항목을 새로 추가하면 원래 있던 항목들이 알아서 빈칸을 만들기 위해 이동한다. 컬렉션 뷰는 항목의 현재 위치를 감지하고 삽입 후 최종 위치를 계산할 수 있기 때문에 이러한 애니메이션을 사용할 수 있다.

 

삽입, 삭제, 이동에 애니메이션을 추가하는 것 말고도 언제든지 레이아웃을 무효화하고 레이아웃 속성을 다시 계산하도록 할 수 있다. 레이아웃을 무효화하면 애니메이션이 즉각적으로 적용되지는 않는다. 무효화를 하게 되면 컬렉션 뷰의 아이템들이 애니메이션 없이 이동된다. 하지만 커스텀 레이아웃으로 원하는 동작을 사용하여 셀을 배치하고 애니메이션을 만들 수 있다.