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

ベティーのブログ / 作曲、ボカロ、主に結月ゆかり

ベティーです。歌を作っています。Vocaloid、主に結月ゆかり。

ボタンで画面遷移する - Segue(セグエ)を使用して複数のビューコントローラーを移動

iPhoneアプリ開発

もっとも単純な画面遷移方法です。

ボタンをクリックしたら、別のビューコントローラーに画面遷移します。

 

 目次

  • ボタンを配置する
  • ボタンの制約を設定する
  • 新しいビューコントローラーを用意する
  • セグエを設定する
  • 実機で動作確認

 

ボタンを配置する

ビューコントローラーに画面遷移用のボタンを配置します。

f:id:bettychang:20160310221036p:plain

  • ボタンを画面中央にドラッグアンドドロップ

 

ボタンの制約を設定する

制約は適当でよいです。今回はビューコントローラーの中央に配置します。

f:id:bettychang:20160310221254p:plain

  1. Horizontally in Containerにチェック
  2. Vertically in Containerにチェック
  3. Add 2 Constraintsを実行

*Horizontally in ContainerはX軸(横軸)、Vertically in ContainerがY軸(縦軸)の中央配置の意味

 

 

新しいビューコントローラーを用意する

移動先のビューコントローラーを用意します。

方法はボタンなどと同じで、画面右下のパーツ郡から画面中央にドラッグします。

 

f:id:bettychang:20160310221637p:plain

  • ビューコントローラーをドラッグアンドドロップ

黄色い丸に四角が入ったアイコンがビューコントローラーです。

 

f:id:bettychang:20160310221836p:plain

配置すると、このように画面中央と左側のツリーに、新しいビューコントローラーが表示されています。

 

セグエを設定する

では、セグエを設定します。セグエというのは複数のビューコントローラーを接続するためのオブジェクトです。

セグエをつなぐとビューコントローラー間を移動できるようになります。

f:id:bettychang:20160310222538p:plain

  1. ボタンを右クリック
  2. 新しく作ったビューコントローラーへドラッグすると青い矢印が伸びるのでドラッグアンドドロップ

 

下記のウインドウがポップアップしますので、Showを選択します。

f:id:bettychang:20160310222825p:plain

  • Showを選択

 

これでセグエが設定できました。

2つのビューコントローラーが矢印で繋がれていればOKです。

f:id:bettychang:20160310223309p:plain

 

では動作確認してみましょう。動作確認用に移動先のビューコントローラーの背景色を変えておきます。

f:id:bettychang:20160310223621p:plain

 

実機で動作確認

ビルドしてみましょう。

 

f:id:bettychang:20160310223824p:plain

最初のビューコントローラーが表示されました。

では、中央のボタンをクリックします。

f:id:bettychang:20160310223850p:plain

青い画面が現れました。

無事画面遷移できました。

 

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