오늘은 Navigation Controller 에 대하여 알아보았다. Navigation Controller 를 사용해보니, iOS 가 안드로이드보다 훨씬 뷰 계층 구성이 쉬운 것 같다.
Navigation Controller
스택 형태로 계층적으로 뷰를 쌓는 방식. 사용자는 항상 스택의 최상단 뷰를 보게 되고,
새로운 뷰를 보여줄 땐 뷰를 스택에 푸시하고, 뒤로가기의 경우 스택에서 팝하는 개념
스택 구조를 가지는 특성상 위와 같은 계층적 구조가 도드라지게 사용되는 '설정 페이지' 같은 요소에 특히 자주 사용된다.
간단한 실습
실습 목표
왼쪽의 로그인 화면에서 '아직 계정이 없으신가요?' 를 눌렀을 때, 오른쪽의 회원가입 화면으로 이동하고
회원가입 화면에서 상단의 Back 버튼을 눌렀을 때 다시 로그인 화면으로 돌아오는 기능 구현
1. 커스텀 ViewController 만들기
로그인, 회원가입 화면에 사용할 ViewController 를 각각 만들어준다.
import UIKit
class LoginViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
}import UIKit
class RegisterViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
}2. Main.storyboard 에서 Navigation Controller 추가하기
그러나 현재 Xcode 기준으로, 이러한 방식으로 추가하면 RootViewController Scene 이
자동으로 TableViewController 로 생성되어버리게 된다. 따라서 필자는 현재 테이블 뷰를 사용하지 않을 것이기
때문에 Navigation Controller 만 유지하고, 오른쪽을 다른 뷰로 대체하여 사용했다.
또한 Navigation Controller 에 스토리보드 Entry Point 를 지정해줘야한다.
3. 생성한 뷰를 Navigation Controller 의 Root View Controller 로 만들어주기
control 키를 누른 채 Navigation Controller 에서 새로 만든 뷰로 드래그 앤 드랍을 하게 되면
새로 만든 뷰를 Root View Controller 로 지정해줄 수 있다.
아래와 같이 화살표가 생기면 정상적으로 진행된 것이다.
같은 방식으로 회원가입 페이지로 생성한 뒤, Login View Controller 에서 control 키를 누른 채
회원가입 페이지로 드래그 앤 드랍하여 Show 옵션을 선택해준다. (스택에 푸시하는 개념이다)
4. UI 컴포넌트 꾸며주기
Navigation Controller 연결까지 하고, 페이지를 입맛에 맞게 꾸며주게 되면 아래와 같이 완성된다.
또한 시뮬레이터를 구동해보면 계층 방식으로 페이지 이동까지 정상적으로 진행되는 것을 확인할 수 있다.
UIImageView, UITextField, UIButton 등으로 로그인 및 회원가입 폼, 버튼 등을 구성하였다.
5. 더 알아볼 것
- UIKit 이 어떤 프레임워크인지 정확히 알아보기
- 프로그래매틱하게 Navigation Controller 조작하는 방법 공부해보기
