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


ピックアップ記事

[3]:Interface Builder と Xcode を接続する方法

2010年11月30日 過去Blog
今回は、Interface Builder を使って、UITextField, UILabel, そして ボタンを配置し、Xcode で書いたコードと接続し、動作させてみます。 アプリケーションの仕様 ユーザーがテキストボックスをタップすると入力用のキーボードが表示される ユーザーは自分の名前(任意の文字列)を入力する 実行ボタンを押す ボタンを押すとラベルが、「Hello! ユーザー名!」のような表示に更新される もし、テキストボックスが空のまま実行されると、警告を表示させる …
「[3]:Interface Builder と Xcode を接続する方法」をはてなブックマークに追加

[2]:Interface Builder のみで Hello World

2010年11月19日 過去Blog
前回は、UITableViewを使って”HelloWorld”を表示しましたが、今回は、Interface Builderを使って、コードを書かずに"HelloWorld"を表示させてみます。 非常に簡単なアプリではありますが、Interface Builderを理解する最初のステップです。 今回の流れ: View Based Projectの新規作成 iPhone シュミレータで確認 UIの要素をホーム画面に追加 コードを実行 …
「[2]:Interface Builder のみで Hello World」をはてなブックマークに追加

iPadでiOS Dev Center内のリファレンスを見ると(^^)

2011年01月08日 過去Blog
iPad用に最適化されていて、とても使いやすくなっています(^_^) 私は、さっき気付いたんですが、既にご存知の方も多いのかもしれませんが、、、(^_^;)…
「iPadでiOS Dev Center内のリファレンスを見ると(^^)」をはてなブックマークに追加

iphoneアプリ開発に役立つリンク集

2010年11月19日 過去Blog
iOS Reference Library 日本語に翻訳されたiOSのドキュメントです。 スタンフォードiPhone Application Programming アップルの現役社員による講義(スタンフォード大学の授業)が見られます。 iPhone Application Programming Course (CS 193P) 2010 Winter 講義動画…
「iphoneアプリ開発に役立つリンク集」をはてなブックマークに追加

wordpress 特定カテゴリ内の記事を抽出

2010年11月19日 過去Blog
参考サイト:http://alphasis.info/2010/10/posts-by-categories/ cytomel t3…
「wordpress 特定カテゴリ内の記事を抽出」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy