この文章は、iPhone Dev Centerの日本語ドキュメントの「iPhone アプリケーション チュートリアル」の内容をベースに、私自身が後で読んでわかるように書いています。なお、Xcode 3.2.3とiOS SDKは導入済みであるとします。

新規プロジェクト作成
メニュー→[File]→[New Project…]を選択します (初回起動直後ならする必要はないでしょう)。そして、新規プロジェクトウィンドウで[Window-based Application]を選択して[Choose…]をクリック。

プロジェクト名をHelloWorldにして、[Save]をクリック。これでウィンドウベースアプリケーションの雛形が作成されます。

ルートコントローラの作成
メニュー→[File]→[Classes]を選択して、新規ファイルウィンドウで[UIViewController subclass]を選択して[with XIB for user interface]をチェックしてから、[Next]をクリック。

[File Name]をMyViewController.mにして[Finish]をクリック。

3つのファイルMyViewController.m, MyViewController.h, MyViewController.xibが作成されました。

HelloWorldAppDelegate.hの修正
次のようにHelloWorldAppDelegate.hを修正します。
#import <UIKit/UIKit.h> + @class MyViewController; @interface HelloWorldAppDelegate : NSObject <UIApplicationDelegate> { UIWindow *window; + MyViewController *myViewController; } @property (nonatomic, retain) IBOutlet UIWindow *window; + @property (nonatomic, retain) MyViewController *myViewController; @end
ちなみに、@property
は変数がそのクラスのプロパティ(アクセッサを持つ)であることを指定するものです。修正が終わったら、とりあえずこの時点でコンパイルしてみましょう。いくつかの警告がでますがコンパイルは成功するはずです。

HelloWorldAppDelegate.mの修正
次のように、HelloWorldAppDelegate.mを修正します。
+ #import "MyViewController.h" #import "HelloWorldAppDelegate.h" @implementation HelloWorldAppDelegate @synthesize window; + @synthesize myViewController; #pragma mark - #pragma mark Application lifecycle - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { + MyViewController *aViewController = [[MyViewController alloc] + initWithNibName:@"MyViewController" + bundle:[NSBundle mainBundle]]; + [self setMyViewController:aViewController]; + [aViewController release]; + UIView *controllersView = [myViewController view]; + [window addSubview:controllersView]; [window makeKeyAndVisible]; return YES; } (中略) - (void)dealloc { + [myViewController release]; [window release]; [super dealloc]; }
なお、@synthesize
はアクセッサメソッドを自動作成させるためのキーワードで、これがない場合には自分でmyViewController
とsetMyViewController:
を実装しなければなりません。
Interface Builder
Xcode上の[Overview]の[Resource]フォルダ内にあるMyViewController.xibをダブルクリックします。

Interface Builderが起動します。

ここで試しにMyViewController.xibウィンドウ内のViewの属性であるBackgroundを紫に変更してみましょう。変更したらメニュー→[File]→[Save]でnibファイルを保存します。

そして、Xcodeで[Build and Run]アイコンをクリックして、コンパイルしてエミュレータ上で実行してみます。背景が紫になっていることを確認したら、Interface Builderで背景を元の白色に戻しましょう。

ウィジェットの追加
Interface Builderの[Library]ウィンドウから[Round Rect Button]をドラッグして[View]ウィンドウにドロップします。

続いて[Text Field]と[Label]も同様に配置。文字などを修正するとずれるので適当に配置して構いません。

TextFieldの[PlaceHolder]を「ユーザ名」に、Labelの[Text]を空に、Buttonの[Title]を「こんにちは」にします(真ん中にLabelがありますが空なので見えない)。ここらはウィジェットをダブルクリックで直接編集することができます。

