Programing Note

千里の道も一歩から

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

Tweet

Advertisement



Event

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

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

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

Related Articles:

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

Update on February 27, 2016

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


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

inserted by FC2 system