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

ホーム > 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」を選択します。

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

画像の通り入力します。

Classはクラス名（ファイル名）、SubClassは継承するクラスです。ここもへぇ～で！

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

（クリックで拡大）

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

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

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

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

新たに「～.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を使ってみる！後篇」