さらに、Labelの属性[Drawing]の[Clear Context Before Drawing]にチェックがあることを確認します(これがないと再描画するときに画面がグチャグチャになる)。そしてTextFieldの[Text Input Traits]において、[Captalize]をWordsに、[Return Key]をDoneに変更して、ファイルを保存します。
UIのためのコード追加
MyViewController.hに次のコードを追加します。
@interface MyViewController : UIViewController { + UITextField *textField; + UILabel *label; + NSString *string; } + @property (nonatomic, retain) IBOutlet UITextField *textField; + @property (nonatomic, retain) IBOutlet UILabel *label; + @property (nonatomic, copy) NSString *string; + - (IBAction)changeGreeting:(id)sender;
なお、IBOutlet
はキーワードであり、Interface Builderでoutletとして表示させるためのものです。IBAction
も同様でInterface Builderにアクションとして表示させるためのものです(実はvoid
にdefine
しているだけらしい)。
そして、MyViewController.mに次のコードを追加します。
@implementation MyViewController + (IBAction)changeGreeting:(id)sender { + // 後でコードを追加していく + }
コネクションの作成
Interface BuilderのFile's owner(ここではMyViewControllerになる)が持っている、Interface Builder用の変数(ここでは先ほどキーワードIBOutlet
を付けたtextField
とlabel
と、IBAction
を付けたchangeGreeting:
)を、UIデザイナ上のオブジェクトと結び付けます。
MyViewController.xibウィンドウ内のFile's ownerを、controlキーを押しながらクリックして、ウィンドウFile's Ownerを表示させます。

そして、labelの右の丸をドラッグしてウィンドウViewのLabelにドラッグします。

textFieldも同様にします。

次にウィンドウViewのButtonを選択してからcontrol+クリック[Touch Up Inside]の丸をドラッグして、MyViewController.xibのFile's Ownerにドロップします。

選択可能なアクションの候補が表示されます(ここではchangeGreeting:
のみ表示される)ので、これを選択します。

同様の操作で、textFieldのdelegateをFile's ownerにします。こうすることで、各種イベントがMyViewControllerに渡されて、そこで処理できるようになります。
File's ownerウィンドウが次のようになっていればよいでしょう。

この時点でコンパイルするといくつかの警告がでるがとりあえず無視してください。また、エミュレータ上で実行するとテキストフィールドなどは動作するが、入力後にキーボードを消すことができないでしょう。これについては後ほど修正します。
View Controllerの実装
まず、MyViewController.mのアクセッサメソッドの同期設定を追加して、メモリマネジメント部分を修正します。
@implementation MyViewController + @synthesize textField; + @synthesize label; + @synthesize string; - (void)dealloc { + [textField release]; + [label release]; + [string release]; [super dealloc]; }
メソッドchangeGreetingl:
の実装を追加します。
- (IBAction)changeGreeting:(id)sender { + self.string = textField.text; + NSString *nameString = string; + if ([nameString length] == 0) { + nameString = @"World"; + } + NSString *greeting = [[NSString alloc] initWithFormat:@"Hello, %@!", nameString]; + label.text = greeting; + [greeting release]; }
委譲用のコードを追加してキーボードが閉じるようにします。キーボードを閉じるにはtextFieldをFirstResponderでなくせばよいので、そのようにします。
+ - (BOOL)textFieldShouldReturn:(UITextField *)theTextField { + if (theTextField == textField) { + [textField resignFirstResponder]; + } + return YES; + }
これで、シミュレータ上で実行すれば動作するはずです。

おまけ
- Interface Builder上のTextFieldの[Editing Did End]を
changeGreeting
に接続すると入力直後にメッセージが変わるようになります。 - 自分でUIを追加するコードを書くときには、
viewDidLoad:
をオーバライドします。 @property
のretain
,assign
,copy
などの属性は代入に伴なう操作(所有権を変更するのかなど)に関する属性です#pragma mark
はXcode上を指定すると、それ以降の文字列がXcode上のFunction menuに表示されるようになります(-でセパレータ)。また、コメント中のTODO:やFIXME:もFunction Menuに表示されます。
まとめ
XcodeとInterface Builderを用いたiPhoneアプリケーション作成の手順について紹介しました。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。