Switching View and Passing Data(1) - UI
Intro
안녕하세요. 오늘은 어플리케이션을 만드는데 기본 중에 기본인 화면 간 전환과 이에 따른 데이터의 전달에 대해 알아보도록 하겠습니다. 방법들을 나열하고 하나하나 설명하는 것보다는 하나의 간단한 어플리케이션을 만들어보면서 해당 어플리케이션에는 어떤 방법이 사용되었는지를 살펴보면서 알아보는 시간을 갖도록 하겠습니다.
오늘 만들 어플리케이션은 간단한 “친구들의 연락처 리스트” 어플리케이션입니다. 기본으로 내장되어 있는 연락처 어플리케이션의 간단한 버전이라고 생각하시면 될 것 같습니다.
오늘 만들 어플리케이션에 들어가는 방법은 화면 전환에는 segue를 이용한 화면 전환, 데이터 전달에는 unwind segue라는 데이터 전달 방법을 사용하여 만들어 보겠습니다.
그럼 시작해보도록 하겠습니다.
이번 포스팅에서는
TableView에 대한 직접적인 설명은 포함하고 있지 않습니다.TableView가 낯선 분이시라면 제가 작성한 [ios] Basic TableView - UI을 먼저 읽고 오시는 것을 권장합니다.
화면 구성
먼저 화면을 구성하는 하는 것들 부터 세팅해보도록 하겠습니다. 먼저 프로젝트를 생성하면 기본으로 제공되는
ViewController에 친구 연락처의 목록을 보여주는Table View와Table View Cell을 올리고Table View Cell의identifier는friendcell이라고 지정을 합니다.
그 다음에는 뷰 전환에 대한 순서를 자동으로 스택으로 저장해주는
Navigation Controller를 우리가 만든Table View를 갖고 있는ViewController에 설정해보도록 하겠습니다.
설정을 하고 난 후의
storyboard는 다음과 같습니다.다음으로는
Navigation Controller의title을 지정해주고 친구를 추가해주는 화면으로 넘어가기 위한 버튼Bar Button Item을 추가하고title을Add로 지정합니다.
이젠 친구의 연락처를 입력해 줄
ViewController를 하나 올리고Add버튼을우클릭+드래그하여 새로 올려준ViewController위에서 내려놓습니다. 그렇게 내려놓으면 해당 액션에 대해 선택할 수 있는 옵션들이 나오는데 여기서Action Segue의show를 선택합니다.
이는
ViewController들의 스택을 쌓는데 친구 목록을 보여주는ViewController의 위에 친구의 연락처 정보를 입력할 수 있는ViewController를 쌓는다는 의미입니다. 즉 화면 전환을 의미합니다.이렇게
push된ViewController에서 밑에 있는 (이전의)ViewController로 갈 때는pop된다고 표현을 합니다.이젠 친구의 연락처를 입력하는
ViewController를 설정해보도록 하겠습니다. 먼저 친구 연락처들의 목록을 보여주는ViewController와 마찬가지로title을 설정하고 저장하고 이전 화면으로 돌아가기 위한Bar Button Item을 추가해주어야 합니다.
이를 위해서는 반드시 먼저
Navigation Item을 올려준 후title을 설정해야합니다.
그 후
Bar Button Item을 그 위에 올려준 후title을Save로 바꿔줍니다.
그리고 마지막으로 정보를 입력하는
Text Field를 올려줍니다.
이러한 과정들을 거치고 나면 전체적인 흐름과 구성은 다음과 같습니다.
마무리
이번 포스팅에서는 화면 구성을 먼저 해보았습니다. 이번 포스팅에서는 segue와 Navigation Controller를 이용한 화면 전환을 알아보았습니다. 다음 포스팅에서는 본격적인 코딩을 해보는 시간을 갖도록 하겠습니다. 감사합니다.