Swift

【Swift入門】画面遷移をコードで実装しよう

今回は画面遷移を実装していこうと思います。

画面遷移を実装するには、

  • StoryBoardで実装する
  • コードで実行する

といった大きく分けて2つのやり方がありますが、今回はコードで実装していきます。

なぜこの2つの選択肢でコードを採用しているかというと、StoryBoardで実装する場合にはSegueを使用しますが、そうした場合に1つのStoryBoardに全てのViewControllerを集約する形になり、共同開発の場合にコンフリクトの嵐になってしまいます。なので僕はコードで実装する方を推奨しています。

画面遷移のやり方

iOSアプリでは画面遷移の仕方が2通りあります。

  • Modal遷移
  • Push遷移

この2つがあります。

それぞれについて説明していきます。

その前に下準備として、前回までにapiから記事を取得してTableViewに表示させたので記事セルをタップしたら記事詳細ページに遷移するというようにしていこうと思います。

apiからTableViewに表示する流れはこちらの記事で解説しています。

【swift入門】apiを叩いてTableViewに表示させるはじめに iOSアプリを開発する上で必須なスキルが、TableViewを使えるようにすることではないかなと思います。 前回こちらの記事...

なので以下の2つを作成しました

  • ArticleDetail.storyboard
  • ArticleDetailViewController.swift

作成の手順を説明していきます。

ArticleDetailViewController.swiftの作成

まずArticleDetailViewController.swiftを作成していきます。新しいファイルを作成する場合はそのファイルを置きたい階層のフォルダを右クリックして「New File」を選択すると作成できて、その場所に置かれます。今回はSampleAppの下に置くことにしたのでSampleAppを右クリックしました。
そうするとこのような画面がでてくるので今回はCocoa Touch Classを選択します。

ファイル名を指定します。今回はArticleDetailViewControllerとしました。Xibファイルは作成しないのでチェックは入れないようにしましょう。

そのまま進むとこのようになって作成完了です。

ArticleDetail.storyboardの作成

次にArticleDetail.storyboardの作成をします。
先程と同様に「New File」を選択します。

今回は「Storyboard」を選択します。

同様に作成することができますが、storyboardの場合作成されたものは中身がからっぽになります。
ここからViewControllerを追加していかないといけません。

手順は、このように右下のリストから「ViewController」をドラッグ&ドロップしてきます。
「Is Initial View Controller」にもチェックを入れるようにしましょう。これは最初のViewControllerであるということを表します。

次にこのStoryboard上のViewControllerと実際にこのViewControllerの挙動が書かれているClassを紐づける必要があります。
その手順は下のように、Classの部分に「ArticleDetailViewController」と設定します。
ある程度補完が効くようになってるので最初の数文字打って、エンターを押せば大丈夫です。

ちゃんと紐付けができている場合はClassの下のModuleの部分が薄い文字で「none」から「SampleApp」に変わったように自分の作成してるプロジェクト名に変わります。

NavigationControllerの設定

遷移先の画面を作成したのでここからは実際に遷移する実装をしていきましょう。

今回はPush遷移で実装していきます。

まずはNavigationControllerを設置していきます。

記事一覧画面のStoryboardMain.storyboardなのでここに設置していきます。

このようにViewControllerを選択した状態で「Editor」「Embed In」「Navigation Controller」を選択すると作成することができます。

これでNavigationControllerが設置されました。

画面遷移のコードを実装

実際に画面遷移の実装をしていきます。
今回は記事セルをタップしたときにその記事の詳細ページに飛ぶようにしたいのでセルをタップしたときに遷移するようにコードを書いていきます。
セルをタップしたとき実行されるようにするにはdidSelectRowAtのメソッドに書けばよかったですね。これに関しては、こちらの記事で解説しています。

【Swift入門】初心者でもわかるTableViewを実装しようこんばんは。 今回はアプリ作成に欠かせないのに加えて、特有な設定が多くて初心者が挫折しやすいTableViewを作成する手順をまとめてい...

extension ViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let vc = UIStoryboard(name: "ArticleDetail", bundle: nil).instantiateInitialViewController()!
        navigationController?.pushViewController(vc, animated: true)
    }
}

このように実装しました。


UIStoryboard(name: "ArticleDetail", bundle: nil)

nameの部分を1文字でも間違えるとクラッシュしてしまうので注意です。
instantiateInitialViewControllerというのは先程Storyboardを作成したときに「Is Initial View Controller」のチェックをいれたViewControllerがインスタンス化されます。

navigationControllerに対してインスタンス化したviewcontrollerを引数として渡してpushViewControllerを呼ぶと遷移することができます。

実際にビルドします。

このように画面遷移できるようになりました。

NavigationControllerを設置したのでデフォルトでナビゲーションバーが出現するようになり戻る機能も備わっています。

記事内容が出てくるようにする

無事画面遷移することが出来るようになりましたが、遷移した画面は何もでてこないので記事の詳細が出てくるようにします。
Articlebodyが出てくるようにします。

とりあえずこのようにStoryboardlabelを設置しました。レイアウトはテキトーに上下左右マージンを20pxにしました。行数は0に設定指定しています。

次にArticleDetailViewController.swiftでこのように変更しました。


import UIKit

class ArticleDetailViewController: UIViewController {

    @IBOutlet weak var bodyLabel: UILabel!

    var article: Article?

    override func viewDidLoad() {
        super.viewDidLoad()
        bodyLabel.text = article?.body
    }
}

bodyLabelIBOutletで設定して、articlebodyが入るようにしています。
記事ごとにarticleが異なるので実際にどのarticleが入るかは記事一覧で選択されたarticleをここに渡すようにしないといけません。


extension ViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let vc = UIStoryboard(name: "ArticleDetail", bundle: nil).instantiateInitialViewController()! as! ArticleDetailViewController
        vc.article = articles[indexPath.row]
        navigationController?.pushViewController(vc, animated: true)
    }
}

このように書き換えました。
まずlet vcの部分ですがArticleDetailViewControllerにキャストするように書き換えました。
そうすることでarticleプロパティに値をセットできるようになります。
セットするarticleはタップされた記事なのでarticles[indexPath.row]で取り出すことができます。

ビルドしてみます。

画面遷移と実際に記事の中身が表示されるようになりました!

今回のコードはこちらでも確認できるのでよかったらご確認ください。