[Swift] 네비게이션 바, 화면 이동

⚠️

블로그 주인장의 뇌용량이 부족하여 적어두는 개인 기록장이므로 말투가 이상할 수 있습니다. 저의 노트 필기를 보고 있다, 생각해 주세요〰️❗️

📌

Youtube [센치한개발자]님의 swift 강좌 : 네비게이션바, 화면이동 을 보고 공부하며 정리한 글 입니다.

 

오늘 만들 것: Move! 버튼을 누르면 다른 화면으로 이동하기

---

 

먼저, Xcode로 새 프로젝트를 만들면 아래와 같이 나타난다.

 

 

 

Attributes inspector를 보면

"Is initial View Controller"에 체크 표시되어 있는 걸 볼 수 있음.

이건 앱이 시작되고 스토리보드가 불러와지면 나오는 첫 번째 화면이 이 컨트롤러다〰️ 라는 뜻임!

이 부분이 체크 되면 오른쪽처럼 화살표가 나타나고

체크 안되어 있으면 화살표도 사라짐

 

 

본격적으로 시작해보자

오늘은 NavigationController를 사용할 거라, 원래 있던 뷰 컨트롤러는 지워주겠음!

 

NavigationController를 추가하면 이렇게 두 화면이 뜬다.

 

🗣

navi → root view 로 화살표가 그어져 있는데, navigation controller가 root view를 제어하겠다는 의미. ❗️navigation controller는 화면이 아님❗️ 일단 root view를 지우고, navigation controller의 "Is initial View Controller"에 체크해주기.

 

새로 ViewController를 추가해준 후, control 키를 누른 상태에서 아래 파란 박스부터 View Controller까지 드래그.

root view controller 선택하기

view controller에 Move! button 추가한 모습

 

 

view controller와 클래스를 매칭시켜주기

 

Connection 종류

• Action: 버튼 클릭 connection은 action!

• outlet: label 연결

• outlet collection

❗️자 이제 여기부터 중요함❗️

화면 이동하기

---

이동할 화면 만들기

 

새로운 view controller를 추가해준다.

view controller 하나 당 .swift 파일 하나가 필요함. 새로운 view controller의 swift 파일은 DetailController.swift라고 하겠음!

 

DetailController.swift 내용 작성

• DetailController.swift 만들면 있는 Foundation을 지우고 UIKit을 import 해야 함

  //import Foundation import UIKit

  왜?
  • Foundation → 필수 데이터 유형, 컬렉션 및 운영 체제 서비스에 액세스하여 앱의 기본 기능 계층을 정의
  • UIKit → 그래픽, 이벤트 기반 사용자 인터페이스를 구성하고 관리
  우리는 이벤트 기반 UI를 구성하니까 UIKit을 사용하면 된다!
•  

• DetailController 클래스 작성하기

  class DetailController : UIViewController { 
    override func viewDidLoad() { 
      super.viewDidLoad() 
      // Do any additional setup after loading the view. 
    } 
  }

  DetailController : UIViewController → DetailController가 UIViewController의 자식이라는 뜻
•  

그리고 새로운 view controller를 누르고

• Class → DetailController 로 연결

• Storyboard ID: DetailController로 정해준다(Storyboard ID는 맘대로 정해도 되지만 알아보기 쉽게 클래스명이랑 동일하게 설정함)

 

 

화면 이동하기

 

화면 A → 화면 B로 화면 이동 절차를 보자.

그럼 우리는 ViewController(A) → DetailController(B) 로 이동하는 거임!

🗣

1. 스토리보드에서 이동할 컨트롤러(B)를 찾는다 → ID가 DetailController인 컨트롤러를 찾는다. 2. 이동할 컨트롤러(B)로 이동한다. → DetailController로 이동한다.

 

 

위의 1, 2번을 ViewController.swift 파일에 적어주면 된다.

• 먼저, 컨트롤러를 찾아서 그 컨트롤러를 담아 놓을 변수가 필요함

  @IBAction func Click_moveBtn(_ sender: Any) { 
    // 변수 종류 - let(상수. 변하지 x), var(변수. 변함) 
    // DetailController를 찾아서 controller 변수에 넣기 
    let controller = self.storyboard?.instantiateViewController(identifier: "DetailController") 
  }

 

• 내가 속한 navigationController에 DetailController를 push하기

   @IBAction func Click_moveBtn(_ sender: Any) { 
     if let controller = self.storyboard?.instantiateViewController(identifier: "DetailController") { 
       // 여기서 navigationController 이게 맨 앞에 있는 navigation임 
       self.navigationController?.pushViewController(controller, animated: true) 
     } 
   }

  
  
  • controller 변수에 값이 있을 수도 있고 없을 수도 있다. 없는 걸 nil이라고 하는데, nil을 방지하기 위해 let 앞에 if 넣어주어 optional binding 해주기!
  • controller가 nil이 아니면 {} 내용이 실행된다
  
  
  

  ---

• 〰️ 완성 모습 〰️
• 이 부분은 뒤에 가서 자세히 다룰 예정
• ⭐️ Optional Binding ⭐️

 

 

Uploaded by Notion2Tistory v1.0.0