キッチンタイマーアプリの作りかた
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
Step6 IBOutletやIBActionなどの設定 その2
「SettingViewController」のIBOutletやIBActionなどの設定をしたので、
次は、「KitchenTimerViewController」の設定をしていきます。
「KitchenTimerViewController」の以下のオブジェクトの設定をします。
・start Button
・reset Button
・timer Label
・progress Image View
・timer View
start ButtonのOutlet設定
1. ナビゲーターエリアでStoryboardを選択。
2. StoryBboardの「KitchenTimerViewController」を選択。
3. ツールバーのアシスタントエディタを押し、分割画面を表示。
4. 分割画面右側の上端のファイルが表示されている箇所が「KitchenTimerViewController.h」になっていることを確認。
5. 分割画面左側の Storyboard の KitchenTimerViewController の start Button を選択。
6. start Button 上で Controlキーを押しながら、分割画面左側の「KitchenTimerViewController.h」の
@interface と @end の間にドラッグアンドドロップする。
7. 吹き出しが表示されるので、以下の通り設定し、Connectボタン を押下する。
Connection：Outlet
Name：startPauseButton
Type：UIButton
Storage：Weak
8. 分割画面右側の「KitchenTimerViewController.h」に Outlet が作成されていることを確認。
以下の赤丸の箇所にカーソルを合わせると、分割画面左側の Storyboard の KitchenTimerViewController で
Outlet接続された start Button が青みがかって浮き出て表示されることでも確認できます。
9. 分割画面左側の Storyboard の KitchenTimerViewController の start Button 上で右クリックし、
Outlet が作成されていることを確認。
次は、start ButtonにActionを設定します。
start ButtonのAction設定
1. 分割画面左側の Storyboard の KitchenTimerViewController の start Button を選択。
2. start Button 上で Controlキーを押しながら、分割画面左側の「KitchenTimerViewController.h」の
@interface と @end の間にドラッグアンドドロップする。
3. 吹き出しが表示されるので、以下の通り設定し、Connectボタン を押下する。
Connection：Action
Name：pushStartPause
Type：id
Event：Touch Up Inside
Storage：Sender
4. 分割画面右側の「KitchenTimerViewController.h」に Action が作成されていることを確認。
5. 分割画面左側の上端のファイルが表示されている箇所を「KitchenTimerViewController.m」に変更。
6. 分割画面左側の「KitchenTimerViewController.m」に Action が作成されていることを確認。
同様にreset ButtonのOutletも設定します。
reset ButtonのOutlet設定
Connection：Outlet
Name：resetButton
Type：UIButton
Storage：Weak
同様にreset ButtonのActionも設定します。
reset ButtonのAction設定
Connection：Action
Name：pushReset
Type：id
Event：Touch Up Inside
Storage：Sender
同様にtimer LabelのOutletも設定します。
timer LabelのOutlet設定
Connection：Outlet
Name：timerLabel
Type：UILabel
Storage：Weak
同様にprogress Image View のOutletも設定します。
progress Image ViewのOutlet設定
Connection：Outlet
Name：progressImageView
Type：UIImageView
Storage：Weak
同様にtimer View のOutletも設定します。
timer ViewのOutlet設定
Connection：Outlet
Name：timerView
Type：UIView
Storage：Weak
「KitchenTimerViewController」の設定はひとまずここまで。
以下のステップで説明していきます。