UICollectionView #3 실습 - CardNews (2)

ViewController

---

구현하고자 하는 cell의 개념은 이렇다.

1. main view에서 card를 하나 선택한다.

2. 해당 카드가 화면 전체로 확장되는 듯한 애니메이션이 재생되며, 그 동안 카드를 구성하는 내부 view들의 constraints도 동적으로 적용된다. 즉, snapshot이미지를 사용하는 것이 아니라 실제 그 view가 화면 전체로 확장되는 효과를 주는 것이다.

3. transition이 끝나면 카드를 구성하던 view가 그대로 news view로 전달되어 사용된다.

4. 되돌아 오는 것은 반대로 이루어진다.

이러한 동작을 위해서 main view와 news view가 사용할 protocol을 정의해야한다.

먼저 메인화면을 구성하는 MainViewController 부터 살펴보자. UICollectionViewController를 상속받아서 구현할 것이며 간단하게 아래와 같은 것들을 초기화해준다.

1. card들의 크기 및 구성정보를 얻어오기 위해 미리 정의해둔 모델의 객체를 생성한다.

2. 선택한 cell을 저장하기 위한 변수

3. storyboard에서 설정한 값들을 저장하는 구조체이다. 주로 문자열을 사용하기 때문에 여러 부분에서 사용하면 오타로 인한 오류가 발생하기 쉬우므로 전역변수로 할당하여 실수를 미연에 방지한다.

4. storyboard에서 layout을 우리가 정의한 MainViewLayout으로 지정했기 때문에 layout에게도 모델을 전달해주어서 정보를 공유할 수 있도록 한다.

시스템에게 cell의 갯수나 cell 정보등을 알려주기 위해 data source 메소드들도 몇개 override한다.

1. section은 하나만 사용한다.

2. 모델로부터 cell의 갯수를 얻어와서 반환한다.

3. 캐스팅이 필요한 부분이기 때문에 안전하게 코딩하기 위해서 이렇게 하는건 이해하지만 optional, 캐스팅 등을 검사할 때마다 항상 탭 레벨이 깊어지는것이 좀 마음에 들지 않는다. 더 깔끔한 방법이 없을까?

4. info 정보로 card cell을 초기화한다.

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

2. 선택한 cell을 저장하고

3. segue를 통해 news view로 전환하도록 진입한다.

1. 카드를 선택해서 확장 transition이 발생할 때는 card view를 반환한다.

2. 되돌아올 때는 저장된 cell의 content view를 반환하여 frame을 구할 수 있도록 한다.

3. content view에 card view를 추가한다. 기본적으로 view의 removeFromSuperview()를 호출하여 떼어낸다면 super view와 관련된 constraint들도 같이 없어지기 때문에 새로운 super view와 관련된 constraint들을 추가해주어야 한다.

NewsViewController는 특별한 기능이 없기 때문에 SpreadViewController를 확장하여 재정의하는 메소드들만 살펴보자. 이 또한 크게 특별한 부분이 없다.

cardView를 반환한다는 것과 transition의 destination이 되었을 때 자신의 기본 view를 반환한다는 것이 다르다.

SpreadTransitionDelegate

---

이제 transition delegate로 사용할 클래스를 만들어볼 것이다.

조촐해보이지만 이제 여기에다가 각종 protocol을 확장시키면서 크기를 키워나갈 것이다.

UIViewControllerAnimatedTransitioning

다른 부분은 이전 포스팅 Cell Spread와 동일하기 때문에 넘어가고 animateTransition 부분을 자세히 보도록 하자.

1. snapshot view를 생성한다. card view를 담을 용도로만 사용할 것이기 때문에 UIView로 생성하고 크기를 from view로부터 계산하여 설정한다.

2. from view(card view)를 super view로부터 떼어내어 snapshot view로 옮긴다. 이 때 constraint를 다시 설정해주어야 화면에 제대로 보인다.

3. container view를 구성한다.

4. 최종 snapshot view의 최종 frame을 목적지 to view의 크기로 설정하고 layoutIfNeeded()를 호출하여 애니메이션이 재생되는 동안 layout을 계속 업데이트하면서 그리도록 한다.

5. from view(card view)를 snapshot view에서 to view controller로 옮긴다.

6. snapshot view를 삭제하고 transition을 종료한다.

결과 화면

---

마치며

---

코드를 전부 다 보여주는게 아니라 개념설명만 하고 핵심 코드를 보여주는 식으로 쓰고싶었는데 막상 설명을 하려고 보니 결국 거의 모든 코드를 다 보여주면서 작성하게 되었다. 다음 포스팅에서는 좀 더 간추려서 쉽게 이해할 수 있도록 노력해야겠다.