Programing Note

千里の道も一歩から

My Apps > チュートリアル > キッチンタイマーアプリの作りかた > Step2 Storyboardの編集 その1

Tweet

Advertisement



Event

・サイトを引っ越ししました。2016/10/15

新しいサイトはこちらです。

・サイトをリニューアルしました。2015/12/29

Related Articles:

キッチンタイマーアプリの作りかた

Update on February 27, 2016

確認環境:Xcode 7.2

以下のステップで説明していきます。

Step2 Storyboardの編集 その1

プロジェクトを作成したら、次はStoryboardの編集をしていきましょう。


最終的には、こんな感じになるようにStoryboardを作成していきます。

でわ、Storyboardを見てみましょう。

エディターエリアの左下端のボタンを押して「Document Outline」を表示しましょう。

プロジェクトを新規作成するときに、「Single View Application」を選択したので、

Storyboardには、1つだけ、View Controller があります。


まず、Navigation Controllerを追加しましょう。

追加の方法は、こちらにまとめています。

Navigation Controllerを追加する方法


それから、View Controllerをもう1つ追加しましょう。

1. ユーティリティエリアを表示。

2. ユーティリティエリアの下側の「Object Liblary」から「View Controller」を選択。

3. Storyboardの余白の箇所にドラッグアンドドロップする。

わかりやすくするために、View Controller のクラスファイル名を変えます。


まず、元からある View Controller のクラスファイル名から変えましょう。

1. Storyboard で、元からある View Controller を選択。

2. ユーティリティエリアで、アイデンティティインスペクタを選択。

3. 「Custom Class」セクションの「Class」が「ViewController」となっていることを確認。


これを「SettingViewController」に変更します。

変更の方法は、こちらにまとめています。

クラスファイル名を変更する

変更後は、「Custom Class」セクションの「Class」が「SettingViewController」となっていることを確認。


次は、先ほど追加した View Controller のクラスファイル名を変えましょう。

1. Storyboard で、先ほど追加した View Controller を選択。

2. ユーティリティエリアで、アイデンティティインスペクタを選択。

3. 「Custom Class」セクションの「Class」が空欄となっていることを確認。

4. Xcodeのメニューから、「File」->「New」->「File」を選択。

5. 左側は「iOS Source」を選択、右側は「Cocoa Touch Class」を選択し、「Next」ボタンを押下。

6. 「Class」に「KitchenTimerViewController」を入力。

 「Subclass of」は「UIViewController」を選択し、「Next」ボタンを押下。

7. 生成場所を聞かれるので、そのままで「Create」ボタンを押下。

8. Storyboard に戻り、「Custom Class」セクションの「Class」に「KitchenTimerViewController」を選択。


これで、「SettingViewController」と「KitchenTimerViewController」の

2つの ViewController を作成しました。


以下のステップで説明していきます。

inserted by FC2 system