2010年11月19日 過去Blog
今回のチュートリアルでは、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  のチェックは不要。)

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

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

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

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

1-2

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

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

  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 テーブルをエミュレートするために追加されたビューで、行や列をもっています。私たちは、これらの行のうちの1つに”HelloWorld”を表示させます。
まず、コードの編集をする前に、デフォルトの状態でビルド&実行してみましょう。 Xcode上の「ビルドと実行」ボタンを押すと、iPhoneシミュレータが起動し、以下の画像のような、空のテーブルが表示されると思います。

1-3

“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 この関数は、テーブルに「行」がいくつあるかをアプリケーションに通知します。デフォルトでは、これは「0」を返します。

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

return 0;

return 1;

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

1-4

それでは、次に、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 この関数は、テーブル内の各行ごとに1度呼ばれます。これは、特定の行に表示するコンテンツを定義する場所です。この関数は、指定されたセル(行)のオブジェクトを作成し、それを返します。

今回の場合は、”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」という1行が表示されると思います。

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

1-5

この投稿へのコメント

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CAPTCHA


ピックアップ記事

デジカメのメモリやUSBメモリのデータを誤って削除、フォーマットしてしまった場合の復元方法

2010年10月07日 過去Blog
以下のフリーソフトで復元できました。 http://www.powerdatarecovery.com/ 日本の有料の物も試してみましたが、上記の無料のソフトのほうが精度が高かったです。 anabolic pharma - your personal online pharmacy store…
「デジカメのメモリやUSBメモリのデータを誤って削除、フォーマットしてしまった場合の復元方法」をはてなブックマークに追加

Firefox で ヤフーサイトエクスプローラーが表示されない場合

2010年06月18日 過去Blog
ページの自動転送設定が正しくありません。 などと表示されて、Yahooのサイトエクスプローラが表示されない場合は、yahoo.co.jpに関するクッキーをブラウザから削除することでエラーが出なくなります。 movers los angeles…
「Firefox で ヤフーサイトエクスプローラーが表示されない場合」をはてなブックマークに追加

ModalView経由での値の受け渡し

2011年05月03日 過去Blog
http://timneill.net/2010/11/modal-view-controller-example-part-2/ http://ameblo.jp/iphone0126/entry-10716795357.html buy steroids…
「ModalView経由での値の受け渡し」をはてなブックマークに追加

外部のサイトから画像をサーバに取得(コピー)

2009年12月06日 過去Blog
$img_path // 取得する画像のパス(URL) $path = "ここは保存先のパス";  //  /home/ドメイン/public_html/imagesなど $img = file_get_contents($img_path) ;//画像を取得 $fullpath = $path.basename($img_path);//画像の保存フルパス file_put_conten…
「外部のサイトから画像をサーバに取得(コピー)」をはてなブックマークに追加

Ushahidi API の使用方法

2011年04月08日 過去Blog
http://wiki.ushahidi.com/doku.php?id=ushahidi_api(英語版) http://wiki.ushahidi.com/doku.php?id=ushahidi_api_jp (日本語版) web hosting reviews…
「Ushahidi API の使用方法」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy