앱에서의 화면전환은 크게 수평적인 방법과 수직적인 방법으로 나뉩니다.
수평적인 방법의 대표적인 예는 이전 글에서 포스트 했던 탭바를 이용하는 방법입니다.
수직적인 방법의 대표적인 예는 이번 글에서 정리할 네비게이션 컨트롤러를 이용하는 방법입니다.
아이폰의 환경설정은 네비게이션 컨트롤러를 이용하는 대표적인 예입니다.
환경설정처럼 원하는 주제에 맞는 세부사항을 확인할 때 네비게이션 컨트롤러가 이용됩니다.
1. 프로젝트를 생성하고, 스토리보드에서
Editor - Embed In - Navigation Controller를 클릭합니다.
2. 생성된 뷰컨트롤러에서 Attributes Inspector에서 Title을 설정해줍니다.
Title을 설정해주는 이유는 다른 뷰 컨틀롤러와 구분하기 편하기 위함입니다.
3. 컴포넌트 객체에서 ViewController를 끌어다 하나 만들고
뷰 컨트롤러를 구분하기 위해 Title을 설정해줍니다.
4. 뷰 컨트롤러를 조작하기 위해서는 ViewController클래스를 상속받는
ViewController파일이 필요합니다.
처음 생성되는 ViewController.swift는 메인화면의 뷰를 조작할때 이용되므로, 새로운 파일을 생성합니다.
File - New - File(혹은 cmd + N)을 눌러 Cocoa Touch Class파일을 생성합니다.
(Swift파일을 생성해도 되지만 import와 클래스 상속을 해줘야하는 번거로움이 있습니다.)
5. 새로 만들어진 파일(SecondViewController.swift)를 두번째 뷰컨트롤러에 연결합니다.
두번째 뷰 컨트롤러를 클릭한 뒤 Identity Inspector에서 class를 아래와 같이 지정해줍니다.
6. 다시 처음 뷰 컨트롤러로 돌아와 컴포넌트 객에체서
Bar Button Item을 끌어다 메인화면 Title옆에 놓습니다.
7. Bar Button Item의 이름을 적당히 변경해준 후,
오른쪽 클릭으로 두번째 뷰 컨트롤러에 끌어다 놓습니다.
아래와 같이 나오면 Show를 눌러 Segue를 생성해 줍니다.
8. 앱을 실행해보면 아래의 그림과 같이 Bar Button Item을 누르면 두번째 뷰 화면으로 넘어가는 것을 볼 수 있습니다.
9. 다음은 버튼과 세그웨이를 이용해 화면을 전환해보는 것을 정리 하겠습니다.
첫번째 뷰 컨트롤러에 버튼을 하나 만들고 적당히 이름을 바꿔 줍니다.
10. 버튼을 오른쪽 클릭해 두번째 뷰 컨트롤러에 끌어다 세그웨이를 Show로 만들어줍니다.
만들어진 세그웨이를 클릭하여 Identifier를 설정해주고, BarButtonItem도 마찬가지로 설정해줍니다.
11. 두번째 뷰 컨트롤러에 세그웨이를 표시할 수 있도록 Label을 하나 만듭니다.
Label에 값을 전달 받을 수 있도록 buttonValue 변수를 하나 선언해두고
viewDidLoad에 Label의 텍스트를 표현할 수 있게 barORbutton.text = buttonValue를 선언해줍니다.
12. 첫번째 뷰컨트롤러에서 prepare함수를 정의해 줍니다.
prepare함수는 전처리 메소드라고 하며, 세그웨이가 실행되기 이전에, 값의 저장같은 특정한 동작을 처리해줍니다.
13. 아래와 같이 전처리 메소드 prepare에 코드를 추가해 줍니다.
- let secondViewController = segue.destination as! SecondViewController :
세그웨이의 목적지를 SecondViewController로 설정
- if segue.identifier == "barButtonSegue" :
앞서 설정했던 세그웨이의 idnetifer를 활용하여 무슨 버튼을 눌렀는지 확인.
14. 마지막으로 앱을 실행해 확인하면 누르는 버튼에따라 Label이 바뀜을 확인할 수 있습니다.
이상으로 네비게이션컨트롤러에 대한 정리를 마치고 소스코드는 github에 올려놓겠습니다. 깃허브가기
'iOS' 카테고리의 다른 글
탭바(TabBar) 이용하기 (0) | 2018.04.17 |
---|---|
색 지정 방법 (0) | 2018.04.16 |
맵뷰(MapView)- 핀(어노테이션) 띄우기 (0) | 2018.04.14 |
맵뷰(MapView)이용하기 (0) | 2018.04.14 |
PickerView이용하기 (0) | 2018.04.12 |