[19일차] [LED 전광판 앱] 화면 전환 구현 실습

오늘은 어제 개념적으로 배운 화면 전환 구현에 대해 실습을 진행해볼것이다.

화면 전환을 위해 새로운 프로젝트를 만들어주고, 우선 메인 스토리보드를 띄워보자.

쨘~

그리고 어제 배운 Navigation Controller를 스토리보드에 끌어와보자!

검색하면 쉽게 찾을 수 있다. 그런데 문제는 늘 해왔듯 끌어와서 보면..

이렇게 웬 생뚱맞은 뷰가 2개나 더 생겨버린다! Navigation Controller는 말 그대로 화면 전환을 담당하는 친구니까 내버려두고, 디폴트로 생성된 Root View Controller를 선택하고 지워주자.

그러면 이렇게 딱 두 화면만 남는데, 여기서 끝이 아니라 원래 있던 뷰를 새로운 Root View Controller로 설정해줘야한다.

방법은 IBOutlet 변수 추가했던 것 처럼 Navigation Controller에 우클릭 후 설정할 뷰로 이어주면 된다!

그럼 Relation Segue에 Root View Controller가 보이는데, 그걸 선택해주면 된다.

그럼 가운데에 이렇게 새로운 Segue가 생긴다!

Root View Controller를 설정할 때 자동으로 인스펙터의 5번째 탭 메뉴가 열렸을텐데, 거기서도 하나 해줄 작업이 있다.

체크 해제되어있는 Is Initial View Controller를 체크해줘야한다.

그럼 원래 뷰에 박혀있던 화살표가 Navigation Controller 쪽으로 붙으면서 앱 초기 화면이 Navigation Controller가 되는 것을 확인할 수 있다!

이렇게!

그리고 초기 화면에 화면 전환을 위한 버튼 4개를 만들어보자. 그런데 구현 방식은 4개 다 비슷비슷해서...
이번 포스팅에서는 Segue로 Push 방식만 다뤄보려한다.

그리고 View Controller를 추가하여 전환되었을 때의 화면도 만들어보자.

어떤 방식으로 전환되었는지 알기 위한 Label 하나, 초기화면으로 돌아가기 위한 Back 버튼을 하나 추가해주었다.

일단 Code를 이용하는 화면 전환 방식은 당연하게도 소스 코드를 통해 전환을 구현한다.

따라서 화면 전환을 위한 소스 파일을 하나 만들어줄 필요가 있다!

프로젝트 폴더에 Cocoa Touch Class 파일을 추가해보자! 이름은 각 방식을 구분할 수 있는 수준으로 임의로 설정!

그럼 이런식으로 코드로 존재하는 ViewController 하나가 만들어지게 된다.

그런데 우리는 이미 스토리보드에서 ViewController 하나를 생성했으니, 그것과 이 코드를 연결해보자.

방법은 스토리보드에서 연결하고 싶은 ViewController를 선택 -> 인스펙터 4번째 탭 메뉴에서 Class를 소스코드의 이름으로 지정!

 

그 다음에 Navigation Controller의 Segue로 Push 버튼을 우클릭 드래그해서 해당 View Controller에 붙여주면 다음과 같은 메뉴를 볼 수 있다! 여기서 Show를 선택해주자.

그럼 이렇게 상단 탭에 Back 버튼이 나옴과 동시에 화살표로 이어진 특정 표시가 노출된다. 이걸 Segueway 객체라고 한다.

이 Segueway 객체는 단방향 화면 전환을 담당하는 객체라고 생각하면 된다.

그리고 일단 앱을 빌드해보면 화면 전환이 구현되어 있음을 알 수 있다! 상단 Back 버튼과 스와이프를 통한 초기 화면 회귀도 가능하다.

 

그렇지만 Code로 이를 구현하는 방법은 아직 실습해보지 않았으므로, 다시 돌아와서 SeguePushVC의 Assistant화면을 호출해보자.

    @IBAction func tapBackButton(_ sender: UIButton) {
        self.navigationController?.popViewController(animated: true)
    }

그리고 Back 버튼에 Action함수를 연결해서 다음과 같이 Back 버튼을 눌렀을 때 popViewController 메소드를 호출하도록 해보자.

빌드해서 확인해보면 이제 중앙의 Back버튼도 잘 동작하는 것을 확인해볼 수 있다.

 

결과물 (Segue로 Push)

 

 

패스트캠퍼스 바로가기 : http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

> 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.