Programing Note

千里の道も一歩から

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

Tweet

Advertisement



Event

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

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

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

Related Articles:

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

Update on February 27, 2016

確認環境:Xcode 7.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」の設定はひとまずここまで。


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

inserted by FC2 system