UITableView に独自のセルを表示する : Objective-C プログラミング

PROGRAM


UITableView に独自のセルを表示する

UITableView には、独自に設計したカスタムセルを表示できるようになっています。

たとえば、左にアイコン画像とその右にテキストを配置したセルを作成したいとします。もっとも、このようなセルなら標準の UITableViewCell でできるようになっているのですけど、ともあれ練習として、見て行きたいと思います。

標準の UITableViewCell で画像を表示する方法については UITableView のセルに画像を表示する に記してみました。画像を表示するだけであれば、標準のセルを使った方が簡単です。

 

今回は iOS 5.0 よりも前のバージョンでおなじみの NIB による方法で作成してみます。

なお、以下のコードは ARC (Automatic Reference Counting) を前提に記載していますので、ARC が有効でない場合には retain や release などを適切なタイミングで実行するようにする必要があります。

セルを管理するクラスを用意する

まず、UITableView のセルを管理するクラスを、UITableViewCell クラスの派生クラスとして用意します。

このクラス内では、UITableViewController とセルに配置するオブジェクトとの橋渡しを行う程度のコードを書く感じになります。

EzSystemSoundCell.h

#import <UIKit/UIKit.h>

 

// インターフェイスは UITableViewCell から派生させます。

@interface EzSystemSoundCell : UITableViewCell

{

@private

// この変数はセル上のラベルに関連付けます。

IBOutlet UILabel* _nameLabel;

}

 

// UITableViewController から操作できるようにプロパティを実装します。

@property (nonatomic,retain) UILabel* nameLabel;

 

@end

EzSystemSoundCell.m

#import "EzSystemSoundCell.h"

 

@implementation EzSystemSoundCell

 

@synthesize nameLabel = _nameLabel;

 

- (void)dealloc

{

// 今回は ARC 環境のため、nil を代入することにより release しています。

_nameLabel = nil;

}

 

@end

カスタムセルをレイアウトする

続いて、セルのレイアウトを行います。

今回は Xcode 4 で NIB を作成して、その中でレイアウトをして行きます。

 

EzSystemSoundCell.xib

既定の UIView を削除して、代わりの UITableViewCell を追加したら、今回はそこに、画像用の UIButton と、文字用の UILabel を配置しました。UIButton には、Style=Custom で、Image で画像を配置しています。

 

レイアウトが出来たら、Identitiy Inspector で、UITableViewCell のクラスを、先ほど作成した独自クラスに設定します。

  

そして、Attribute Inspector の Identifier のところで、UITableViewCell の Reuse Identifier を設定しておきます。

とりあえず今回は "Cell" と設定しておけば良さそうです。ちなみにこの Reuse Identifier を使って、UITableViewController が、セルのインスタンスを作りすぎないように管理してくれるようです。

 

また、"File's Owner" のクラスは UIViewController に設定します。

  

 

このような設定ができたら、レイアウトとクラスとを関連付けて行きます。

まず、"File's Owner" の "view" プロパティと UITableViewCell とを結合します。

また、UITableViewCell から派生したクラスに実装したアウトレット "_nameLabel" と、レイアウトしたラベルとを関連付けておきます。

これで、インターフェイスビルダーでのセルの準備が整いました。

UITableViewController でセルのインスタンスを生成する

インターフェイスビルダーで作成したセルは、UITableViewController の "tableView:cellForRowAtIndexPath:" メソッド内でインスタンスを生成すれば、そのコントローラーが管理する UITableView の中で使用することができるようになります。

Xcode 4 で UITableViewController を作成すると、メソッドのテンプレートができているので、それを次のような感じに調整します。

// セルの生成が必要な際に、UITableViewController が呼び出すメソッドです。

- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)

{

// ここで、カスタムセルのレイアウト時に設定した Reuse Identifier を指定します。

static NSString* CellIdentifier = @"Cell";

 

// まずは Reuse Identifier を使用して、利用可能なセルのインスタンスがあればそれを取得します。

EzSystemSoundCell* cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

 

if (cell == nil)

{

// セルのインスタンスがなければ、UIViewController を介して生成します。

UIViewController* controller;

 

// NIB 名は、カスタムセルを作成した XIB ファイルです。

controller = [[UIViewController alloc] initWithNibName:@"EzSystemSoundCell" bundle:nil];

 

// レイアウトの際に UIViewController の view に関連付けたカスタムセルを取得しています。

cell = (EzSystemSoundCell*)controller.view;

}

 

// カスタムセルのプロパティを設定します。

cell.nameLabel.text = @"TEST";

 

// カスタムセルを返します。

return cell;

}

このように実装することで、UITableView のセルとして、独自に設計したカスタムセルを表示されるようになりました。

このような感じで、いろいろな配置のオリジナルの機能を載せたセルを扱うことが可能になります。

[ もどる ]