読者です 読者をやめる 読者になる 読者になる

からたちねみち

歌を作っています。Vocaloid、主に結月ゆかり、またはiPhoneアプリ開発

戻るボタンを作って前画面に戻る - unwind segue

iPhoneアプリ開発

前回ボタンを使った簡単な画面遷移方法を記載しました。

 

swift-bettychang.hatenadiary.jp

 

今回は画面遷移した後、元の画面に戻る設定を追加します。

 

目次

  • 戻る用ボタンを用意する
  • 戻るボタンの制約を設定
  • unwind segueを記述する
  • 戻るボタンからExitへsegueを引っ張る
  • 実機で動作確認

 

戻るボタンを用意する

f:id:bettychang:20160313041607p:plain

  • 戻る用ボタンを遷移先画面の左上あたりに配置

戻るボタンの制約を設定

f:id:bettychang:20160313041929p:plain

  • 左上に0で設定

 

戻るボタンはわかりやすいように文字と色を変えてみました。

画面全体はこのようになっています。

f:id:bettychang:20160313042154p:plain

 

では、戻るボタンを押したら始めの白い画面に遷移する設定を入れましょう。

 

unwind segueを記述する

戻る用の設定をviewController.swiftに記述します。

注意点としては、unwind segueは遷移先画面に紐づくViewController.swiftファイルに記述するということです。

ではファイルのツリーからViewController.swiftファイルを選択し、下記を記述します。

 

    @IBAction func back(segue:UIStoryboardSegue){//戻るボタン用

        print("back")

    }

 

f:id:bettychang:20160313042714p:plain

 

 戻るボタンからExitへsegueを引っ張る

ストーリーボード画面に戻ります。

遷移先ViewControllerの上部を見るとアイコンが3つ並んでいます。

このうち右端のExitというアイコンを使います。

f:id:bettychang:20160313043310p:plain

  1. 戻るボタンを右クリック
  2. Exitアイコンへドラッグして矢印を引っ張りドロップする

 

先ほどコードに記載したunwind segue設定の文字「back」が表示されますので、選択します。

f:id:bettychang:20160313043624p:plain

  • backを選択

 

これで前の画面に戻る設定が完了しました。

設定したunwind segueはツリーとボタンのConnection inspector画面に下記のように表示されます。

f:id:bettychang:20160313043926p:plain

 

実機で動作確認

ではビルドして動作確認してみましょう。

f:id:bettychang:20160313044154p:plain

  • 画面遷移するボタンをクリック

 

2つめのビューコントローラ画面に遷移しました。

 

f:id:bettychang:20160313044247p:plain

  • 戻るボタンをタップ

 

f:id:bettychang:20160313044332p:plain

無事最初の画面に戻れました。

 

以上です。ご覧頂きありがとうございました!