iPhone

「Macを買うなら…」でおなじみの、秋葉館オンラインショップ
もちろん話題のiPodも本体を含め関連商品充実！

UiKitフレームワークに含まれている、UINavigationControllerを使用した、
ナビゲーションUIについての私的メモです。InterfaceBuilderなどでの設定の説明は省いてます。

UINavigationControllerクラス

NSObject
　　　|
　　　+–UIResponder
　　　　　　|
　　　　　　+–UIViewController
　　　　　　　　　|
　　　　　　　　　+–UINavigationController

1. UINavigationControllerクラスとは

オブジェクトの階層の外観を管理する、ナビゲーションバーのための特殊なコントローラ。アプリケーションに提供されたビューコントローラを使用して、ナビゲーションバーの設定やビューを描画することが可能。各ビューコントローラは、ナビゲーションバーのナビゲーションアイテムを持っています。

2. UINavigationCotrollerのナビゲーションでの働き

• UINavigationControllerオブジェクトは複数のUIViewCotrollerオブジェクトを保持していて、そのオブジェクトの画面遷移を管理。
• UINavigationControllerオブジェクトが保持しているUIViewオブジェクトと、ナビゲーションを合成したものを表示。
• そのUIViewオブジェクトを、Windowオブジェクトの子ビューとすることで、ナビゲーションバーを含む画面が表示される。

実装サンプル

NavigationSampleAppDelegateクラスに、UINavigationControllerのメンバ変数と、プロパティ宣言を追記。

//NavigationSampleAppDelegate.h
@interface NavigationSampleAppDelegate : NSObject <UIApplicationDelegate> {
    UIWindow *window;
    UINavigationController *navigationController;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UINavigationController *navigationController;

@end

NavigationSampleAppDelegate.mに、実装ディレクティブを追加。
UINavigationControllerのビューをウインドウに追加して、deallocメソッドにも追記。

//  NavigationSampleAppDelegate.m

#import "NavigationSampleAppDelegate.h"

@implementation NavigationSampleAppDelegate

@synthesize window;
@synthesize navigationController;

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    // Override point for customization after application launch
	[window addSubview:[navigationController view]];
    [window makeKeyAndVisible];
}

- (void)dealloc {
    [navigationController release];
    [window release];
    [super dealloc];
}

これで、画面遷移を制御するコントローラーの下地の追加が完了しました。

InterfaceBuilderで、MainWindow.xibのUINavigationControllerを編集

InterfaceBuilder上で、NavigationControllerで制御したいコントローラーを、Libraryから選択して、xibを編集し、ビルドすると、下記の例ようになります。

次回は、スタートページと、遷移先ページ、遷移イベントの実装などについて、メモして行きたいと思います！

【関連記事】

iPhoneアプリ開発の環境構築

• iPhone SDKを、SnowLeopardに入れる
• iPhone SDK ドキュメントの入手

iPhoneアプリ HelloWorld

• iPhoneアプリ HelloWorld その１
• iPhoneアプリ HelloWorld　その２ ViewController
• iPhoneアプリ HelloWorld その３　ViewControllerの実装

前回の、iPhoneアプリ HelloWorld　その２ ViewControllerで追加したViewControllerに、イベントを実装していきます。

Clickボタンをタップすると、「Hello, World!」と、表示されるイベントを実装していきます。

1. 初期状態で、ラベルの「Hello, World!」を非表示にします

「HelloWorldViewController.h」をクリックして、ソースを表示します。

下記のように、messageメンバ変数を記述します。

//
//  HelloWorldViewController.h
//  HelloWorld
//
//  Created by あらびき林檎 on 10/01/07.
//  Copyright 2010 Splitchin  All rights reserved.
//

#import <UIKit/UIKit.h>

@interface HelloWorldViewController : UIViewController {
	IBOutlet UILabel *messsage;
}

@end

保存したら、「HelloWorldViewController.m」を開きます。

「viewDidLoad」メソッドが、下記のようにコメントアウトされています。

/*
// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
    [super viewDidLoad];
}
*/
*/

コメントアウトを外して、下記のように処理を追記します

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
    [super viewDidLoad];
	[messsage setHidden:YES];
}

これで、XIBファイルを読み込んだ後の、追加処理の記述をしました。

次に、messageメンバ変数と、XIBファイルをリンクさせます。

「HelloWorldeView.xib」をクリックして、ウインドを開いたら、
　File’s Owneから、Lableまで、Ctrlを押しながら、ドラッグします。
　Outletの「message」を選択します。

これで、HelloWorldViewControllerクラスのmessageメンバ変数と、
XIBファイルの、Labelのテキスト「Hello, World!」がリンクしました。

2. イベントハンドラの実装

