[1]:UITableViewでHelloWorldを表示させる

今回のチュートリアルでは、UITableViewを使って簡単なアプリケーションを構築します。 おなじみの”HelloWorld”を表示させるアプリです。 このチュートリアルでは、Objective-Cの基礎を習得済の方を想定しています。 今回学ぶこと：

• Navigation-Based Applicationの新規作成
• デフォルト状態で構成されてるファイル群について
• “HelloWorld”を表示するため、UITableViewのセルの変更

このチュートリアルでは、既にiPhone SDKがインストールされ
Xcodeなどが利用出来る環境を想定しています。

Navigation-Based Applicationの新規作成

Xcodeを起動し、「新規プロジェクト」を選択します。 以下のようなウインドウが表示されたら、左ペイン内のiOS > Application が選択されているのを確認、「Navigation-Based Application」を選んで、「選択」ボタンを押す。(Use Core Data for storage  のチェックは不要。)

その後に表示されるプロジェクト名は「HelloWorld」として保存。

プロジェクト名は、自分で分かりやすい名前にすれば良いのですが、
「HelloWorld」以外で保存した場合は、デフォルト状態で作成される
ファイル群の名前も変わってきますので、適宜、読みかえてください。

デフォルト状態で構成されてるファイル群について

プロジェクト名を決定後、以下の画像のように、多くのファイルがプロジェクトに追加され、Xcode上に並んでいると思います。

これらのファイル群の中でも、今回、変更する必要があるファイルは、１つだけですので、心配する必要はありません。

以下、各ファイルについて簡単に説明します。

1. CoreGraphics.framework, Foundation.framwork, UIKit.framework 名前をみれば、検討がつく方も多いかとは思いますが、他のプログラミング言語と同様、あらかじめ準備されているフレームワーク(関数ライブラリ)です。
2. HelloWorld.app これが、iPhoneにインストールされるアプリです。
3. HelloWorld_Prefix.pch コンパイル時にインクルードされるファイル？(詳細不明です。。。)
4. HelloWorldAppDelegate.h 変数の定義が含まれているヘッダーファイルです。C、C++に類似。
5. HelloWorldAppDelegate.m すべての魔法はこのファイルから始まります。実行のスタート地点。main.mファイルは、このオブジェクトを呼び出します。
6. Info.plist このプログラムに関する様々なメタ情報を含んでいます。iPhoneなど実機でのテストをする時までは、特に編集する機会はないです。
7. main.m 多くのプログラミング言語と同じように、このファイルからプログラムが実行されます。主な機能は、私たちのオブジェクトをインスタンス化し、プログラムを起動します。このファイルを編集する必要はありません。
8. MainWindow.xib メインウインドウに表示される見た目を決める情報を含んでいます。このファイルをダブルクリックすると”Interface Builder”が起動します。このファイルは、コードを含みません。
9. RootViewController.h, RootViewController.m メインウインドウに追加されているView Controller です。 Xcodeで「Navigation-Based Application」を選ぶとインターフェースの基本部分が追加されます。
10. RootViewController.xib テーブルをエミュレートするために追加されたビューで、行や列をもっています。私たちは、これらの行のうちの１つに”HelloWorld”を表示させます。

まず、コードの編集をする前に、デフォルトの状態でビルド＆実行してみましょう。 Xcode上の「ビルドと実行」ボタンを押すと、iPhoneシミュレータが起動し、以下の画像のような、空のテーブルが表示されると思います。

“HelloWorld”を表示するため、UITableViewのセルの変更

それではコードを変更していきましょう！

RootViewController.mを開き、編集していきましょう。これは、デフォルトでメインビューに追加されているビューコントローラです。Table View のスーパークラスからオーバーライドされています。 numberOfRowsInSection が定義されている箇所を探し、編集します。

// Customize the number of rows in the table view.

– (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

return 0;

}

numberOfRowsInSection この関数は、テーブルに「行」がいくつあるかをアプリケーションに通知します。デフォルトでは、これは「０」を返します。

以下のように編集します。

return 0;

↓

return 1;

これで、このアプリケーションに、私たちのテーブルには、1行必要ということが通知され、以下の画像のように最初の1行目が選択できるようになります。

それでは、次に、cellForRowAtIndexPath が定義されている箇所を探し、編集します。先ほど編集した箇所のすぐ下側にあると思います。

// Customize the appearance of table view cells.

– (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.

return cell;

}

cellForRowAtIndexPath この関数は、テーブル内の各行ごとに１度呼ばれます。これは、特定の行に表示するコンテンツを定義する場所です。この関数は、指定されたセル（行）のオブジェクトを作成し、それを返します。

今回の場合は、”HelloWorld”という文字列を表示させたいので、以下のように編集します。斜体の箇所が追加したコードです。

// Customize the appearance of table view cells.

– (UITableViewCell *)tableView:(UITableView *)tableViewcellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellIdentifier = @”Cell”;

UITableViewCell *cell = [tableViewdequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil) {

cell = [[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:CellIdentifier] autorelease];

}

// [cell setText:@”HelloWorld”];

//↑上記でも表示されますが、iPhone3.0以降、推奨されないようになっているので、以下に変更。

[cell.textLabel setText:@”HelloWorld”];

// Configure the cell.

return cell;

}

ifブロックのなかで、すでにセルが作成されていないかをチェックし、作成されていなければ、作成し、もしくは、既に作られているセルを利用します。

このおかげで、関数が呼ばれるたびに新しいセルが作成されるを防ぎます。

上記の通り、変更後、ビルドして実行すると以下の画像のように「HelloWorld」という１行が表示されると思います。

以上で、今回のテーブルの出来上がりです。