LoginSignup
0
0

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-08-22

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へデプロイし、動作を確認します(画面キャプチャーは省略)

次のステップ

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0