CLOSE SEARCH

컬렉션 뷰(UICollectionView) #2. 10분만에 완성하는 Grid UI

컬렉션 뷰를 사용하면 그리드 형태의 UI를 아주 쉽게 구현할 수 있습니다. 화면 방향이 바뀔때마다 에니메이션 효과를 통해 재정렬되는 것은 기본입니다. 재사용 매커니즘을 통해서 부드럽게 스크롤링되는 것도 당연합니다. 이 모든 것을 10분 안에 구현할 수 있습니다.

컬렉션 뷰의 실제 사용법에 대해 알아보기 위해 그리드 형태로 사진을 출력하는 예제 앱을 만들어보겠습니다. 컬렉션 뷰 구현에 좀 더 집중하기 위해 기본적인 UI관련 설정에 대한 설명은 생략하도록 하겠습니다. 관련된 내용은 이 글의 마지막에 있는 예제 프로젝트 파일을 다운로드 하셔서 참고해 주시기 바랍니다.

IMG_0047

 

Register

컬렉션 뷰에 표시되는 Cell과 Supplementary View를 생성시키는데 사용되는 클래스나 Nib 파일은 초기화 시점에 컬렉션 뷰에 등록되어야 합니다. 만약 등록을 하지 않는다면 실행중에 예외가 발생합니다. 스토리보드를 사용해서 UI를 구성하는 경우에는 이런 절차를 생략하고 인터페이스 빌더에서 필요한 모든 설정을 완료할 수 있습니다. 예제 프로젝트는 스토리보드가 아닌 전통적인 Nib 방식을 사용해서 구현하였습니다.

컬렉션 뷰는 등록과 관련된 4개의 인스턴스 메소드를 제공합니다.

4개의 메소드 모두 마지막 파라미터로 재사용 식별자를 전달받습니다. 재사용 식별자는 재사용 큐에서 항목을 가져올 때 필요한 항목이 어떤 것인지를 구분하는데 사용됩니다. 그러므로 서로 다른 역할을 하거나 다른 UI를 가진 Cell이나 Supplementary View는 반드시 구별되는 재사용 식별자를 가져야 합니다.

Supplementary View의 경우 두번째 파라미터로 Header인지 Footer인지를 구분하는 문자열을 전달받습니다. 현재는 두개의 문자열 상수(UICollectionElementKindSectionHeader와 UICollectionElementKindSectionFooter)를 사용할 수 있습니다.

위의 등록 메소드 중 하나를 사용해서 필요한 등록작업을 완료하면 컬렉션 뷰는 재사용 매커니즘의 이점을 활용해서 셀이나 뷰를 화면에 적절히 표시할 수 있도록 해 줍니다. 예제 프로젝트에서는 셀에서 사용할 Nib 파일과 헤더로 사용할 Supplementary View의 Nib 파일을 등록합니다.

 

Data Source (UICollectionViewDataSource)

데이터 소스는 컬렉션 뷰에 표시할 데이터를 제공하고, 컬렉션 뷰가 데이터를 표시할 때ㅐ 사용하는 Cell과 Supplementary View를 구성하는 역할을 담당합니다. 데이블 뷰에서 사용했던 데이터 소스와 동일한 개념과 매우 유사한 네이밍을 사용하므로 각 델리게이트 메소드의 역할을 이해하는 것은 매우 쉬울 것입니다.
UICollectionViewDataSource에는 4개의 프로토콜 메소드가 정의되어 있고, 아래쪽에 (필수)로 표시된 두개의 메소드는 반드시 구현해야 합니다.

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView*)collectionView 메소드는 데이터 소스 객체에게 컬렉션 뷰에 표시할 섹션의 수를 요청합니다. 섹션의 수가 1개인 경우에는 생략할 수 있습니다.
-(NSInteger)collectionView:(UICollectionView*)collectionView numberOfItemsInSection:(NSInteger)section 메소드는 데이터 소스 객체에게 특정 섹션에 표시할 셀의 수를 요청합니다. 이 메소드를 구현하지 않거나 잘못된 값을 리턴하는 경우에는 런타임 오류가 발생하므로 주의해야 합니다.
-(UICollectionViewCell*)collectionView:(UICollectionView*)collectionView cellForItemAtIndexPath:(NSIndexPath*)indexPath 메소드는 데이터 소스 객체에게 NSIndexPath 형태로 정의된 특정 위치에 표시할 셀을 요청합니다. 개발자는 구현에서 화면에 표시할 UICollectionViewCell을 구성한 다음 컬렉션 뷰로 리턴해주어야 합니다. 리턴할 셀은 직접 생성하지 않고 컬렉션 뷰의 재사용 큐에서 하나를 가져와서 사용해야 합니다. dequeueReusableCellWithReuseIdentifier:forIndexPath: 메소드에 등록과정에서 지정한 재사용 식별자와 현재 위치를 나타내는 IndexPath를 파라미터로 보내면 유효한 셀을 얻을 수 있습니다. 이 메소드는 항상 유효한 객체를 리턴하기 때문에 테이블 뷰 데이터 소스 구현에서와 같이 리턴된 객체가 nil인지 확인하는 코드는 더이상 필요하지 않습니다. 예제 프로젝트에서는 재사용 큐에서 가져온 셀에 표시할 이미지를 설정한 다음 컬렉션 뷰로 리턴합니다.

-(UICollectionReusableView *)collectionView:(UICollectionView*)collectionView viewForSupplementaryElementOfKind:(NSString*)kind atIndexPath:(NSIndexPath*)indexPath 메소드는 데이터 소스 객체에게 컬렉션 뷰의 특정 위치에 표시할 Supplementary View를 요청합니다. 이 메소드의 주요한 역할은 Supplementary View를 생성하는 것입니다. Supplementary View 역시 재사용 매커니즘을 사용합니다. 그러므로 앞에서 설명한 메소드와 유사한 패턴을 사용해서 구현할 수 있습니다. dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath: 메소드를 통해 재사용 큐에서 뷰를 가져올 수 있고, 마찬가지로 항상 유효한 뷰 객체를 리턴합니다.

 

Build & Run

화면에 표시할 데이터를 구성하고 데이터 소스를 구현하면 모든 것이 완벽하게 동작하는 심플한 앱이 완성됩니다. (메모리 관리라던가 예외처리 같은 디테일한 코드는 없지만 어쨌든 동작은 잘 합니다^^;;) 맨 처음 실행시 재사용큐에 적절한 수의 셀과 뷰가 추가되기 전까지 약간의 끊김이 있지만, 그 이후에는 아주 부드럽게 동작합니다.

예제 프로젝트 >> CollectionView1

Filed under: iOS