早速初めましょう。
今回はプロジェクトを作成し、tabによって４つの画面を切り替えられるようにするところまでを開発します。
※プログラム歴4ヶ月目の素人が書いてますので、用語の使用方法とが間違っていることも多いと思いますので、間違いに気づいた方はコメントしていただけると嬉しいです。
Xcode4をインストールとかは適当にググって調べて下さい。
iPhoneのデベロッパープログラムは入ってない人は、AppStoreで600円で買わなきゃ行けないみたいですね…
１ プロジェクトを作成
xcodeの新規プロジェクトでApplicationのViewBasedApplicationを選択します。
Pruductの名前は適当にCodeFighterと設定します。保存場所も好きなところに。
２ どんなデザインにするか？
んでどんな全体像にするか書いてませんでしたね。
今回はTabBarを使います。tabによって４つのビューを切り替えます
tab1…バーコードスキャン画面、スキャンボタンがあり、押すとカメラが起動します
tab2…登録戦士View画面、Tabelビューで登録戦士の閲覧削除ができます
tab3…戦闘画面、戦士を選択し、Bumpのように相手と乾杯の動作で戦闘開始
tab4…戦績や使い方などの「その他」を表示します
こんな感じで。
↑tabバーってのはこんな感じで画面下のタブで画面を切り替えるヤツ
２ InterfaceBuilderファイルについて
僕はInterfaceBuilderは使ったり使わなかったりします。
一画面にやたらボタンやらテキストビューやらごちゃごちゃする場合には使います。
そうじゃないなら使いません。
今回はあんまりつかう必要はなさそうですな。
3 ４つのtabに対するビューコントローラーを作成する。
まず、自動生成されている
CodeFighterViewController.h
CodeFighterViewController.m
CodeFighterViewController.xib
の三つを削除しちゃいましょう。
右クリック→削除。
んで４つのTabに対応するクラスを作成します。
File→New→New File...
を選択。
ここでUIViewController subclassを選択。
Nextを選択すると、次の画面で何のサブクラスにするか聞かれますので、とりあえずここではデフォルトのままのUIViewControllerを選択します。
またここでXIBファイルを使用するかどうかをチェックボックスで選択できますので、チェックを外しておきましょう。
ファイル名はBarcodeScanViewControllerとします。すると
BarcodeScanViewController.h
BarcodeScanViewController.m
の宣言ファイルと実装ファイルが自動生成されます。これはTab1のバーコードスキャンする画面に相当します。
全く同じ手順で他のTab2〜3のViewControllerも作成しましょう。
それぞれのファイル名は
tab2→ListViewController
tab3→BattleViewController
tab4→OtherViewController
としました。最終的に次の画像のようになっているとおもいます。
４ 作成した４つのビューをタブによって切り替えられるようにする
こっから直接コードいじり始めます。まずはCodeFighterAppDelegate.hから。
開いてみると以下のようになっていると思います。
CodeFighterAppDelegate.h
--------------------------------------------------------------------
#import
@class CodeFighterViewController;
@interface CodeFighterAppDelegate : NSObject {
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet CodeFighterViewController *viewController;
@end
--------------------------------------------------------------------
これを以下のように書き換えます。
CodeFighterAppDelegate.h
--------------------------------------------------------------------
#import
@interface CodeFighterAppDelegate : NSObject {
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UITabBarController *tabBarController;
@end
--------------------------------------------------------------------
次にCodeFighterAppDelegate.m
最初はこんな感じになっていると思います。
CodeFighterAppDelegate.m
--------------------------------------------------------------------
#import "CodeFighterAppDelegate.h"
#import "CodeFighterViewController.h"
@implementation CodeFighterAppDelegate
@synthesize window=_window;
@synthesize viewController=_viewController;
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// Override point for customization after application launch.
self.window.rootViewController = self.viewController;
[self.window makeKeyAndVisible];
return YES;
}
--------------------------------------------------------------------
こんな感じに書き換えます
CodeFighterAppDelegate.m
--------------------------------------------------------------------
#import "CodeFighterAppDelegate.h"
#import "BarcodeScanViewController.h"
#import "ListShowViewController.h"
#import "BattleViewController.h"
#import "OtherViewController.h"
@implementation CodeFighterAppDelegate
@synthesize window=_window;
@synthesize tabBarController=_tabbarController;
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
//ビュー１の設定
BarcodeScanViewController *tag1 = [[[BarcodeScanViewController alloc]init]autorelease];
tag1.tabBarItem = [[[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemSearch tag:0]autorelease];
//ビュー2の設定
ListShowViewController *tag2 = [[[ListShowViewController alloc]init]autorelease];
tag2.tabBarItem = [[[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemSearch tag:0]autorelease];
//ビュー3の設定
BattleViewController *tag3 = [[[BattleViewController alloc]init]autorelease];
tag3.tabBarItem = [[[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemSearch tag:0]autorelease];
//ビュー4の設定
OtherViewController *tag4 = [[[OtherViewController alloc]init]autorelease];
tag4.tabBarItem = [[[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemSearch tag:0]autorelease];
NSArray *controllers = [NSArray arrayWithObjects:tag1,tag2,tag3,tag4, nil];
[(UITabBarController*)self.tabBarController setViewControllers:controllers animated:NO];
self.window.rootViewController = self.tabBarController;
[self.window makeKeyAndVisible];
return YES;
}
--------------------------------------------------------------------
つぎにMainWindow.xibを変更します。
Code Fighter View Controllerを削除し、Tab Bar Controllerを追加します。
そしてCodeFighter App DelegateのOutletsのtabBarControllerを追加した
Tab Bar Controllerと繋げます。以下のようになってればオーケーです。
Tab Bar Controller追加後
Tab Bar ControllerとtabBarController接続後
ここでいったんシミュレーターを起動してみましょう。
以下のようにタブが表示されればオーケーです。
しかしこれではビューが切り替わっているのかどうかわかりませんね。
５ 各ViewControllerにラベルを追加する
ビューが切り替わっていることを確認するために、各ViewControllerにラベルを追加します。
BarcodeScanViewController
ListViewController
BattleViewController
OtherViewController
の４つそれぞれの実装ファイル（.mファイル）に、コメントアウトされて緑色になっている以下のようなコードが見つかると思います。
４つのViewController.m
--------------------------------------------------------------------
/*
// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad
{
[super viewDidLoad];
}
*/
--------------------------------------------------------------------
viewDidLoadメソッドは文字通りViewがロードされた直後に呼ばれるメソッドです。
ここで、それぞれのビューが呼ばれたことを示す文字列を表示するようにしたいと思います。
以下のように書き換えます。
４つのViewController.m
--------------------------------------------------------------------
- (void)viewDidLoad
{
[super viewDidLoad];
UILabel *namelabel = [[UILabel alloc] init];
namelabel.frame = CGRectMake(80, 10, 200, 50);
namelabel.text = @"僕はotherViewControllerだよ";
namelabel.textColor = [UIColor blueColor];
namelabel.font = [UIFont fontWithName:@"AppleGothic" size:12];
[self.view addSubview:namelabel];
}
--------------------------------------------------------------------
namelabel.text = @"僕はotherViewControllerだよ";
の「僕はotherViewControllerだよ」の部分は好きに変更して下さい。
次のようにビューが切り替わっているのが確認できると思います。
これでタブバーによる画面の切り替えができるようになりました。
次回からは各ビューの中身をいじっていきたいと思います。
ちなみに次回はバーコード読み取り部分を実装します。
〜所感〜
これだけのことを書くのに二時間近くかかりました。
結構大変なんですな。
続き「バーコードバトラーアプリ制作過程〜バーコードリーダー実装〜」
0 件のコメント:
コメントを投稿