【UITableView】UITableViewを使って詳細画面を作る-1【UITableViewDataSource】

1月 20

【UITableView】UITableViewを使って詳細画面を作る-1【UITableViewDataSource】

Posted by: daichi / Category: iphone開発

前回まででUITableViewでリストを表示して、
行を選択すると別画面を表示するところまで
できました。

今回は行選択時にその行の詳細画面を表示する画面を
UITableViewを使って作ります。

学べること

コントローラ内でのデータをビューに表示する方法
UITableViewに必要なもの-datasource

前提条件

【UITableView】選択行から別画面を呼び出すのプロジェクトの利用
【UITableView】選択行から別画面を呼び出すまでの内容の理解

手順

詳細画面のビュー作成
詳細画面のコントローラ作成
親画面から表示データを渡す
ビルド

詳細画面のビュー作成

今回はサクサクいきます。
前回までで真っ白なビューを作成しました。
そこにUITableViewを追加します。

Interface BuilderのLibraryの中からTableViewをドラッグして

viewのところまで持ってきます。
Interface Builderは自動的にサイズがちょうどよい
位置を微調整してくれるので、いいあんばいのところで
ドラッグを離します。

こんな感じになると思います。

この時点でビルドして実行すると
前回でビューとコントローラの接続が完了しているので、
新画面に貼付けたTableViewが表示されるのを確認できます。

ただ、まだ何も表示はされません。

少し表示するデザインを詳細画面っぽく変えてみます。

viewウィンドウのTable Viewを選択した後
Inspectorウィンドウの一番左のタブAttributeを開き、
Style項目を現在設定されているPlainからGroupedへ変更します。

するとテーブルが囲まれたようなデザインへ変わります。

この時点でビルドしてもまだ表示する行数などが未設定なので
背景しか表示されません。

詳細画面のコントローラ作成

編集するファイル

DetailViewController.h
DetailViewController.m

次にコントローラの作り込みに入ります。

ビュー上のTableViewとコントローラの紐付け

まずは先ほどビューに追加したUITableViewと
コントローラを紐付けます。

基本的にviewにUILableやUITextFieldといったコンポーネントを
配置した場合、その内容をコントローラから制御するためには
コントローラ内にビューに公開するフィールドを定義してやる
必要があります。

そのビューに公開するよという識別子はIBOutletです。
通常のフィールド定義の前にIBOutletをつけるだけです。

DetailController.hのファイルは以下のようになります。

^?View Code OBJECTIVE-C

#import 
 
@interface DetailViewController : UIViewController{
	IBOutlet UITableView *myTableView;
}
 
@property(nonatomic, retain) UITableView *myTableView;
 
@end

getter/setterを用意するためにDetailViewController.mにも
以下の記述を追加します。

^?View Code OBJECTIVE-C

@synthesize myTableView;

以上の定義でビューからIBOutlet付きのフィールド
myTableViewが見えるようになります。

Interface Builderに戻って、File’s Ownerオブジェクトを右クリック
してみてください。

こんな感じでmyTableViewがOutletsの中に表示されています。

試しにIBOutletを外して保存してみると、
表示されなくなることが分かると思います。

次にこのmyTableViewをビュー上のUITableViewと紐づけます。

紐付けは前回と同じように、myTableViewの右の○をビュー上の
UITableViewの位置までドラッグするだけです。

すると以下のように紐付けがされます。

表示するTableViewの設定

ビューとの連携が済んだので
詳細画面に表示する行数を指定しましょう。

行数は詳細画面に何を表示するかによりますが、
ここではそうですね、パチスロの収支データの詳細表示をするとして
日付、機種、金額、メモの４項目を表示することにします。

UITableViewに表示する行数は【UITableView】UITableViewに文字を表示するで見たように
numberOfRowsInSection:メソッドで指定します。

なので以下のようなコードを追加します。

^?View Code OBJECTIVE-C

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
     return 4;
}

実はこの段階ではまだ４行のテーブルは表示されません。
行数が指定されていても、その行に表示するセルが未設定です。

というわけでセルを表示するために
– tableView:cellForRowAtIndexPath:メソッドを追加します。
これも【UITableView】UITableViewに文字を表示するで出ましたね。

追加するのは空のセルを表示する以下のコードです。

^?View Code OBJECTIVE-C

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
    static NSString *CellIdentifier = @"Cell";
 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
    }
 
	// Set up the cell...
    return cell;
}

実はこの段階でも４行のテーブルは表示されません。

というのもこれらのメソッドはUITableViewDataSourceプロトコルで
定義されているメソッドだからです。

UITableViewでデータを表示するには
UITableViewDataSourceの役目を誰かにしてもらう必要があります。
その誰かというのはこのDetailViewControllerで今行おうとしているのですが、
TableViewからしてみればまだ、誰がDataSource役をしてくれるのかの判断が
できない状態です。

というわけで例によってInterface BuilderでDataSource役を指定します。
ビュー上のUITableViewを選択して右クリックすると以下のような
UITableViewのOutletsが表示されます。

その中のDataSource項目をDetailViewControllerのことを指しているFile’s Ownerへ紐づけます。

こんなふうになるはずです。

ここまできたらいったんビルドをしてみましょう。

コード内で指定したように４行の空セルが表示されますね。

ここまでで分かるように、UITableVIewでデータを表示するために最低限
必要なものはDataSourceの指定と
– tableView:numberOfRowsInSection:
– tableView:cellForRowAtIndexPath:
の２つのメソッドです。

ここではTableVIewDataSourceはFile’s OwnerであるDetailViewControllerに設定していますが、
当然UITableViewDataSourceプロトコルを実装したクラスなら
他のクラスでも問題はありません。

UITableVIewDataSourceプロトコルの詳細はやはり本家が参考になります。
– tableView:numberOfRowsInSection:

ちょっと長めになってきたので、ここで一旦切ります。

_JJ_Z Says:
10月 31st, 2009 at 4:40 PM
初めまして。

セルごとに違う詳細ページを作るにはどうしたらいいのでしょうか？
daichi Says:
10月 31st, 2009 at 11:31 PM
>_JJ_Zさん
tableviewのdidSelect〜メソッドでセルごとに違うコントローラをnavigationControllerにpushしてあげれば、別の画面を表示することができますよ。
_JJ_Z Says:
11月 4th, 2009 at 10:01 AM
ありがとうございます。
やってみます。

iphoneアプリで稼げるのか