キッチンタイマーアプリの作りかた
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
Step4 Storyboardの編集 その3
「SettingViewController」と「KitchenTimerViewController」の2つの ViewController を作成しました。
「SettingViewController」にオブジェクトの配置はしたので、
「KitchenTimerViewController」にオブジェクトの配置をしていきます。
最終的に、「KitchenTimerViewController」はこんな感じになります。
「KitchenTimerViewController」には、以下のオブジェクトを配置します。
・start Button
・reset Button
・timer Label
・timer View
・progress Image View
・background Image View
App Storeに公開したアプリには、AD Bannar View も配置されていますが、こちらについての説明は省略します。
でわ、実際にこれらのオブジェクトを配置していきましょう。
まず、background Image View から。
こちらは、「SettingViewController」での手順と全く同じです。
同様に start Button を配置します。
1. ユーティリティエリアの下側の「Object Liblary」から「Button」を選択。
2. KitchenTimerViewController にドラッグアンドドロップする。
この start Button の背景に表示するファイルをプロジェクトに追加します。
「button_green01.jpg」を追加します。
start Button の表示を設定します。
1. Button を選択します。
2. ユーティリティエリアのアトリビュートインスペクタを表示。
3. 「Button」セクションで以下の通り設定。
Title:start
Font:System Bold 36.0
Text Color:Black Color
Background:button_green01.jpg
start Button のサイズを調整します。
1. Button を選択します。
2. ユーティリティエリアのサイズインスペクタを表示。
3. 「View」セクションで以下の通り設定。
X:70
Y:100
Width:180
Height:70
Autoresizing:以下の通り
同様に reset Button を配置します。
1. ユーティリティエリアの下側の「Object Liblary」から「Button」を選択。
2. KitchenTimerViewController にドラッグアンドドロップする。
この reset Button の背景に表示するファイルをプロジェクトに追加します。
「button_red01.jpg」を追加します。
reset Button の表示を設定します。
1. Button を選択します。
2. ユーティリティエリアのアトリビュートインスペクタを表示。
3. 「Button」セクションで以下の通り設定。
Title:reset
Font:System Bold 36.0
Text Color:Black Color
Background:button_red01.jpg
reset Button のサイズを調整します。
1. Button を選択します。
2. ユーティリティエリアのサイズインスペクタを表示。
3. 「View」セクションで以下の通り設定。
X:70
Y:190
Width:180
Height:70
Autoresizing:以下の通り
同様に timer Label を配置します。
1. ユーティリティエリアの下側の「Object Liblary」から「Label」を選択。
2. KitchenTimerViewController にドラッグアンドドロップする。
timer Label の表示を設定します。
1. timer Label を選択します。
2. ユーティリティエリアのアトリビュートインスペクタを表示。
3. 「Label」セクションで以下の通り設定。
Title:00:00
Font:System 60.0
Text Color:White Color
Alignment:中央揃え
timer Label のサイズを調整します。
1. timer Label を選択します。
2. ユーティリティエリアのサイズインスペクタを表示。
3. 「View」セクションで以下の通り設定。
X:70
Y:283
Width:170
Height:50
Autoresizing:以下の通り
同様に Timer View を配置します。
1. ユーティリティエリアの下側の「Object Liblary」から「View」を選択。
2. KitchenTimerViewController にドラッグアンドドロップする。
Timer View のサイズを調整します。
1. Timer View を選択します。
2. ユーティリティエリアのサイズインスペクタを表示。
3. 「View」セクションで以下の通り設定。
X:30
Y:363
Width:260
Height:105
Autoresizing:以下の通り
同様に progress Image View を配置します。
1. ユーティリティエリアの下側の「Object Liblary」から「Image View」を選択。
2. KitchenTimerViewController の Timer View の中にドラッグアンドドロップする。
progress Image View のサイズを調整します。
1. progress Image View を選択します。
2. ユーティリティエリアのサイズインスペクタを表示。
3. 「View」セクションで以下の通り設定。
X:7
Y:6
Width:247
Height:94
Autoresizing:以下の通り
「KitchenTimerViewController」の設定はひとまずここまで。
以下のステップで説明していきます。