Swift言語で始めるiOSアプリ入門 – 画面遷移その1

技術

お久しぶりです。松山事務所の石丸です。

現在埼玉に出張中でして、折角だから松山にはないAppBankへ、iPhoneのフィルムとケースを買いに行ってきました。

もうほとんどが6系の商品で、5sのグッズはレジ横にちょこっとあるだけでしたが、フィルムを貼り替えてもらって満足です^^

さて今回の内容ですが、画面遷移をやりたいと思います。

Swift言語で始めるiOSアプリ入門 - データの保存

前回までは1画面で完結するアプリでしたが、普段使っているアプリはいくつもの画面を遷移しますよね。今回は画面遷移の方法を試していきます。

開発環境はOS X EI Capitan(ver10.11.2)、Xcode(ver7.2)になります。

 

 icon-check 下準備

いつも通り iOSの Single View Applicationプロジェクトを作成したら、今回は画面を2つ追加します。

Swift言語で始めるiOSアプリ入門 - 画面遷移その1_画像1

 

各画面のレイアウトは次のようになります。

【メイン画面】

メイン画面

アプリ起動時の最初の画面になります。編集ボタンと入力エリア、ヘルプボタンを配置します。

【編集画面】

編集画面

確定ボタンと入力エリアを配置します。

【ヘルプ画面】

ヘルプ画面

閉じるボタンとラベルを配置します。

 

メイン画面を中心に編集画面、ヘルプ画面を行き来するようにしていきます。

 

 icon-check ヘルプ画面の表示

例えばヘルプ画面のような、ただ表示して閉じるだけの画面の場合は、ほとんどコードを書かずに実現できます。

まずはメイン画面のヘルプボタンタップでヘルプ画面へ遷移するようにしてみます。InterfaceBuilder上で、メイン画面のヘルプボタンをcontrolキーを押しながら、ヘルプ画面へドラッグ&ドロップします。

Swift言語で始めるiOSアプリ入門 - 画面遷移その1_画像5

 

ドロップすると遷移方法を選択するダイアログが表示されます。

Swift言語で始めるiOSアプリ入門 - 画面遷移その1_画像6

PushとModalは非推奨なので見向きもせず、通常の画面遷移はShowで、ダイアログ表示がPresent Modallyらしいです。
ここではShowを選択しましょう。

メイン画面とヘルプ画面をつなぐSegueオブジェクトが作成されました。

Swift言語で始めるiOSアプリ入門 - 画面遷移その1_画像7

たったこれだけでメイン画面からヘルプ画面の表示は完了です。

 

 icon-check ヘルプ画面からの帰り道

次はヘルプ画面からメイン画面に戻るところを作ります。

行きを作る手順と同じようにドラッグ&ドロップで出来ちゃいそうなのですが、帰り道を作るには少しコードを書く必要があります。 (調査不足かも…)

ViewController.swiftは以下のようになります。

追加したのは15,16行目の backFromHelp メソッドです。

処理はなにも書いていません。ViewController.swiftはメイン画面のコントローラーです。ヘルプ画面からの戻り口を作ったイメージでしょうか。

戻り口を作ったらInterfaceBuilderに戻って、閉じるボタンをExitへドラッグ&ドロップします。

Swift言語で始めるiOSアプリ入門 - 画面遷移その1_画像8

 

ドロップするとViewController.swiftに追加した backFromHelp が表示されるので選択してください。

Swift言語で始めるiOSアプリ入門 - 画面遷移その1_画像9

以上でヘルプ画面からメイン画面へ戻る動作も完了です。

 

 icon-check 実行

さて実行してみましょう。

アプリを起動するとメイン画面が表示され、ヘルプボタンをタップするとヘルプ画面へ遷移しました。ヘルプ画面で閉じるボタンをタップするとメイン画面へ戻ります。

Swift言語で始めるiOSアプリ入門 - 画面遷移その1_画像10

画面を表示して戻るだけならこんな感じでとても簡単です。

ただ別画面を使用する場合、よくあるのは遷移元からパラメータを渡されて、遷移元に戻るときには結果を返すといったシナリオです。

今回のヘルプ画面も遷移元の画面に応じて表示する内容を切り替えたりすると親切ですね。

 

次回は、データのやり取りを行う画面遷移について書きたいと思います。

以上、ありがとうございました。

 

̃Gg[͂ĂȃubN}[Nɒlj