[iOS 앱개발 기초] Collection View Programming Guide (컬렉션 뷰 프로그래밍)

이번 글에서는 iOS 앱을 개발할 때 많이 사용되는 컬렉션 뷰에 대해 알아보자! 컬렉션 뷰에 대한 정보는 공식 문서를 참고했으며 링크는 아래와 같다. 컬렉션 뷰와 테이블 뷰의 차이점을 생각해보며 공부하면 좋을 것 같다.

 

Apple Developer Documents - Collection View Programming Guide for iOS

About iOS Collection View

Collection View(컬렉션 뷰)는 유연하고 변경이 가능한 레이아웃을 사용하여 데이터를 보여주는 방법이다. 컬렉션 뷰로 데이터를 보여주는 가장 일반적인 방법은 격자모양으로 배열 한 뒤 보여주는 방법이지만 iOS의 컬렉션 뷰는 이렇게 단순한 행, 열 그 이상의 기능을 수행할 수 있다. 컬렉션 뷰를 사용하면 해당 클래스를 서브 클래싱 하여 시각적 요소의 레이아웃을 정확하게 정의할 수 있고 동적으로 변경할 수도 있다. 따라서 Grid, Stack, Circular layout, Dynamically changing layout과 그 이외의 많은 유형의 방법으로 구현할 수 있다.

 

컬렉션 뷰는 보여지는 데이터와 보이는 데 사용되는 시각적 요소를 엄격하게 구분한다. 대부분의 경우 앱은 데이터 관리에 전적으로 책임이 있다. 앱은 데이터를 보일 수 있게 하는 뷰 객체도 제공한다. 컬렉션 뷰는 화면에 보일 것을 배치하는 모든 작업을 수행한다. 이러한 작업은 위치와 뷰의 시각적 요소를 지정하고 앱의 요구에 맞게 서브 클래싱 할 수 있는 레이아웃 객체와 함께 작동한다. 따라서 데이터를 제공하고 레이아웃 객체가 제공하는 배치 정보 데이터를 컬렉션 뷰가 병합하여 최종적인 모양을 보여주게 된다.

At a Glance

표준 iOS 컬렉션 뷰 클래스는 간단한 grid(격자모양)를 구현하는 데 필요한 모든 것을 제공한다. 표준 클래스를 확장하여 레이아웃을 직접 만들거나 만든 레이아웃과의 특정 상호작용을 지원할 수 있다.

A Collection View Manages the Visual Presentation of Data-Driven Views

컬렉션 뷰를 사용하면 앱에서 제공하는 data-driven(데이터 중심적) 뷰를 쉽게 표현할 수 있다. 컬렉션 뷰의 유일한 관심은 뷰를 가져와서 특정 방법으로 배치하는 것이다. 컬렉션 뷰는 보이는 데이터에 관한 것이 아니고 데이터를 어떻게 보여주고 배치할 것인가에 관한 내용이다. 컬렉션 뷰, 데이터 소스, 레이아웃 객체, 사용자 정의 객체 간의 상호 작용을 이해하는 것은 앱에서 효율적이고 좋은 방식으로 컬렉션 뷰를 사용하는데 중요한 부분이다.

 

이와 관련 문서는 Collection View Basics, Designing Your Data Source and Delegate를 참고하자.

The Flow Layout Supports Grids and Other Line-Oriented Presentations

Flow 레이아웃 객체는 UIKit에서 제공하는 구체적인 레이아웃 객체이다. 일반적으로 flow 레이아웃 객체를 사용하여 grid를 구현한다. 즉 모든 유형의 선형 flow를 지원한다는 말이다. 하지만 flow 레이아웃은 grid 전용이 아니기 때문에 서브 클래싱에 관계없이 콘텐츠를 flow 레이아웃을 사용하면 유연한 배열로 만들 수 있다. Flow 레이아웃은 크기가 다른 아이템, 가변 길이 항목, 직접 정의한 footer, footer, marigin을 서브 클래싱 없이 사용할 수 있다. 물론 서브 클래싱을 사용하여 flow 레이아웃 클래스의 동적을 조정할 수 있다.

 

이와 관련된 문서는 Using the Flow Layout를 참고하자.

Gesture Recognizers Can Be Used for Cell and Layout Manipultaions

모든 뷰와 마찬가지로 컬렉션 뷰에도 제스처를 연결하여 뷰의 내용을 조작할 수 있다. 제스처 인식기를 사용하여 레이아웃 속성을 조정하거나 컬렉션 뷰의 항목을 조작할 수 있다.

 

컬렉션 뷰에서 제스처와 관련된 부분은 Incorporating Gesture Support를 참고하자.

Custom Layouts Let You Go Beyond Grids

기본 레이아웃 객체를 서브 클래싱 하여 앱에 대한 레이아웃을 직접 구현할 수 있다. 레이아웃을 직접 만들더라도 많은 양의 코드가 필요한 것은 아니지만 레이아웃의 작동 방식을 이해하면 레이아웃 객체를 효율적으로 디자인할 수 있다.

 

컬렉션 뷰에서 커스텀 레이아웃의 정보와 작성하는 방법은 Creating Custom Layouts, Custom Layouts: A Worked Example를 참고하자.

Prerequisites

여기 링크된 문서들을 읽기 전에 iOS 앱에서 뷰의 역할에 대해 잘 알고 있는 것이 좋다. iOS 프로그래밍이 익숙하지 않고 iOS 뷰 아키텍처에 익숙하지 않은 경우엔 View Programming Guide for iOS를 읽어보자.

See Also

컬렉션 뷰는 어떠한 데이터를 사용자에게 보여준다는 것에서 테이블 뷰와 많이 연관되어있다. 둘 다 flow 레이아웃을 사용하는 것과 index path, cell, view recycling을 사용하는 점에서 테이블 뷰와 컬렉션 뷰는 비슷한 부분이 있다. 하지만 테이블 뷰는 단일 열 레이아웃을 중심으로 하고 컬렉션 뷰는 다양한 레이아웃을 사용할 수 있다.

 

테이블 뷰에 관련된 내용은 Table View Programming Guide for iOS, UITableView를 참고하자.