2019年2月14日スポンサーリンク今回は画面遷移を実装していこうと思います。画面遷移を実装するには、StoryBoardで実装するコードで実行するといった大きく分けて2つのやり方がありますが、今回はコードで実装していきます。この2つの選択肢でコードを採用しているかというと、StoryBoardで実装する場合にはSegueを使用しますが、そうした場合に1つのStoryBoardに全てのViewControllerを集約する形になり、共同開発の場合にコンフリクトの嵐になってしまいます。僕はコードで実装する方を推奨しています。記事内容が出てくるようにする画面遷移のやり方iOSアプリでは画面遷移の仕方が2通りあります。Modal遷移Push遷移この2つがあります。それぞれについて説明していきます。その前に下準備として、前回までにapiから記事を取得してTableViewに表示させたので記事セルをタップしたら記事詳細ページに遷移するというようにしていこうと思います。apiからTableViewに表示する流れはこちらの記事で解説しています。iOSアプリを開発する上で必須なスキルが、TableViewを使えるようにすることではないかなと思います。前回こちらの記事...なので以下の2つを作成しましたArticleDetail.storyboardArticleDetailViewController.swift作成の手順を説明していきます。ArticleDetailViewController.swiftの作成まずArticleDetailViewController.swiftを作成していきます。File」を選択すると作成できて、その場所に置かれます。今回はSampleAppの下に置くことにしたのでSampleAppを右クリックしました。Classを選択します。ファイル名を指定します。今回はArticleDetailViewControllerとしました。Xibファイルは作成しないのでチェックは入れないようにしましょう。そのまま進むとこのようになって作成完了です。次にArticleDetail.storyboardの作成をします。File」を選択します。今回は「Storyboard」を選択します。同様に作成することができますが、storyboardの場合作成されたものは中身がからっぽになります。ここからViewControllerを追加していかないといけません。手順は、このように右下のリストから「ViewController」をドラッグ&ドロップしてきます。Controller」にもチェックを入れるようにしましょう。これは最初のViewControllerであるということを表します。次にこのStoryboard上のViewControllerと実際にこのViewControllerの挙動が書かれているClassを紐づける必要があります。その手順は下のように、Classの部分に「ArticleDetailViewController」と設定します。ある程度補完が効くようになってるので最初の数文字打って、エンターを押せば大丈夫です。紐付けができている場合はClassの下のModuleの部分が薄い文字で「none」から「SampleApp」に変わったように自分の作成してるプロジェクト名に変わります。遷移先の画面を作成したのでここからは実際に遷移する実装をしていきましょう。今回はPush遷移で実装していきます。NavigationControllerを設置していきます。記事一覧画面のStoryboardはMain.storyboardなのでここに設置していきます。Controller」を選択すると作成することができます。これでNavigationControllerが設置されました。実際に画面遷移の実装をしていきます。今回は記事セルをタップしたときにその記事の詳細ページに飛ぶようにしたいのでセルをタップしたときに遷移するようにコードを書いていきます。セルをタップしたとき実行されるようにするにはdidSelectRowAtのメソッドに書けばよかったですね。これに関しては、こちらの記事で解説しています。【Swift入門】初心者でもわかるTableViewを実装しようこんばんは。}}このように実装しました。nil)のnameの部分を1文字でも間違えるとクラッシュしてしまうので注意です。Controller」のチェックをいれたViewControllerがインスタンス化されます。navigationControllerに対してインスタンス化したviewcontrollerを引数として渡してpushViewControllerを呼ぶと遷移することができます。このように画面遷移できるようになりました。NavigationControllerを設置したのでデフォルトでナビゲーションバーが出現するようになり戻る機能も備わっています。記事内容が出てくるようにする無事画面遷移することが出来るようになりましたが、遷移した画面は何もでてこないので記事の詳細が出てくるようにします。Articleのbodyが出てくるようにします。このようにStoryboardにlabelを設置しました。レイアウトはテキトーに上下左右マージンを20pxにしました。行数は0に設定指定しています。次にArticleDetailViewController.swiftでこのように変更しました。}}bodyLabelをIBOutletで設定して、articleのbodyが入るようにしています。記事ごとにarticleが異なるので実際にどのarticleが入るかは記事一覧で選択されたarticleをここに渡すようにしないといけません。}}このように書き換えました。vcの部分ですがArticleDetailViewControllerにキャストするように書き換えました。することでarticleプロパティに値をセットできるようになります。セットするarticleはタップされた記事なのでarticles[indexPath.row]で取り出すことができます。画面遷移と実際に記事の中身が表示されるようになりました!今回のコードはこちらでも確認できるのでよかったらご確認ください。当サイトはエックスサーバーで運営しています。方はこちらの記事を参考にしてください。仮想通貨1【windows】FFmpegをインストールする手順2FFmpegで動画変換!各OSごとのインストール方法と使い方まとめ3【簡単】MacにHomebrewをインストールする方法と基本的な使い方4macOSにXcodeをインストールしよう5HomebrewでMacにFFmpegをインストールする方法と使い方6BootCampでMacにWindows10をインストールする7〜初心者でもわかるswift入門〜基本文法からiOSアプリを開発するまで8【swift入門】apiを叩いてTableViewに表示させる9【Xcode】ファイル追加削除するときの注意10【入門】Reactチュートリアルをやりながら実践入門お問い合わせこちらからお願いいたします。