前回は、実際にRSSを読み込んでパースを行い、その内容をテーブル表示するというアプリケーションの基本的な実装を具体的に解説した。今回は前回の内容を受け、アプリケーションのより詳細な部分の実装に取り掛かろう。

 具体的には、テーブルセルの内容をカスタマイズする方法と、セルにタップすると画面が遷移するナビゲーション機能の追加について解説する。ナビゲーションによる画面遷移を追加することで、よりiPhoneらしいアプリケーションを体験してもらえるはずだ。

テーブルセルの変更

 テーブルセルとはTableView内の各行要素のことを指し、前回はRSSパーサーで取り出したtitle要素をそのままセルのテキストとして受け渡していた。


- (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];
    }
    cell.textLabel.text = [[myDataSource objectAtIndex:indexPath.row] title];
	
    return cell;
}
前回のcellForRowAtIndexPathの抜粋

 生成直後のコードでは、cellはUITableViewCellクラスのオブジェクトとして定義されている。このままではカスタマイズしづらいので、今回はMyTableViewCellクラスを作成し、セル内に様々な要素を追加していこう。

MytableViewCellクラスの作成

画面1●新規ファイルの作成
[画像のクリックで拡大表示]

 まず新規ファイルとしてUITableViewCellのサブクラスを、MyTableViewCellクラスと名前を付けて作成する(画面1)。

 UITableViewCellクラスにはcontentViewというViewが用意されており、contentViewに様々なViewを追加していくことで、セルの見た目をカスタマイズすることが可能となる。そこで、今回はタイトルと日付に加えてアイコン画像を差し込み、セルの外観をカスタマイズしてみよう。

 MyTableViewCell.hにはあらかじめメンバー変数として、

UILabel *titleLabel;
UILabel *pubDateLabel;

の2つを追加しておく。

 次に、MyTableViewCell.mのinitWithStyleメソッド内で、これらのLabelオブジェクトの生成とcontentViewへの追加を行う。


- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {

		titleLabel = [[UILabel alloc] initWithFrame:
					  CGRectMake(5, 0, self.contentView.frame.size.width-5, self.contentView.frame.size.height*0.5)];
		
		pubDateLabel = [[UILabel alloc] initWithFrame:
						CGRectMake(5, self.contentView.frame.size.height*0.5, self.contentView.frame.size.width-5, self.contentView.frame.size.height*0.5)];
		
		[self.contentView addSubview:titleLabel];
		[self.contentView addSubview:pubDateLabel];
    }
    return self;
}

 セルを上下に分けて、上段にtitle、下段にpubDateを表示するようにLabelをcontentViewに追加した。Labelのフレームを作る際に左右のマージンとして5px確保してあるが、ここも自由に変更するとよいだろう。

 さて、Labelの作成は終わったが、ここで肝心のテキストをLabelに受け渡す処理が必要となってくる。

 前回まではListViewControllerクラスの方で直接cell.textLabel.textにテキストを渡していたが、今回はこのcellはMyTableViewCellクラスのオブジェクトなので、MyTableViewCellクラスの方でsetするメソッドを用意する。


- (void)setLabelText:(Item *)item {
	titleLabel.text = item.title;
	pubDateLabel.text = item.pubDate;
}

 Itemオブジェクトを受け取り、その中のtitle要素とpubDate要素をそれぞれのLabelのtextに渡している。これをListViewControllerの方で呼び出すため、ヘッダー・ファイルに宣言を書いておく。


#import 
#import "Item.h"

@interface MyTableViewCell : UITableViewCell {
	UILabel *titleLabel;
	UILabel *pubDateLabel;
}
- (void)setLabelText:(Item *)item;
@end
MyTableViewCell.h

#import "MyTableViewCell.h"

@implementation MyTableViewCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
		titleLabel = [[UILabel alloc] initWithFrame:
					  CGRectMake(5, 0, self.contentView.frame.size.width-5, self.contentView.frame.size.height*0.5)];
		pubDateLabel = [[UILabel alloc] initWithFrame:
						CGRectMake(5, self.contentView.frame.size.height*0.5, self.contentView.frame.size.width, self.contentView.frame.size.height*0.5)];
		[self.contentView addSubview:titleLabel];
		[self.contentView addSubview:pubDateLabel];
    }
    return self;
}

- (void)setLabelText:(Item *)item {
	titleLabel.text = item.title;
	pubDateLabel.text = item.pubDate;
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
	
    [super setSelected:selected animated:animated];
	
    // Configure the view for the selected state
}

- (void)dealloc {
	[titleLabel release];
	[pubDateLabel release];
    [super dealloc];
}
MyTableViewCell.m

 MyTableViewCellクラスの実装は以上のようになる。