前回の続き。今回はTableViewCellのSubclass(継承)を作り、セルの表示をカスタマイズする方法です。

サンプルコード: https://github.com/stack3/UITableViewSamples

サンプルコードを起動して、Subclassing Cellを選択します。

01

02

上にUILabel、下にUIImageViewを配置し、テキストと画像を表示しています。この表示はUITableViewCellのSubclassであるSTCustomCellを使っています。

STCustomCell.xib

STCustomCell.xibで、このようにUILabelとUIImageViewを配置しています。

03

Auto Layoutを使っていますが、その詳しい説明は本筋ではないので割愛します。Auto Layoutに関する記事は以下を参考にしてください。

Auto Layoutチュートリアル

カスタムセルのxibでレイアウトするときに気をつけるべきことがあります。xibファイルを作ると最初にViewが配置されていますが、この上にSubviewを配置しないでください。代わりにViewを削除して、TableViewCellを配置します。

04

05

最初に配置した時は高さが低いので伸ばしてからSubviewを配置します。

06

STCustomCellクラスとxibのひもづけ

次にSTCustomCellクラスで、STCustomCell.xibをひもづけるために、IBOutletでUILabelとUIImageViewのメンバ変数を宣言します。

@property(weak, nonatomic) IBOutlet UILabel *titleLabel;
@property(weak, nonatomic) IBOutlet UIImageView *photoImageView;

STCustomCell.xibを開いて、配置したTableViewCellを選択。Identity inspectorを開いてCustom Classを、STCustomCellにします。

07

次にConnections inspectorを開いて、IBOutlet宣言したプロパティとxib上のUILabel、UIImageViewをリンクします。

08

xibからSTCustomCellオブジェクトをロードするためのメソッドを用意します。

+ (id)loadFromNib
{
    // クラス名を文字列に変換することで、nibNameはSTCustomCellとなる。
    NSString *nibName = NSStringFromClass([self class]);
    UINib *nib = [UINib nibWithNibName:nibName bundle:nil];
    return [[nib instantiateWithOwner:nil options:nil] objectAtIndex:0];
}

カスタムViewとxibのひもづけの話は、こちらでも説明しているので参考にしてください。

カスタムViewをInterface Builderで配置する

STCustomRowクラス

セル表示の元となるデータクラスは、表示タイトルと画像を持つようにしています。

@interface STCustomRow : NSObject

@property (strong, nonatomic) NSString *title;
@property (strong, nonatomic) UIImage *image;

@end

STSubclassingCellViewControllerクラス

initメソッドで行データを配列(_rows)に格納します。

_rows = [NSMutableArray arrayWithCapacity:3];

STCustomRow *row = [[STCustomRow alloc] init];
row.title = @"castle01";
row.image = [UIImage imageNamed:@"castle01.jpg"];
[_rows addObject:row];

row = [[STCustomRow alloc] init];
row.title = @"castle02";
row.image = [UIImage imageNamed:@"castle02.jpg"];
[_rows addObject:row];

row = [[STCustomRow alloc] init];
row.title = @"castle03";
row.image = [UIImage imageNamed:@"castle03.jpg"];
[_rows addObject:row];

viewDidLoadでUITableView#rowHeightで、セルの高さを設定します。

_tableView.rowHeight = 350;

tableView:cellForRowAtIndexPath:で、再利用可能なSTCustomCellオブジェクトがなければ生成。STCustomCellのtitLabel、photoImageViewのプロパティを設定します。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *reuseIdentifier = @"CellID";

    STCustomCell *cell = (STCustomCell *)[_tableView dequeueReusableCellWithIdentifier:reuseIdentifier];
    if (cell == nil) {
        cell = [STCustomCell loadFromNib];
    }

    STCustomRow *row = [_rows objectAtIndex:indexPath.row];
    cell.titleLabel.text = row.title;
    cell.photoImageView.image = row.image;

    return cell;
}

以上、カスタムセルの説明でした。行ごとにセルの高さが異なる場合は以下の記事を参考にしてください。

高さが異なるセルを持つUITableViewのサンプル

その6へ続く。