キッチンタイマーアプリの作りかた
Update on February 27, 2016
確認環境：Xcode 7.2
以下のステップで説明していきます。
- Step1 プロジェクト新規作成
- Step2 Storyboardの編集 その1
- Step3 Storyboardの編集 その2
- Step4 Storyboardの編集 その3
- Step5 IBOutletやIBActionなどの設定 その1
- Step6 IBOutletやIBActionなどの設定 その2
- Step7 プログラミング その1
- Step8 プログラミング その2
Step5 IBOutletやIBActionなどの設定 その1
「SettingViewController」と「KitchenTimerViewController」の２つの ViewController を作成し
それぞれにオブジェクトを配置しました。
こんな感じになりました。
次は、IBOutletやIBActionなどの設定をしていきます。
「SettingViewController」の以下のオブジェクトの設定をします。
・set Button
・timer Piker View
timer Piker ViewはOutletの設定と、delegate と dataSource の設定をします。
timer Piker ViewのOutlet設定
1. ナビゲーターエリアでStoryboardを選択。
2. StoryBboardの「SettingViewController」を選択。
3. ツールバーのアシスタントエディタを押し、分割画面を表示。
4. 分割画面右側の上端のファイルが表示されている箇所が「SettingViewController.h」になっていることを確認。
5. 分割画面左側の Storyboard の SettingViewController の timer Piker View を選択。
6. timer Piker View 上で Controlキーを押しながら、分割画面左側の「SettingViewController.h」の
@interface と @end の間にドラッグアンドドロップする。
7. 吹き出しが表示されるので、以下の通り設定し、Connectボタン を押下する。
Connection：Outlet
Name：timerPicker
Type：UIPickerView
Storage：Weak
8. 分割画面右側の「SettingViewController.h」に Outlet が作成されていることを確認。
以下の赤丸の箇所にカーソルを合わせると、分割画面左側の Storyboard の SettingViewController で
Outlet接続された timer Piker View が青みがかって浮き出て表示されることでも確認できます。
9. 分割画面左側の Storyboard の SettingViewController の timer Piker View 上で右クリックし、
Outlet が作成されていることを確認。
timer Piker Viewの delegate と dataSource の設定
1. 分割画面左側の Storyboard の SettingViewController の timer Piker View を選択。
2. timer Piker View 上で Controlキーを押しながら、「SettingViewController」の
上端の黄色の丸いアイコンにドラッグアンドドロップする。
3. ポップアップ画面が表示されるので、「delegate」を選択。
4. 同じ操作で「dataSource」も選択。
次は、set Button です。set Button にはセグエ（Segue）の設定をします。
set Buttonの設定
1. ツールバーのスタンダードエディタを押し、分割画面を閉じる。
2. ナビゲーターエリアでStoryBboardを選択。
3. StoryBboardの「SettingViewController」set Button を選択。
4. timer Piker View 上で Controlキーを押しながら、分割画面左側の
「KitchenTimerViewController」までドラッグアンドドロップする。
5. ポップアップ画面が表示されるので、「Push」を選択。
6. 「SettingViewController」と「KitchenTimerViewController」が矢印でつながったことを確認。
7. 「SettingViewController」と「KitchenTimerViewController」の間の丸いアイコンを選択
8. ユーティリティエリアのアトリビュートインスペクタを表示し以下の通り設定。
Identifier：toKitchenTimer
「SettingViewController」の設定はひとまずここまで。
以下のステップで説明していきます。