キッチンタイマーアプリの作りかた
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
Step3 Storyboardの編集 その2
「SettingViewController」と「KitchenTimerViewController」の2つの ViewController を作成しました。
次は、それぞれにボタンやラベルなどのオブジェクトを配置していきます。
まずは、「SettingViewController」から。
最終的に、「SettingViewController」はこんな感じになります。
「SettingViewController」には、以下のオブジェクトを配置します。
・minute Label
・seconde Label
・set Button
・timer Piker View
・background Image View
App Storeに公開したアプリには、AD Bannar View も配置されていますが、こちらについての説明は省略します。
でわ、実際にこれらのオブジェクトを配置していきましょう。
まず、background Image View から。
1. ユーティリティエリアの下側の「Object Liblary」から「Image View」を選択。
2. SettingViewController にドラッグアンドドロップする。
Image View を View Controller 全体を覆うようにサイズを変更。
この Image View に表示するファイルをプロジェクトに追加します。
「backgraund01.png」を追加します。
1. ナビゲーターエリアで「Supporting Files」フォルダを選択。
2. Finder等から、「backgraund01.png」を上記の場所にドラッグアンドドロップする。
この時、ファイル追加のオブションダイアログが出ますが、以下のように選択してください。
Destination:「Copy items if needed」にチェックを入れる。
Added folders:「Create groups」を選択。
ファイル追加時の注意は、こちらにまとめています。
Image View 表示するファイルを設定します。
1. Image View を選択します。
2. ユーティリティエリアのアトリビュートインスペクタを表示。
3. 「Image View」セクションで以下の通り設定。
Image:backgraund01.png
Image View のサイズを調整します。
1. Image View を選択します。
2. ユーティリティエリアのサイズインスペクタを表示。
3. 「View」セクションで以下の通り設定。
Autoresizing:以下の通り
同様に set Button を配置します。
1. ユーティリティエリアの下側の「Object Liblary」から「Button」を選択。
2. SettingViewController にドラッグアンドドロップする。
この set Button の背景に表示するファイルをプロジェクトに追加します。
「button_green01.jpg」を追加します。
set Button の表示を設定します。
1. Button を選択します。
2. ユーティリティエリアのアトリビュートインスペクタを表示。
3. 「Button」セクションで以下の通り設定。
Title:set
Font:System Bold 36.0
Text Color:Black Color
Background:button_green01.jpg
set Button のサイズを調整します。
1. Button を選択します。
2. ユーティリティエリアのサイズインスペクタを表示。
3. 「View」セクションで以下の通り設定。
X:70
Y:400
Width:180
Height:60
Autoresizing:以下の通り
同様に Picker View を配置します。
1. ユーティリティエリアの下側の「Object Liblary」から「Picker View」を選択。
2. SettingViewController にドラッグアンドドロップする。
Picker View の表示を設定します。
1. Picker View を選択します。
2. ユーティリティエリアのアトリビュートインスペクタを表示。
3. 「View」セクションで以下の通り設定。
Background:White Color
Picker View のサイズを調整します。
1. Picker View を選択します。
2. ユーティリティエリアのサイズインスペクタを表示します。
3. 「View」セクションで以下の通り設定。
X:70
Y:115
Width:180
Height:216
Autoresizing:以下の通り
同様に minute Label を配置します。
1. ユーティリティエリアの下側の「Object Liblary」から「Label」を選択。
2. SettingViewController にドラッグアンドドロップする。
minute Label の表示を設定します。
1. minute Label を選択します。
2. ユーティリティエリアのアトリビュートインスペクタを表示。
3. 「Label」セクションで以下の通り設定。
Title:minute
Font:System Bold 17.0
Text Color:White Color
Alignment:中央揃え
minute Label のサイズを調整します。
1. minute Label を選択します。
2. ユーティリティエリアのサイズインスペクタを表示。
3. 「View」セクションで以下の通り設定。
X:78
Y:81
Width:66
Height:21
Autoresizing:以下の通り
同様に second Label を配置します。
1. ユーティリティエリアの下側の「Object Liblary」から「Label」を選択。
2. SettingViewController にドラッグアンドドロップする。
second Label の表示を設定します。
1. second Label を選択します。
2. ユーティリティエリアのアトリビュートインスペクタを表示。
3. 「Label」セクションで以下の通り設定。
Title:second
Font:System Bold 17.0
Text Color:White Color
Alignment:中央揃え
second Label のサイズを調整します。
1. second Label を選択します。
2. ユーティリティエリアのサイズインスペクタを表示。
3. 「View」セクションで以下の通り設定。
X:175
Y:81
Width:68
Height:21
Autoresizing:以下の通り
「SettingViewController」の設定はひとまずここまで。
以下のステップで説明していきます。