社員ブログ
HOME  社員ブログ
ホーム > Interface Builder, Objective-C, Xcode, 社員:cobra > イチから学ぶiPhone/iPadアプリ開発 第6回 「Interface Builderを使ってみる!前篇」

イチから学ぶiPhone/iPadアプリ開発 第6回 「Interface Builderを使ってみる!前篇」

2012年05月22日 15時40分52秒

こんにちは、コブラです。

 

今回はInterface Builderについて!

インターフェイスビルダーとは、Xcodeの一部の機能で、

UI設計やイベント処理の関連付けを行うものです!

 

Xcode3までは別々のアプリケーションのように動いていましたが、

Xcode4からXcode上でInterface Builderが使えるようになりました!

百聞は一見にしかず!まずは見ていただきましょう!(出てくるのは後篇ですが…)

 

前々回(第5回)ではシミュレータを起動して真っ白な画面を出しました。

今回はそこに何かどーんと表示してみましょう!

 

まずは、クラスを眺めてみましょう。

クラスとは、プログラムファイルのことです。

イチから学ぶiPhone/iPadアプリ開発 第6回 「Interface Builderを使ってみる!前篇」

追々説明しますが、この「~.h」や「~.m」がクラスと呼ばれるものです。

この1つ1つが、アプリのベースであり全てです。

まぁここは、2へぇくらいで大丈夫です(古

 

さて、これだけではクラスが足りないので、追加しましょう!

ツールバーの「File」→「New」→「File」を選択します。

イチから学ぶiPhone/iPadアプリ開発 第6回 「Interface Builderを使ってみる!前篇」

 

「Objective-C Class」を選択して、次へ。

イチから学ぶiPhone/iPadアプリ開発 第6回 「Interface Builderを使ってみる!」

 

画像の通り入力します。

Classはクラス名(ファイル名)、SubClassは継承するクラスです。ここもへぇ~で!

「With XiB for user interface」にチェックを付けるのを忘れないように!

イチから学ぶiPhone/iPadアプリ開発 第6回 「Interface Builderを使ってみる!前篇」

(クリックで拡大)

 

保存場所をプロジェクトフォルダの中にして(特に変更せず)、OK!

するとこんな感じで3ファイル追加されます!

ファイルの位置が違ったら、ドラッグ&ドロップで画像のように移動させてくださいね。

(今後の説明上、同じ方が分かりやすい)

イチから学ぶiPhone/iPadアプリ開発 第6回 「Interface Builderを使ってみる!前篇」

 

新たに「~.xib」というクラスが出てきましたね。

それでは説明します。

「~.h」・・・ヘッダーファイル。変数やメソッドの宣言を書くもの

「~.m」・・・メソッドファイル。実際の処理を書くもの

「~.xib」・・・GUI。画面パーツの配備や処理の関連付けを行うもの

 

「xib」とは、「XcodeのInterface Builder」の略です!

ここは、87へぇくらい欲しいところ!

 

さて、せっかく作ったクラスファイルを、さっそく使います!

 

AppDelegate.hをクリックして、以下の通り書き加えてください!

#import <UIKit/UIKit.h>
#import "RootViewController.h"

@interface AppDelegate : UIResponder 

@property (strong, nonatomic) UIWindow *window;
@property (strong, nonatomic) RootViewController *rootViewController;

@end

 

次にAppDelegate.mです!

インデント(段合わせ)は適宜やってくださいね!

@implementation AppDelegate

@synthesize window = _window;
@synthesize rootViewController = _rootViewController;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
 self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
 // Override point for customization after application launch.
 self.rootViewController = [[RootViewController alloc] 
 initWithNibName:@"RootViewController" bundle:nil];
 self.window.rootViewController = self.rootViewController;
 self.window.backgroundColor = [UIColor whiteColor];
 [self.window makeKeyAndVisible];
 return YES;
}

 

これで、先程追加したクラスが、アプリ起動時に呼び出されるクラスに設定されました!

その確認と続きは次回!

後篇でいよいよInterface Builderの出番です!

 

 

シリーズ記事一覧

イチから学ぶiPhone/iPadアプリ開発 第1回 「Macって何?」

イチから学ぶiPhone/iPadアプリ開発 第2回 「Xcodeって何?」

イチから学ぶiPhone/iPadアプリ開発 第3回 「プロジェクトって何?」

イチから学ぶiPhone/iPadアプリ開発 第4回 「計画を形にしよう!」

イチから学ぶiPhone/iPadアプリ開発 第5回 「ドキドキのシミュレータ!」

イチから学ぶiPhone/iPadアプリ開発 第5.5回 「実機でテストしたい!」

イチから学ぶiPhone/iPadアプリ開発 第6回 「Interface Builderを使ってみる!前篇」

イチから学ぶiPhone/iPadアプリ開発 第6回 「Interface Builderを使ってみる!後篇」

イチから学ぶiPhone/iPadアプリ開発 第7回 「XcodeとInterface Builderの怪しい関係!?」

イチから学ぶiPhone/iPadアプリ開発 第8回 「アイコンと起動時画面を設定したい!」

イチから学ぶiPhone/iPadアプリ開発 第9回 「イベントを知ろう!」

イチから学ぶiPhone/iPadアプリ開発 第10回 「オリジナルの画像を設定したい!」

イチから学ぶiPhone/iPadアプリ開発 第11回 「画面を切り替えよう!」

イチから学ぶiPhone/iPadアプリ開発 第12回 「BGMや効果音を付けよう!」

イチから学ぶiPhone/iPadアプリ開発 最終回 「アプリよ、永遠に~つまり、まとめ~」

Interface Builder, Objective-C, Xcode, 社員:cobra