ドムドムその3:レイアウトを組もう

サルでき.jp > 11.サルにもできるiPhoneアプリの作り方(旧アメブロ記事) > ドムドムその3:レイアウトを組もう

2009/09/28 09:00 投稿先 11.サルにもできるiPhoneアプリの作り方(旧アメブロ記事) 投稿者 カワサキ タカシ

てさて。画像ファイルは準備できましたか?

まだの人はとりあえずこちらからダウンロードしてくださいね。
ドムドムその2:画像ファイルにしてみよう

今回は用意した画像でレイアウトの仮組みをしてみましょう。
配置してみて、いろいろ確認です。

それでは。
お久しぶりのXcodeの起動です。

覚えていますか?
そんな開発用ツールがあったことを。

完全に忘れてしまった方はこちらからどうぞ。
Xcodeのかんたん取扱説明書

ドムドムはテンプレートから作ります。
思いっきりGUIアプリケーションですので、使うテンプレートはView-basedです。

続々言葉が出てきますね。
ついでにこちらのリンクも付けておきます。
テンプレートの選び方 その1
テンプレートの選び方 その2

自分のブログがまさに自分のために役立つ瞬間。
いろいろ書いてますね。エラいぞ、自分。

ドムドムその3:レイアウトを組もう

名前を付けて、と。
domdom保存。

ドムドムその3:レイアウトを組もう

テンプレートで予め用意されているファイル一式がコピーされてきます。
今この中にはこちらで用意した画像ファイルが入っていませんので、
Imageフォルダを作って入れておきましょう。

ドムドムその3:レイアウトを組もう

フォルダに入れましたか?
以前もお話ししましたが、コレだけではXcodeには登録されません。

Xcodeに画像ファイルを登録するためには、
Xcodeのグループとファイルから、既存ファイルの追加を行います。
開発基礎トレ3:オリジナル画像への切り替え

後で管理しやすいように、
グループとしてImageグループを追加しました。

グループ名はフォルダ名と一致させる必要はありませんので、
覚えやすい名前を付けちゃいましょう。

ドムドムその3:レイアウトを組もう

さて、それではいよいよ仮組みスタートです。

グループとファイルの中から「Resources」というグループを選択して、
「domdomViewController.xib」ファイルをダブルクリックしてください。

コレまたお久しぶりのInterface Builderが起動します。
Interface Builderのかんたん取扱説明書

重なり順から言って背景が一番下になりますので、
Libraryの中から背景画像貼付け用の「Image View」をViewに配置してみましょう。

ドムドムその3:レイアウトを組もう

ステータスバー。邪魔ですね。

あっても操作上差し障りは無いのですが、
画面を広く使いたいので、ステータスバーは消しちゃいましょう

ステータスバーの消し方その1

View Attributesインスペクタの「Status bar」をNoneに。

まずはこれでView上からはきれいさっぱりいなくなります。

ドムドムその3:レイアウトを組もう

でもコレではまだ足りません。
ビルドして進行するとステータスバーが残っています。

ステータスバーの消し方その2

Info.plistに「Status bar is initially hidden」を追加。

今まですっ飛ばして説明してきたのですが、
アプリケーションの様々なプロパティをまとめて設定しているファイルがInfo.plistです。
最初から設定されているものもあれば、必要に応じて設定するものもあります。

ステータスバーの表示非表示はここで管理できますので、
項目を追加して設定します。

ドムドムその3:レイアウトを組もう

では、あらためて背景の設定からはじめましょう。
「Image View」がView上に貼れたら、
View AttributesインスペクタからImageのプルダウンを押してください。

ずらっと画像ファイルが並んでますね。
これは先ほどImageグループに登録した画像です。

一旦登録してしまえば、Image選択プルダウンに出てきます。
ここでは「Default.jpg(背景画像)」を選択しましょう。

ちょっとズレている場合は、
同じくView AttributesインスペクタのModeプルダウンを「Top」に設定します。
(上揃えという意味です。)

ドムドムその3:レイアウトを組もう

背景画像は貼れましたか?
貼れたら後は順々に画像を貼っていきます。

Image ViewをView上に配置してImageを選択。の繰り返しです。

Image Viewは透明な枠なのですが、
実際の画像より最初は大きく設定されている場合があります。

ですが、後でコントロールする時は、
中の画像ではなくImage Viewをコントロールすることになりますので、
画像サイズに合わせてImage Viewのサイズを調整しておきましょう。

View Attributesインスペクタの3つ目のタブでサイズの変更ができます。

ドムドムその3:レイアウトを組もう

ドムドムにはテキストとボタンがありますね。
テキストはLibraryの中の「Label」を、
ボタンはLibraryの中の「Round Rect Button」を。
それぞれ選んで配置してください。

下の画像はボタンの設定をしているところです。
普通に設定すると「それっぽいボタン」イメージになってしまうので、
Typeを「Custom」に切り替えて、画像を貼付けます。

ドムドムその3:レイアウトを組もう

注)テキストラベルは本来1つで済ませたかったのですが、
文字揃えが上手く行かなかったのでここでは10の位と1の位で2つのラベルを使っています。
本来こんな設定はしちゃダメだとは思いますが、、、
練習ということでこれでなんとかしてみましょう。

さて!
それでは「ビルドして進行」。
iPhoneシミュレーターで確認です!
iPhone Simulatorを使ってみよう

ドムドムその3:レイアウトを組もう
バーン!

おお~。それっぽ~い。

いかがですか?
イメージ通りにレイアウトが組めましたか?

まだ押しても何も動きませんね。置いただけです。
次は各パーツにを吹き込んでいきます。

次回予告「目覚めるドムドム」

お楽しみに!

関連する記事:


Advertisement