LoginSignup
83

More than 3 years have passed since last update.

Swiftのページ遷移【Navigation Controller】

Last updated at Posted at 2019-06-26

iOSのページ遷移といったらNavigationController(Bar)を用いた遷移だと私は思っています。
Navigation Controllerを用いたページ遷移に関してまとめられたqiita記事があまりなかったので、今回備忘録として残すことにしました。

Navigation Controllerに関しては、こちらの記事をご覧ください。

因みに、Navigation Controllerの追加方法は、Navigation Controllerの管理下にしたいViewを選択しながら、メニューからEditor→Embed In→NavigationControllerを選ぶ。

この記事で理解できること

  • Navigation Controllerを用いた、ページ遷移の仕方

ページ遷移の種類

【Navigation Controllerを用いたページ遷移には2種類あります】

  • プッシュ遷移: 横にスライドできるやつ
    プッシュ遷移40.gif

  • モーダル遷移: 下から出てくるやつ
    モーダル遷移.gif

モーダル遷移とプッシュ遷移の使い分け

プッシュ遷移

私は基本的にアプリ内ではプッシュで画面を遷移すべきだと思う。なぜなら、上のgifでもやっているように、スワイプで前の画面に戻ることができるからだ。

モーダル遷移

モーダルで遷移した場合、元の画面には、それ用に作られた操作を実行しない限り、元の画面には戻ることができないので、"前の画面に簡単に戻って欲しくない時"に用いるべきだと思う。

開発環境

  • macOS Mojave バージョン10.14.4
  • Xcode Version 10.2 (10E125)
  • Swift 5.0

【プッシュ遷移の仕方】

(事前にNavigation Controllerは追加されている前提です)

遷移元と同じStoryboard内で遷移する場合(ソースコードなしver)

以下のように、ボタン, 次の画面となるViewControllerをsegueで繋げるだけで完了

かなり単純にページ遷移を設定することができます。
last2.gif

遷移元と同じStoryboard内で遷移する場合(ソースコードありver)

1. segueの作成

  1. ViewController上部のアイコンから遷移先のView上までcontrolを押しながらドラッグする。
  2. セグエの種類を選ぶポップアップが出現するのでShowを選び。
  3. 2つの画面の間にsegueのアイコンが現るのでクリックして選択状態にし、identifierを設定する。今回は"goNext"に設定。

segue.gif

2. segueのアクションをソースコードに追加

(buttonをソースコードに紐付けといてください)

MainViewController.swift
@IBAction func goNextButton(_ sender: Any) {
    performSegue(withIdentifier: "goNext", sender: nil)
}

遷移元と異なるStoryboardへ遷移する場合

今回は、Main.StoryboardのSecondViewController→Second.StoryboardのSecondMainViewControllerにプッシュ遷移します。

1. 遷移先(遷移元とは異なるStoryboard)のViewControllerのStoryboardIDを設定する

(これは同一のStoryboard内ではユニークである必要がある)
今回は、Second.Storyboard内のSecondMainViewControllerに"secondMain"というStoryboardIDを設定しました。
segueAnotherStoryboard.gif

2. ページ遷移のアクションを遷移元のソースコードに追加

SecondViewController.Swift
@IBAction func moveAnotherStoryboard(_ sender: Any) {
    let storyboard: UIStoryboard = UIStoryboard(name: "Second", bundle: nil)//遷移先のStoryboardを設定
    let nextView = storyboard.instantiateViewController(withIdentifier: "secondMain") as! SecondMainViewController//遷移先のViewControllerを設定
    self.navigationController?.pushViewController(nextView, animated: true)//遷移する
}

プッシュ遷移で、今いるNavigation Stackの先頭のViewに遷移する(戻る)場合

仮に、FirstViewController→SecondViewController→ThirdViewControllerの順にプッシュ遷移してきて、今ThirdViewControllerにいる場合に、FirstViewControllerに戻ると設定します。

ページ遷移のアクションを遷移元のソースコードに追加

ThirdViewController.Swift
@IBAction func popButton(_ sender: Any) {
    self.navigationController?.popToRootViewController(animated: true)
}

【モーダル遷移の仕方】

モーダル遷移を使う場合は、基本的に遷移元と遷移先のStoryboardが異なる場合が多いと思うので、そのやり方を掲載します。

別のstoryboardの先頭のViewに遷移する場合

今回は、Main.StoryboardのSecondViewController→Second.StoryboardのSecondMainViewControllerにモーダル遷移する場合を考えます。

1. 遷移先のNavigationControllerのidentity(StoryboardID)を設定する

今回は"navigation"に設定します。
modal.gif

2.ページ遷移のアクションを遷移元のソースコードに追加

SecondViewController.Swift
@IBAction func button(_ sender: Any) {
    let storyboard: UIStoryboard = UIStoryboard(name: "Second", bundle: nil)//遷移先のStoryboardを設定
    let navigationController = storyboard.instantiateViewController(withIdentifier: "navigation") as! UINavigationController//遷移先のNavigationControllerを設定
    self.present(navigationController, animated: true, completion: nil)//遷移する
}

1つ前のstoryboardの一番最後のViewへモーダル遷移

今回は、Main.Storyboard内の(FirstViewController→SecondViewController)→Second.Storyboard内の(FirstViewController→SecondViewController)の順にStoryboard内はPush遷移、Storyboard間はモーダル遷移してきて、現在Second.Storyboard内のSecondViewControllerにいるとします。
以下のソースコードで行なっている遷移は、Second.Storyboard内のSecondViewController→Main.Storyboard内のSecondViewControllerに遷移することです。

SecondViewModel.Swift
@IBAction func backToStoryboard(_ sender: Any) {
    self.dismiss(animated: true, completion: nil)
}

上手くいくと、以下のgifのようになります。
last.gif

最後に

最後まで読んでいただきありがとうございます。
Swift初心者ですが、RxSwift, RxCocoaを使ってMVVMで開発を進めていきたいと思います。

参考

【Swift/iOS】遷移元画面への戻り方
https://capibara1969.com/203/
【iOS】画面遷移の基礎【Swift3.0】
https://qiita.com/fromage-blanc/items/b3cb0e7833a1d5659463
Xamarin.Forms Navigation Overview
http://www.nuits.jp/entry/2017/05/27/170909
Swiftでの画面遷移についてまとめ
https://qiita.com/superman9387/items/c006ced215352f28a7b9

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
83