이 튜토리얼을 통해 만든 프로토타입.
3. 애니메이션 없이 장면 전환하기
앞 페이지에서 간단한 네비게이션과 모달을 다루어 봤다.
이번에는 애니메이션 없는 appear 연결을 하고, 스토리보드에 씬들을 추가해서 프로토타입을 완성해 보자.
앞 페이지에서 만든, '일본원전 방사능 공포' 씬을 복제한 뒤 '구독중' 버튼에서 appear로 연결한다.
appear로 연결한 경우 네비게이션 바가 나타나지 않으므로 뷰 컨트롤러의 애트리뷰트 인스펙터에서 Simulated Metrics의 Top Bar를 'Translucent Navigation Bar'로 선택한다.
'구독중' 버튼을 눌렀을 때의 동작을 appear로 연결한다.
씬 하나를 추가한 뒤 뷰 컨트롤러를 CHContentScrollViewController로 만들고 Runtime Attributes 항목의 'xibName' 키에 'JapanRadiation_Detail.xib'를 입력합니다.
콘텐트 스크롤 씬을 추가합니다.
xib 파일을 구성합니다. 뷰의 구성요소가 동일하므로 지난 페이지에서 만든 뷰를 복사해 와서 수정하는 방식도 좋습니다.
xib 파일을 구성합니다.
다시 모달 씬을 제공합니다. 모달씬은 이전에 사용한 모달과 완전히 동일한 뷰입니다. 모달 뷰를 새롭게 만들어도 좋지만 우리는 예전에 사용한 모달 뷰를 다시 제공할 예정입니다.
스토리보드가 커기면 뷰들 간에 연결을 하기가 어렵습니다. 지금 정도의 크기만 가지고도 현재의 씬에서 모달 뷰로 세그웨이 연결을 하기가 어렵습니다. 그러므로 그림과 같이 도큐멘트 아웃라인을 열고, 이벤트를 시작할 바 버튼 오브젝트를 선택한 뒤 모달 뷰로 세그웨이 연결을 합니다.
모달 뷰를 제공합니다.
모달 세그웨이를 연결한 결과는 아래 그림과 같습니다. 세그웨이를 선택하면 출발지 씬의 버튼과 목적지 씬이 하이라이트 됩니다.
모달 세그웨이 연결 결과
모달에서 선택이 이루어져 모달이 내려갈 때 진행될 씬을 추가합니다. MyIssue 에서는 내가 관심을 가지고 있지 않은 주제를 이 씬처럼 보여줄 것입니다.
모달의 선택에 의해 나타날 씬 추가
테이블 뷰에서 '경제'라는 레이블이 있는 셀을 선택하면 모달이 내려갈 예정입니다. '경제' 셀 위에 버튼을 추가한 뒤 버튼 타이틀을 지웁니다. 버튼으로부터 씬의 뷰 컨트롤러로 세그웨이를 연결합니다.
모달을 내리는 디스미스 이벤트 연결
시나리오 상으로, [가상화폐 '비트코인']이라는 주제를 관심 주제로 추가하는 장면을 위해, 해당 주제에 관심 별이 ON으로 되어있는 씬을 추가한 뒤 appear 세그웨이로 연결합니다. .
관심주제 추가 씬으로 appear 장면전환 연결
시나리오의 완성을 위해 [가상화폐 '비트코인'] 주제의 기사 나열 씬을 추가하고 push 세그웨이 연결을 합니다.
주제 기사 나열 씬을 push로 연결
전체 스토리보드 흐름은 아래 그림과 같습니다.
전체 스토리보드 흐름