Home > Tags > InterfaceBuilder

InterfaceBuilder

iPhoneアプリ HelloWorld その1 画面を作成する

SDKのインストールが完了したら、とりあえず、「HelloWorld」を作成してみます。
ドキュメントは、Apple Dev Centerの、「iPhoneアプリケーションチュートリアル」
参考にしています。サンプルの、HelloWorldが、OS2.0用で動かなかったので、
1から作成してみました。

1. 新規プロジェクトの作成

Xcodeを起動して、「ファイル」ー「新規プロジェクトの作成」を選択します。
Xcode iPhone アプリ 新規プロジェクトの作成

新規プロジェクトのテンプレートを選びます。

左カラムから、「iPhone OS」 – 「Application」を選択します。

iPhoneアプリ テンプレートの選択

ここでは、テンプレート「Window-Based」を選択します。

テンプレートの種類

Navigation-Based Application 複数の画面を使用して、階層的にデータを表示するアプリケーション。上にナビゲーションバーが生成されるので、深い階層を実現できます。
OpenGL ES Application 画像やアニメーションを表示するために、一画面全体で、OpenGL ESベースのビューを使用するアプリケーション。3Dやゲームなどに。
Tab Bar Application ユーザが複数の画面から選択できるラジオインターフェイスを表示するアプリケーション。
View-Based Application 1つのビューを使用してユーザインターフェイスを実装しているアプリケーション。
Utility Application メインの画面と、設定の画面だけを持つようなアプリケーションを作る場合に。 インフォメーションボタンを押すと、画面が裏返るアニメーションで、設定画面になります。
Window-Based Application 1つのアプリケーションデリゲートと1つのウインドウを含んでいます。一画面のアプリケーション用ですが、インターフェースの配置もコードで行う場合に。

新規プロジェクト名に、「HelloWorld」と入力します。

XCode新規プロジェクト HelloWorld

XCodeに、新規プロジェクト、「HelloWorld」が作成されます。

XCode iPhone HelloWorld

画面を作成する。

まずは、ViewパートであるUIから作成してみます。

リソースの追加をします。

[Resources]フォルダを右クリックして、「追加」→「新規ファイル作成」

iPhone XCode New Resource

「View XIB」を選択します

iPhone 新規テンプレート

ひとまず、「HelloWorldView」というファイル名で作成します。

iPhone HelloWorld View

「HelloWorldView.xib」というリソースファイルが作成されているのを確認します。

XCode XIB

「HelloWorldView.xib」をクリックして、UIを編集します。

「InterfaceBuilder」と呼ばれる、Viewパートを編集するツールが起動します。

Interface Builder 新規

「Tool」から「Library」を選択します。

「Library」ウインドゥが表示されます。

IB Tool-Library

「Library」から、「Round Rect Buttonスニペットを選択し、ドラッグ&ドロップします。縦横の大きさや、配置は調整できます。

IB Rect

Round Rect Buttonをダブルクリックし、「Click」と文字を入力します。

IB-Button

同じように、Libraryから、「Lable」を選んで、ドラッグ&ドロップし、ダブルクリックして、「Hello, World!」と入力します。

IB lable

属性を設定します。

メニューバーから、「Tools」→「Inspector」を選択します。
左上のスライダーのようなアイコン、「View Attribute」を選択します。

ここで、フォントやカラーなど属性値を設定できます。

IB Attribute

長くなってしまったので、次回は、View Controllerを追加して、実際の処理を追加していきます!

【関連記事】

Home > Tags > InterfaceBuilder

カテゴリー
RSS あらびき林檎
スポンサー

Return to page top