画面遷移

画面間を遷移するアプリケーションを作成します。

1 – プロジェクトを作成する

Welcomeウィンドウの[新規作成]セクションからiPhoneを選択します。

アプリをを作成する準備ができました。

 

2 – 2つの画面を作成

1. 画面遷移がわかりやすいようにスクリーンの背景色を設定します。「背景色」をクリックしてください。

2. カラーピッカーのカラーライブラリからオレンジ色を選びます。

3. 遷移先のスクリーンを追加します。ツールバーの「挿入」メニューから「スクリーン」を選択します。

4.遷移がわかりやすいように2つ目のスクリーンの背景色を設定します。「背景色」をクリックしてください。

5.カラーピッカーで緑色を選択します。

 

3 – 遷移ボタンを作成

1. ツールバーの「挿入」メニューから「ボタン」を選択します。

2. 画面内の好きな位置でドラッグを行ってボタンの形を決定します。

3.ボタンが押された時に画面遷移を行うために「BluePrintを編集」というボタンを押します。

4.ナビゲーションエリアのレイヤセクションから「他のスクリーン」をクリックします。

 

5.スクリーンピッカーから「スクリーン」を選んでドラッグ&ドロップします。

6. 「ボタンのアップ時」ノードと「スクリーンにPush」ノードを接続します。

7. ナビゲーションタブから「デザイン」をクリックしてデザインエディタに戻ります。

4 – 戻るボタンを作成

1.ツールバーの「挿入」メニューをクリックします。

2.「アイコンボタン」を選択します。

3.2つ目のスクリーンの好きな位置をドラッグしてボタンの位置を決定します。

4. インディケータの「アイコンボタン」セクションのアイコンピッカーをクリックします。

5.アイコンピッカーのセクションを「Material Icons」に切り替えます。

6.

① アイコンピッカーの検索欄に”back”と入力して検索を行い

②「戻る」アイコンを選んでダブルクリックで決定します。

7.インディケータの「アイコンボタン」セクションのカラーピッカーをクリックします。

8.カラーピッカーで白色を選択します。

9.インディケータの「アイコンボタン」セクション「BluePrintを編集」ボタンをクリックします。

10.エディタがBluePrintエディタに切り替わります。BluePrintエディタ上で右クリックしてノードピッカーを表示し「スクリーンを戻る」を選択しダブルクリックして設置します。

 

11. 「アイコンボタンのタップ時」ノードと「スクリーンを戻る」ノードを接続します。

5 – アプリの書き出しと実行

  1. ツールバーの「書き出し」メニューをクリックします。

2.どのフォルダに書き出すのか聞かれるので、自由なフォルダを選んで「開く」をクリックします。

3. Xcodeが自動的に立ち上がります。左上の実行ボタンからアプリの実行を行うことが可能です。

Xcodeがインストールされてない場合は「Xcodeが必要です」というウィンドウが表示されます。「Install」ボタンからXcodeをインストールしてください。

4.シュミレーターが開いてアプリの実行を行うことができます。