はじめてのiphoneアプリ開発【その２】 - スマートフォンアプリ開発会社のエンジニアブログ

株式会社ガラパゴスでアルバイトをしている
iOSチームの[twitter:@duyoji]です。

第一弾ではiphoneの「お絵かきアプリ」の作り方を紹介しました。

はじめてのiPhoneアプリ開発【その1】 - スマートフォンアプリ開発会社のエンジニアブログ

今回はInterfaceBuilderを使わないで
画面移動ができる実装をしたいと思います。
実装内容は
UITabBarControllerとUiNavigationController
を使ってTwitterクライアントでよく見る画面下にTabBarがあり
それぞれのTabがNavigationViewとなっていて画面移動するとき横に動くようなものです。

InterfaceBuilderを使わない実装の練習を最近初めて
現在も勉強中なのですがInterfaceBuilderを使わない実装を始めてからアプリの画面構造が以前よりも理解が深まったので、
もしInterfaceBuilderを使わない実装をしたことないのならぜひやってみてください。

今回参考にしたサイトは以下のサイトです。

　iPhoneアプリ開発の虎の巻

　Interface Builder を使わない iPhone アプリを作る手順 - WebOS Goodies
　

それではInterfaceBuilderを使わないでアプリを作る手順を説明していきます。

１から実装するのでWindow-baced Applicationを選択してください。

WebOS Goodiesさんのサイトを参考にすると始める前にxibファイルに関するものを全部削除していますが特に削除しなくても大丈夫です。

では実際にコードを打ち込みましょうといいたいところが、それより先にアプリの画面構成を説明したいと思います。
画面構成を大まかに言うと一番下に土台としてのwindowがあってその上にviewを重ねています。そして画面を切り替えるときはviewの上にviewが積み重ねられていくといった感じです。
photoshopやFlashをやったことがある人はすぐにイメージが付くと思います。

では簡単な説明が済んだところで実際にコーディングを始めます。

画面移動をするために二つのクラスを追加しておきます。
今回使うファイルは以下のとおりです。

AppDelegate.h AppDelegate.m（プロジェクトを作ったとき最初からあるファイル）
親クラスがUIViewControllerのファイル
親クラスがUITableViewControllerのファイル

それではまずはじめに2のUIViewControllerクラスのファイルからコーディングしましょう。

新規ファイルを追加で画像のように「UIViewController subclass」を選択してください。
この時オプションのチェックはすべて外してください。
　

新しく追加されたUIViewControllerクラスのmファイルを開いて

(id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil

（おそらく一番上の方にあると思います。）のところで画像のようにコーディングしてください。
それではそれぞれのコードが何を表しているか説明します。

１． UIView *view_ = [[UIView alloc] init];
２．view_.frame = self.view.bounds;
３．view_.backgroundColor = [UIColor redColor];
４．[self.view addSubview:view_];

１のUIView *view_のところでviewの初期化をしています。

２のview_.frameではviewの大きさを設定しています。ここでは親Viewの大きさと同じ大きさを設定しています。　

３のview_.backgroundColorではview_の背景画像を設定します。ここでは赤背景を設定しています。

４でここまで色々と設定してきたview_を親viewに追加（重ねる）しています。

次にこのview_の上にUIButtonを追加してこのボタンを押したら画面が切り替わるようにします。切り替わる画面先はあとで設定しますので今は同じようにコーディングしてください。

１． UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
２.button.frame = CGRectMake(100, 100, 100, 100);
３. [button setTitle:@"移動" forState:UIControlStateNormal];
４． [button addTarget:self action:@selector(move) forControlEvents:UIControlEventTouchUpInside];
５． [view_ addSubview:button];

(void)move{

６． TableViewCont *tableViewCont = [[TableViewCont alloc] init];
７．[self.navigationController pushViewController:tableViewCont animated:YES];
８． [tableViewCont release];
}

１のUIButton *buttonでbuttonを初期化しています。

２のbutton.frameでボタンのサイズを設定しています。
ここでCGRectMake(100, 100, 100, 100);がありますが、これは（x軸,y軸,ボタンの横幅、ボタンの高さ）を表しています。

３ではボタンに文字と通常時のボタンの様子を設定しています。

４ではボタンがタッチされたときの処理を記述しています。詳しくは最初の方に紹介した参考サイトの「iphone開発の虎の巻」を参考にしてください。

５でこれまで色々と設定してきたbuttonをview_の画面上に追加します。

６、７、８についてはあとこの後つくるTableViewControllerクラスをつくってから実装するといいと思います。
一応説明だけすると、
６でTableViewControllerクラスを継承しているTableViewContクラス
を初期化して、

７で画面を移動するコーディングを指定します。詳しくは参考サイトを
見てください。

８では画面の移動が済んだので要らなくなったtableViewContを開放しています。

以上でUIViewControllerクラスの実装は終わりです。
このままではこのクラスの画面は表示されませんが最終的には
以下のような画面が表示されると思います。

新規ファイルを追加する画面にいき「UIViewController subclass」を選択してください。
この時オプションの中の「UITableViewController subclass」にチェックを入れてください。

新しく追加されたUITableViewControllerのサブクラスのmファイルを開いて以下の部分をそれぞれ入力してください。

１．- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
// Return the number of sections.
return 1;
}

