[Swift-Study] iOS 앱 개발 숙련 1주차 - 화면전환

화면 전환 방식

1. Present

현재 'ViewController'위에 새로운 'ViewController'를 표시하는 방식

일반적 → 아래에서 위로 올라오는 형태의 'modal interface' 구현에 사용

2. Push

애니메이션 사용 → 새로운 'ViewController'가 푸시 → 이전 'ViewController'를 숨기는 방식

3. 화면 전환 방법

3-1. 'Action Segue'를 활용한 화면 전환

STEP. 1

버튼을 클릭한 상태 → 'control' 누르며 전환할 화면으로 드래그 앤 드롭

STEP. 2

'Action Segue'에 있는 각 항목을 선택 → 화면전환 가능

* 주로 사용되는 두가지 방식 *

* Show *

'present'형태로 새로운 'ViewController'가 표시

(단, 'NavigationViewController'가 'Embed'되어 있는 경우, 다음 화면으로 'Push'됨)

 

'ViewController'를 선택 → 오른쪽 하단에 버튼을 눌러 'NavigationController'를 'embed' → 'push'형태로 화면 전환가능

* Present(프레젠트) *

지정된 'presentation style'을 사용 → 'ViewController'를 'present'

좌측 이미지처럼 'Segue'를 선택 → 우측 'Inspector(인스펙터)'를 보면, 이미지와 같이 'style'을 지정 가능

 

* 주로 사용되는 Modal PresentationStyle *

automatic	fullScreen	pageSheet	formSheet
시스템에서 선택한 기본 프리젠테이션 스타일	전체 화면을 덮는 프레젠테이션 스타일	기본 콘텐츠를 부분적으로 포함하는 프레젠테이션 스타일	화면 가운데에 콘텐츠를 표시하는 프레젠테이션 스타일

---

3-2. 'Manual Segue'를 활용한 전환

STEP. 1

첫번째 'ViewController' 위 노란색 버튼을 클릭한 상태 → control키 누른 상태 → 전환할 화면으로 드래그 앤 드롭

STEP. 2

'Manual Segue(메뉴얼 세그)'에 있는 각 항목을 선택 → 화면 전환가능

STEP. 3

 

생성한 'segue' 선택 → 오른쪽 'inspector' 영역에서 해당 'segue'의 'indentifier(인덴티파이어)' 지정

STEP. 4

첫번째, 'ViewController'의 코드로 돌아와, 'performSegue(퍼폼세그)'함수를 사용 → 생성한 'segue'를 활성화해 화면을 전환가능

@IBAction func tappedButton(_ sender: UIButton) {
  performSegue(withIdentifier: "showSecondView", sender: nil)
}

---

3-3. Code를 활용한 전환

'segue' 활용 X → 코드에서 직접 화면전환 방법

STEP. 1

첫번째, 'push'를 사용하기 위해 'storyboard'에서 'navigationController'를 'embed'

STEP. 2

코드에서 해당 'ViewController를 가져올 수 있도록, 'storyboard ID'를 설정

STEP. 3-1

첫번째 화면에서 버튼 클릭시 다음화면으로 'present(프레젠트)'되도록 아래와 같이 설정가능

'modalPresentationStyle(모델 프레젠테이션 스타일)'의 개념은 'segue'에서 배운 개념과 동일

@IBAction func tappedButton(_ sender: UIButton) {
  // NextViewController를 가져옵니다.
  guard let nextVC = self.storyboard?
    .instantiateViewController(
      identifier: "NextViewController"
    ) else { return }
  
  // PresentationStyle을 지정합니다.
  self.modalPresentationStyle = .fullScreen
  
  // NextViewController를 present 합니다.
  self.present(nextVC, animated: true)
}

STEP. 3-2

첫번째 화면에서 버튼을 클릭 → 다음화면으로 'push'되도록 아래와 같이 설정가능

(단, 앞서 'navigationController'를 'embed'하지 않았다면,

이곳에서 'navigationController'가 할당되지 않아,

'nil'이기 때문에 다음화면으로 'push' 불가능)

@IBAction func tappedButton(_ sender: UIButton) {
  // NextViewController를 가져옵니다.
  guard let nextVC = self.storyboard?
    .instantiateViewController(
      identifier: "NextViewController"
    ) else { return }
  
  self.navigationController?.pushViewController(nextVC, animated: true)
}

---

4. 이전 화면으로 돌아가는 방법

4-1. 'Unwind Segue'를 활용하여 돌아가기

STEP. 1

돌아가고자 하는 화면(예제에서는 첫번째 화면) 뷰컨트롤러 코드에 아래와같이 unwindToHome 함수 선언

@IBAction func unwindToFirst(_ unwindSegue: UIStoryboardSegue) {}

STEP. 2

버튼을 클릭한 상태 → control키 누른 상태 → 두번째 'ViewController'의 'Exit'으로 드래그 앤 드롭

STEP. 3

조금 전 생성한, 'unwindToFirst Action Segue'와 연결

---

Code를 활용한 돌아가기

'modally(모델)'하게 노출된 'VC'의 경우, 다음과 같이 버튼을 클릭했을 때 'self.dismiss' 함수를 호출하여 닫기

class SecondViewController: UIViewController {
  
  @IBAction func tappedButton(_ sender: Any) {
    self.dismiss(animated: true)
  }
  
  override func viewDidLoad() {
    super.viewDidLoad()
  }
}

('navigation'으로 'push'한 'VC'인 경우)

'navigationController'의 'popViewController' 함수를 호출하여 뒤로 이동 가능

class SecondViewController: UIViewController {
  
  @IBAction func tappedButton(_ sender: Any) {
    self.navigationController?.popViewController(animated: true)
  }
  
  override func viewDidLoad() {
    super.viewDidLoad()
  }
}