islefield314

(初心者向け)Swift3.0で初アプリ - 次画面を追加してみる

More than 1 year has passed since last update.

Swift3.0を使って簡単なiPhoneアプリを作ってみます
初心者向け)Swift3.0で簡単なiPhoneアプリを作ってみるで作ったシンプルなSwift3.0アプリに次画面を追加してみます

1. 次画面を追加します

  • Xcodeでアプリを開きます
  • ViewController.swiftの編集画面が開いている場合には、ViewController.swift編集画面の左上の「✕」印で閉じます

スクリーンショット 2017-06-21 10.35.19.png

  • 画面右下のフィルターに"View"と入力します。ViewContollerが候補として表示されます
  • ViewControllerをドラッグし主画面左側へドラッグして新しい画面を追加します

スクリーンショット 2017-06-21 10.38.06.png

  • 主画面と並ぶように位置を調整します

スクリーンショット 2017-06-21 10.38.44.png

2. ボタンを追加する

スクリーンショット 2017-06-21 10.45.48.png

  • 追加したボタンを選択肢ながらドラッグし(青い線が表示されます)、追加した次画面へドロップすると、黒いポッポアップメニューで選択肢が表示されます

スクリーンショット 2017-06-21 10.47.34.png

  • 選択肢から「Show」を選択すると、主画面と次画面の遷移が定義されます

スクリーンショット 2017-06-21 10.48.33.png

3 ナビゲーションを追加します

  • 主画面が選択されている状態(主画面の枠線が細い青線)で、Xcodeの画面上部のメニューから「Editor」→「Embed In」→「Navigation Controller」を選択します

スクリーンショット 2017-06-21 10.49.37.png

  • Navigation Controllerが追加されているのが確認できます

スクリーンショット 2017-06-21 14.44.55.png

4. シミュレーターで動作を確認します

  • シミュレーターで動作を確認します

スクリーンショット 2017-06-21 14.46.24.png

  • 「次ページへ」ボタンを押すと、次のページへ遷移することを確認します。次ページで画面左上の「Back」ボタンを押すと主画面へ戻ります

スクリーンショット 2017-06-21 14.46.41.png

5. 次画面に色を付け、ラベルを配置します

  • 真っ白ではつまらないので、次画面に色を付け、ラベルを配置します
  • シミュレーターで動作を確認します

スクリーンショット 2017-06-21 14.51.16.png

6. iPhoneで確認します

  • iPhoneへデプロイし、動作を確認します(画面キャプチャーは省略)

次のステップ

アプリのアイコンを登録してみます