サトリクのこだわりのモノ紹介

【Xcode/Swift5】画面遷移のチートシート。Segueを画面遷移とSegueを使わない画面遷移を徹底解説

この記事では、Xcode、Swiftでの最も重要な画面遷移の処理を徹底解説します。

 

 

開発環境

この記事は、1月26日から書き始めています。

【Xcode】11.3
【Swift】5.1.3

画面遷移とは

サトリク

ボタンを押したとき次の画面に遷移することです。

画面遷移の画像

 

今回紹介する画面遷移の仕方は、大きく分けて以下の3つです。

  1. Segueのみを使った画面遷移
  2. Segueとコードを使った画面遷移
  3. コードのみを使った画面遷移

1.Segueのみを使った画面遷移

まずは、一番簡単なSegueセグエのみを使った画面遷移方法を解説します。

今回、ボタン、ラベル、ControllerViewの配置の仕方は解説しません。

手順1:ボタンと画面2を繋げる

Buttonをcontrolを押しながら画面2にドラッグする画像

ボタンをcontrolを押しながら画面2にドラッグ&ドロップしてください。

手順2:画面遷移の仕方を選択する

ここでは、画面遷移の仕方を選択します。

今回は、Present Modallyを選択しましょう。

これで完成です!

試しに、command + rで実行してしてみてください。ボタンを押すと画面遷移するはずです。

サトリク

さっきからSegueセグエSegueセグエ言ってますが、Segueとは、このことです。

Segueはこれの画像

Segueとコードを使った画面遷移

次は、Segueとコードを使った画面遷移をご紹介します。

Segueとコードを使った画面遷移は、4ステップでできます。

  1. ViewControllerと画面を繋げる
  2. SegueにIDをつける
  3. ボタンをコードと連携する
  4. ボタンのActionにコードを付け足す

手順1:ViewControllerと画面を繋げる

ViewControlerを画面2に繋げる画像

ViewControllerを遷移したい画面にControlを押しながら、ドラッグ&ドロップしてください。

そうすると、Segueができるはずです。

View Controllerの画像

ちなみに、ViewControllerとは、このマークのことです。

手順2:SegueにIDをつける

手順1で作成したSegueにIDをつけましょう。

Segueにidentifierをつける

①Segueをクリックしてください。

このようなマークをクリックしてください。

③identifierにtoNextと入力してください。

もし、②のマークの項目が出ない場合は、command + option + 0を押すと出てきます。

手順3:ボタンとコードを連携する

画面1を選択した状態で、command + option + controlを押しながら、Enterを押してください。

そうすると、右側に、コードのウィンドウが出てきます。

ボタンとコードを連携させる画像

サトリク

こんな感じになってればOK!

ボタンをコードに接続する

次に、用意したボタンを右のコードの17行と18行の間controlを押しながらドラッグ&ドロップしてください。

そうすると、次のような画面になるので、同じように入力してください。

ボタンをコードに連携する画像

NameにnextBtnと入力し、他の項目が画像と違ってないか確認し、Connectを押してください。

Name以外デフォルトですので、変わってることはないと思いますが。

手順4:ボタンのActionにコードを付け足す

先ほど追加したコードの中に、以下の一行を入れるだけでできます。

サトリク

コードが以下のように、なっていたらOKです。

では、実行してみてください!

ボタンを押すと画面遷移するはずです!

コードで画面遷移を実装することで、こんなこともできます!

サトリク

この画面遷移の仕方をすると以下のようなコードを書くこともできます!

if文で、画面遷移するときとしないときを分けることができるのです!

これだと、ただ単にSegueでつなぐより、色々な処理をつけて遷移することができるというメリットがあります!

コードのみを使った画面遷移

先ほどは、Segueを繋いで画面遷移をしていましたが、今度はSegueを使わないで画面遷移を実装しようと思います。

コードのみを使った画面遷移は、5ステップでできます。

  1. 画面2のクラスを作成する
  2. storyboardとクラスを連携する
  3. storyboardIDをつける
  4. ボタンをコードと連携する
  5. ボタンのActionにコードを付け足す

手順1:画面2のクラスを作成する

まずは、遷移先のクラスファイルを作成します。

command + nでファイルを新規作成しましょう。

ファイルのテンプレートを選択する画像

そしたら、以下のようにテンプレートを選択する画面になるので、Cocoa Touch Classを選択しましょう。

クラス名を入力する画像

クラス名に、NextViewControllerと入力し、Nextボタンを押しましょう。

クラスの格納フォルダーを選択する画像

次は、入れるフォルダーを選択します。今回作っているプロジェクトフォルダーを選択しましょう。

ファイルがあるよって画像

このように、NextViewController.swiftファイルができたらOKです。

手順2:storyboardとクラスを連携する

先ほど作成したクラスをstoryboardと連携させましょう。

main.storyboardのクラスと紐付け

Main.storyboardを選択し、画面2(遷移先画面)の上部のバーを選択します。

右側の項目のClassに先ほど作ったNextViewControllerを選択してください。

手順3:storyboardIDをつける

次は、SegueのIDを使わない代わりに、storyboardのIDを使います。

storyboardIDを入力する。

先ほど入力した項目の下に、Storyboard IDがあるので、そこにtoNextと入力しましょう。

入力したら必ず、Use Storyboard IDという項目にチェックしてください。

サトリク

Use Storyboard IDにチェックつけ忘れてエラーが起きることが多々あります笑

手順4:ボタンをコードと連携する

コードの画面を出す画像

画面1を選択し、Option + command + controlを押しながらenterを押します。

そうすると、右側に画面に対応するコード編集画面を表示します。

ボタンをcontrolを押しながら17行目と18行目の間に、ドラッグ&ドロップします。

ボタンの紐付けの画像

NameにnextBtnと入力し、他の項目が画像と違ってないか確認して、Connectを入力しましょう。

サトリク

コードが以下のようになってたらOKです。

手順5:ボタンのActionにコードを付け足す

先ほど作成した、ボタンのコードに以下のコードを付け足します。

このコードの"toNext"は、遷移先のstoryboardのIDです。

as!の次に書いているNextViewControllerは、遷移先のstoryboardのクラスです。

self.present(vc, animated: true, completion: nil)は、簡単に言うと画面の遷移の仕方です。

たったこの二行を入れるだけで、画面遷移ができます!!

サトリク

これで完成です!

まとめ

ここまで、画面遷移の仕方について解説してきました。

画面遷移は、アプリを作る際に最も重要で基本的な機能なので、この記事で紹介した方法は完璧に覚えておきましょう。

サトリク

他にもたくさんのSwift、Xcodeの記事を書いていますので、みてみてください。