テーブルのセクションの数を指定します。
ここではセクション数を１に設定しました。

２．- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
// Return the number of rows in the section.
return 5;
}

テーブル（セクション）の行数を指定します。
ここでは行数を５に設定しました。

３．- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellIdentifier = @"Cell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
}

// Configure the cell...
※ cell.textLabel.text = [NSString stringWithFormat:@"セル%d",indexPath.row];
return cell;
}

ここでセル（それぞれの行）に表示するものを設定します。
下の方の※印のところを追加してセル内の文章を設定しています。

４．- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

ViewController *detailViewController = [[ViewController alloc] init];
[self.navigationController pushViewController:detailViewController animated:YES];
[detailViewController release];

}

ここでは行がタッチされたときの処理を記述します。
この部分は先ほどUIViewControllerクラスで作ったボタンの処理内容と
同じように設定しました。

ここまでに二つのクラスの実装が終わりました。
・UITableViewControllerのサブクラス
・UIViewControllerのサブクラス

ここでそれぞれのmファイルの上に1つずつ#import
があると思います。
これと同じように今作ったファイルをそれぞれimport
してください。

例
UIViewControllerのサブクラスの場合
#import "ViewController.h"
#import "TableViewCont.h"

UITableViewControllerのサブクラスの場合
#import "TableViewCont.h"
#import "ViewController.h"

これで２つのファイルの実装は本当に終わりです。

最後にこの２つのファイルをAppDelegateに読み込んでアプリが起動したときに今までに作ったファイルを実装します。

以下のようにコーディングします。

１．- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

// Override point for customization after application launch.
２． window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
３． UITabBarController *tbc = [[UITabBarController alloc] init];
４． TableViewCont *view1 = [[TableViewCont alloc] init];
５． ViewController *view2 = [[ViewController alloc] init];

６． UINavigationController *nav1 = [[UINavigationController alloc] initWithRootViewController:view1];
７． UINavigationController *nav2 = [[UINavigationController alloc] initWithRootViewController:view2];

８． NSArray *views = [[NSArray alloc] initWithObjects:nav1,nav2,nil];
９． [tbc setViewControllers:views];
１０． [window addSubview:tbc.view];

１１． [window makeKeyAndVisible];

return YES;
}

１はアプリが起動した時に最初に読み込まれるところです。
このメソッド内で起動後の画面表示の処理の手続きを書きます。

２ではUIwindowを初期化してサイズを設定しています。

３ではUITabBarControllerを初期化しています。

４、５ではimportしたファイルを初期化しています。

６、７ではUINavigationControllerを初期化して画面移動のもととなるルートとして先ほど初期化したview1,view2を入れいます。

８では６，７で作ったオブジェクトを配列にいれています。

９で８でつくった配列を3で初期化したtbcに読み込んでいます。

１０ではwindowにtbcのviewを追加しています。

１１はとりあえず記述してください。（デフォルトではself.windowとなっていましたがselfを外しました）

これで完成です。
以下の画像のような感じになっていると思います。

どうでしょうか？InterfaceBuilderを使わないと画面構成がよく理解出来たではないでしょうか？
　

おそらくどっちのタブの画面から移動してもずっと二枚の画面が切り替わる画面になっていると思います。
今回は二つのファイルしか実装しませんでしたがファイルを増やせば移動先は好きなだけ増やせます。
これをうまく使えば自分だけのTwitterクライアントも作れるかもしれません。
僕自身もいずれオリジナルのTwitterクライアントをつくろうと思っています。
次回も自分の勉強している内容を紹介できたらなと思います。