UICollectionView #2 실습 - Cell Spread (1)

개요

---

튜토리얼에서 배운 것을 바탕으로 간단한 프로그램을 만들어보자.

프로그램은 무지개 색깔을 가진 cell들로 구성되며 해당 cell을 터치하면 그 색깔을 배경색으로 가지는 화면으로 전환된다. 이 때 선택한 cell 화면으로 전환되는 것을 자연스럽게 보여주기 위해 해당 cell이 확장되어 화면을 덮는 것처럼 보이는 시각효과를 추가한다.

준비

---

cell을 확장한 view에서 다시 collectionView로 되돌아오는 기능은 이 포스팅의 주된 논점이 아니므로 NavigationController를 사용하여 간단하게 준비한다.

우선 Single View App으로 프로젝트를 생성하고 storyboard를 다음처럼 만든다.

1. NavigationController를 Initial View Controller로 설정한다.

2. CollectionViewController를 RootViewController로 설정하고 cell을 적당히 늘려서 ImageView를 배치한다. cell의 크기는 코드에서 정할것이기 때문에 storyboard에서는 작업하기 적당한 크기로 임의로 설정하도록 한다.(reuseIdentifier : ColorCell) SectionHeader를 추가해서 Rainbow라는 Label도 추가해보자. (reuseIdentifier : RainbowHeader)

3. cell을 선택하면 넘어가는 ViewController를 추가한다. 기본 view의 배경은 투명하게 설정하고 ImageView를 추가해서 화면 크기에 맞게 조정한다.

4. Segue를 설정한다. (identifier : Spread)

구현

---

ColorCell

이 실습에서는 cell의 배경색과 확장된 view의 배경색이 동일하면 되기 때문에 굳이 ImageView가 필요없다고 생각할 수 있지만 cell이 가지고있던 정보를 그대로 다음 view로 전달할 수 있다는 것에 의의를 두자. 이를 변형시키면 cell에 표현되고있던 label값을 전달한다던지 정보를 가지고올 API서버 주소를 넘겨줘서 상세정보를 가지고오게 한다던지 응용이 가능하다.

이를 위해서 UICollectionViewCell을 상속받는 ColorCell을 구현한다.

1. ColorCell은 외부참조로 ImageView를 참조한다.

ViewController

각 ViewController를 구현하기 위해 UICollectionViewController, UIViewController를 각 상속받는 RainbowViewController, ColorViewController를 구현한다. 먼저 가장 중요한 RainbowViewController를 구현해보자. UICollectionViewController를 상속받아 구현하는 이 클래스는 아래와 같은 변수들을 가진다.

1. 무지개색 cell을 생성하기위한 cellInfo를 초기화한다. (ColorCellInfo는 UIColor값을 가지는 간단한 구조체)

2. 선택한 cell의 indexPath를 저장하기 위한 변수

3. reuseIdentifier를 위해 미리 정의해둔 Storyboard 구조체

viewDidLoad()에서 cell의 크기를 지정하기 위해 layout값을 수정한다.

UICollectionViewDataSource의 함수들을 override해서 cell과 header를 설정해보자.

1. section은 1개로 설정한다.

2. cell의 갯수는 cellInfos의 갯수인 7개로 설정한다.

3. header view를 storyboard에서 만든 view를 사용하도록 설정한다.

마지막으로 각 cell의 특성을 설정한다.

다음은 UICollectionViewDelegate의 함수들을 override하여 사용자와 상호작용할 수 있도록 만들어보자.

1. cell들을 선택할 수 있도록 한다.

2. cell을 선택하면 미리 지정해둔 segue를 통해 다음 view를 보여준다.

cell을 선택해서 보여지게될 view controller는 간단하게 아래처럼 구현한다.