UITableViewCellカスタマイズ

http://d.hatena.ne.jp/KishikawaKatsumi/20081024/1224857278を参考にカスタマイズ法を整理する。

新規プロジェクトでテンプレート「Navigation-Based Application」を選択。プロジェクト名を「TableCell1」として作成。

プロジェクトが作られたら早速、新規ファイルの追加で、iOSのUser Interfaceから「View xib」を選択。ファイル名は「FeedListCell.xib」とする。

 プロジェクトに追加された「FeedListCell.xib」をダブルクリックして立ち上げ（Interface Builder）、元からあるViewを削除する。

↓こんな感じ

Interface BuiderのLibraryからTable View Cellをドラッグして配置。

配置したTable View Cellをダブルクリックして、Viewを立ち上げ

適当にデザインする。とりあえず、UILabelを２つ配置。

配置すると以下のようになる。

AttibutesのIdentifierに「FeedListCell」と入力して保存。

続いてXcodeで対応するUITableViewCellを継承するクラスとViewControllerを作る。
まずは、UITableViewCell。新規ファイル追加でiOSのCocoa Touch ClassからObjective-C classを選択、Subclass ofはUITableViewCellを指定。ファイル名は「FeedListCell」とする。

作成した「FeedListCell.h」「FeedListCell.m」にそれぞれ以下のように記述。

「FeedListCell.h」

#import <UIKit/UIKit.h>

@interface FeedListCell : UITableViewCell {
    IBOutlet UILabel *player;
    IBOutlet UILabel *point;
}
@property (nonatomic, retain) UILabel *player;
@property (nonatomic, retain) UILabel *point;
@end

「FeedListCell.m」

#import "FeedListCell.h"

@implementation FeedListCell

@synthesize player,point;

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {

    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}

- (void)dealloc {
    [player release];
    [point release];
    [super dealloc];
}

@end
 

次に「追加>新規ファイル」でiOSのCocoa Touch ClassからUIViewController subclassを選択。「UITableViewController subclass」のチェックは外す。ファイル名は「FeedListCellController」とする。

生成された「FeedListCellController.h」に下のコードを記述。

「FeedListCellController.h」

#import <UIKit/UIKit.h>
#import "FeedListCell.h"

@interface FeedListCellController : UIViewController {
    IBOutlet FeedListCell *cell;
}
@property (nonatomic, retain) FeedListCell *cell;
@end
 

 「FeedListCell.xib」を立ち上げ、「File's Owner」を選択してIdentityのClassを「FeedListCellController」に、続いて「Feed List Cell」を選択してIdentityのClassを「FeedListCell」に変更する。

変更すると以下のようになる。

 そのままFile's Ownerを右クリックして、cellとviewをそれぞれ「Feed List Cell」と接続する。

次にFeed List Cell(FeedListCell)を右クリックして、playerとpointを以下のように接続する。

これでセルの準備は完了。

カスタマイズしたセルを実際に表示には、「RootVIewController.m」に以下のように記述。

#import "RootViewController.h"
#import "FeedListCellController.h"

@implementation RootViewController

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}

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

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
   
    static NSString *CellIdentifier = @"FeedListCell";
   
    FeedListCell *cell =(FeedListCell*) [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        FeedListCellController *controller=[[FeedListCellController alloc] initWithNibName:CellIdentifier bundle:nil];
        cell=(FeedListCell*)controller.view;
        [controller release];
    }
   
    // Configure the cell.
    [cell.player setText:@"ayabin"];
    [cell.point setText:@"50"];

    return cell;
}
 

ビルドした結果。