「Click」ボタンをタップしたときの、イベント処理を実装します。

「HelloWorldViewController.h」を選択して、ソースを表示します。
そして、以下のように、IBActionを記述します。

//
//  HelloWorldViewController.h
//  HelloWorld
//
//  Created by あらびき林檎 on 10/01/07.
//  Copyright 2010 Splitchin  All rights reserved.
//

#import <UIKit/UIKit.h>

@interface HelloWorldViewController : UIViewController {
	IBOutlet UILabel *messsage;
}

-(IBAction)actionButtonTapped:(id)sender;

@end

次に、「HelloWorldViewController.m」を選択して、ソースを表示します。

以下のように、IBActionで、messageを表示するように設定します。

- (void)dealloc {
    [super dealloc];
}

- (IBAction)actionButtonTapped:(id)sender{
	[messsage setHidden:NO];
}

@end

「HelloWorldView.xib」を開いて、ボタンとイベントハンドラをリンクさせます。

「View」を開いて、「Rounded Rect Button」（Clickボタンを実装したUIパーツ）から、
Ctrlを押しながら、File’s Ownerにドラッグして、Eventsから「actionButtonTapped」
を選択します。

ビルドして実行

保存したら、「ビルドして実行」します。

「Click」ボタンを押すと、「Hello, World!」と表示される、
　　iPhoneアプリが完成しました！

【関連記事】

iPhoneアプリ開発の環境構築

• iPhone SDKを、SnowLeopardに入れる
• iPhone SDK ドキュメントの入手

iPhoneアプリ HelloWorld

• iPhoneアプリ HelloWorld その１

　　

• iPhoneアプリ HelloWorld　その２ ViewController

SDKのインストールが完了したら、とりあえず、「HelloWorld」を作成してみます。
ドキュメントは、Apple Dev Centerの、「iPhoneアプリケーションチュートリアル」を
参考にしています。サンプルの、HelloWorldが、OS2.0用で動かなかったので、
１から作成してみました。

1. 新規プロジェクトの作成

Xcodeを起動して、「ファイル」ー「新規プロジェクトの作成」を選択します。

新規プロジェクトのテンプレートを選びます。

左カラムから、「iPhone OS」 – 「Application」を選択します。

ここでは、テンプレート「Window-Based」を選択します。

テンプレートの種類

Navigation-Based Application	複数の画面を使用して、階層的にデータを表示するアプリケーション。上にナビゲーションバーが生成されるので、深い階層を実現できます。
OpenGL ES Application	画像やアニメーションを表示するために、一画面全体で、OpenGL ESベースのビューを使用するアプリケーション。３Dやゲームなどに。
Tab Bar Application	ユーザが複数の画面から選択できるラジオインターフェイスを表示するアプリケーション。
View-Based Application	1つのビューを使用してユーザインターフェイスを実装しているアプリケーション。
Utility Application	メインの画面と、設定の画面だけを持つようなアプリケーションを作る場合に。 インフォメーションボタンを押すと、画面が裏返るアニメーションで、設定画面になります。
Window-Based Application	1つのアプリケーションデリゲートと1つのウインドウを含んでいます。一画面のアプリケーション用ですが、インターフェースの配置もコードで行う場合に。

新規プロジェクト名に、「HelloWorld」と入力します。

XCodeに、新規プロジェクト、「HelloWorld」が作成されます。

画面を作成する。

まずは、ViewパートであるUIから作成してみます。

リソースの追加をします。

[Resources]フォルダを右クリックして、「追加」→「新規ファイル作成」

「View XIB」を選択します

ひとまず、「HelloWorldView」というファイル名で作成します。

「HelloWorldView.xib」というリソースファイルが作成されているのを確認します。

「HelloWorldView.xib」をクリックして、UIを編集します。

「InterfaceBuilder」と呼ばれる、Viewパートを編集するツールが起動します。

「Tool」から「Library」を選択します。

「Library」ウインドゥが表示されます。

「Library」から、「Round Rect Buttonスニペットを選択し、ドラッグ＆ドロップします。縦横の大きさや、配置は調整できます。

Round Rect Buttonをダブルクリックし、「Click」と文字を入力します。

同じように、Libraryから、「Lable」を選んで、ドラッグ＆ドロップし、ダブルクリックして、「Hello, World!」と入力します。

属性を設定します。

メニューバーから、「Tools」→「Inspector」を選択します。
左上のスライダーのようなアイコン、「View Attribute」を選択します。

ここで、フォントやカラーなど属性値を設定できます。

長くなってしまったので、次回は、View Controllerを追加して、実際の処理を追加していきます！

【関連記事】

• iPhone SDKを、SnowLeopardに入れる
• iPhone SDK ドキュメントの入手