[ iOS ] 내비게이션 컨트롤러 (1) - 레이아웃

공부한 내용을 정리한 글입니다.

 

문제

동작 화면은 '메인화면'과 '수정화면' 두 개로 만든다.  또한 '메인화면'에서 '수정화면'으로, '수정화면'에서 '메인화면'으로 메시지(데이터)를 전달할 수 있게 하고 이미지의 확대/축소 상태를 '수정화면'에서 제어할 수 있도록 한다. 

 

 

구현 순서

1. 내비게이션 컨트롤러 추가
2. '메인화면' 레이아웃 구성
3. '수정화면' 추가 및 레이아웃 구성
4. 바 버튼으로 화면 전환되도록 구현
5. 뷰 전환과 함께 메시지 전달하기
6. '수정화면'에서 '메인화면'의 이미지 제어하기

 

 

최종 결과

 

 

 

 

 

 

 

 

 

 

---

1.  내비게이션 컨트롤러 추가

내비게이션 컨트롤러를 추가할 뷰 클릭 후 [Editor/Embed in/Navigation Controller]를 선택하여 내비게이션 컨트롤러를 추가한다.

 

 

 

 

 

 

 

 

 

 

 

---

2. '메인화면' 레이아웃 구성

• 오른쪽 뷰의 bar를 클릭하여 Title을 '메인화면'으로 지정한다.
• bar에 'Bar Button Item'을 추가한 뒤 Bar Button Item의 System Item을 'Edit'으로 수정한다.
• Lable을 추가하여 '메시지'로 수정한다.
• Lable 아래에 Text Field를 추가한다
• Image View을 추가한 후 image에 원하는 이미지를 할당한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

3. '수정화면' 추가 및 레이아웃 구성

• 스토리 보드에 새로운 ViewController를 추가한다.
• 프로젝트의 새 파일로 Cocoa Touch Class를 추가한 후, 새롭게 추가한 ViewController의 class로 지정한다.

코코아 터치 클래스 Cocoa Tuch Class
코코아(Cocoa)란 애플 환경에서 맥이나 iOS용 애플리케이션을 제작하기 위한 도구들의 모음이다. 보통 UI 기능들을 많이 사용하고 있다. 그런데 맥과 다르게 iOS의 경우 터치와 관련된 여러 기능들이 추가되었는데 이를 지원하기 위한 도구들의 모음이 코코아 터치(Cocoa Tuch)이다. 그리고 UI를 iOS용으로 변경하고 다양한 터치 관련 기능을 클래스로 만들어 놓은 것이 코코아 터치 클래스(Cocoa Tuch Class)이다. 뷰 컨트롤러에 관한 클래스도 이 코코아 터치 클래스에 있다.
간단하게 말하자면 iOS를 위한 UI Framework이다. Cocoa Tuch Framework에는 UIKit, Foundation, CoreData, MapKit, CoreAnimation 등이 있다.

나중에 자세히 공부하도록 하자.

 

• 새 ViewController의 Title을 '수정화면'으로 수정한다.
• '메인화면'의 Bar Button Item인 'Edit'을 마우스 오른쪽 버튼을 클릭하여 '수정화면'으로 드래그한다. 그리고 Action Segue의 Show로 설정한다.

Segue (세그웨이) :  (한 가지 노래·주제·장소 등에서 다른 것으로 부드럽게) 넘어가다[이어지다]  - 옥스퍼드 영한사전 즉, 앱에서는 화면 전환을 뜻한다.
Segue 종류	설명
Show	가장 일반적인 Segue. 새 화면으로 이동한다. stack 구조로, 원래 화면 위에 새 화면이 쌓인다.
Show Detail	split View 구조에서 원래 화면을 Master, 새화면을 Detail로 표시한다. 아이폰에서는 Present Modally와 똑같아 보이지만 아이패드에서는 화면이 둘로 분할되어 보인다.
Present Modally	새 화면이 원래 화면 위를 덮는다. 원래 화면은 새 화면 뒤에 그대로 존재한다.
Presentation as Popover	아이패드에서 팝업창을 띄운다.  아이폰 앱에서는 Show Detail과 마찬가지로 큰 의미가 없다.

 

• Navigation Bar에서 원하는 Bar 색상과 Title 색을 설정한다. Segue를 Show로 지정했을 시 뜨는 뒤로가기 버튼의 색은 Bar와 Title 색을 지정한 곳의 View/Tint를 통해 설정할 수 있다.
• 스토리보드 중앙에 있는 Segue(세그웨이)를 클릭하여 Identifier을 'editBarButton'으로 수정한다. (만약 같은 화면으로 전환하는 세그웨이가 많은 경우, 뷰 전환 방법을 구분하는 용도로 사용할 수 있다. 지금 문제에서는 Id를 사용하지는 않을 것 같다.)
• '메인화면'과 동일하게 '메세지' Lable과 Text Field를 추가한다. 그리고 '수정화면'에서 '메인화면'으로 넘어갈 '완료' 버튼을 추가한다.
• '수정화면'에서 '메인화면'의 이미지를 제어하기 위해서 switch를 추가한다. switch의 상태를 보여줄 Lable도 추가한다.

 

'수정화면' 완성본

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

공부 자료

https://m.blog.naver.com/jdub7138/220393890771
화면이동 - Segue
https://stackoverflow.com/questions/28733936/change-color-of-back-button-in-navigation-bar
Change color of Back button in navigation bar
https://seoyoung612.tistory.com/entry/iOS-Cocoa-Cocoa-TouchFoundation-UIKit-개념-알아보기
https://coding-sojin2.tistory.com/entry/Cocoa-Touch-프레임워크
CocoaTuch
Do It! 스위프트로 아이폰 앱 만들기 개정 5판