読者です 読者をやめる 読者になる 読者になる

pixyzehn blog

iPhone App, Mac App, Programming, Web service, Tool, Evernote, etc

UITableViewでカスタムセルを使ってみました

Xcode

f:id:inagex:20140111195453p:plain


通常のtableviewのセルだとカスタマイズ性があまりないので、カスタムセルを使用してみました。



mixi新人研修トレーニングをかなり参考にしてやりました。


https://github.com/mixi-inc/iOSTraining/wiki/4.3-%E3%82%BB%E3%83%AB%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA


XcodeのNewFileから Objective-C class を選択し、UITableViewCellのサブクラスとしてクラスを作成します。 クラス名は、CustomCellとしました。



次にxibファイルを作成します。NewFileからUserInterface → Empty を選んで、セルのクラス名(CustomCell.xib)と同じ名前で保存します。


例としてこのようにInterface builderからTableViewCellをドラッグ&ドロップで配置します。

そしていくつかLabelを配置します。


f:id:inagex:20140111200122p:plain


先ほど設置したLabelをCustomCell.hに結びつけます。


f:id:inagex:20140111200327p:plain


CustomCell.mのviewDidLoadで以下のメソッドを呼びます。

[_tableView registerNib:[UINib nibWithNibName:@"CustomCell" bundle:nil] forCellReuseIdentifier:@"Cell"];

次に以下のメソッドを置き換えます。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];
if (cell == nil) {
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"Cell"];
}
}

このメソッドを

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];
}

のように置き換えます。


これで実行すると先ほど作成したCellが反映されていると思います。


動的にLabel等を変更したい場合は先ほど置き換えたメソッドに以下のような変更を加えます。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];
    
    cell.cellText.text = @"~~~"
    cell.deadlineTime.text = @"~~"
    cell.remainingTime.text = @"~~"
    
    [self configureCell:cell atIndexPath:indexPath];
    return cell;
}


このとき

#import "CustomCell.h"

をTableViewのセルを表示しているところでインポートするのを忘れないようにします。


f:id:inagex:20140111202042p:plain


上記のようにカスタムセルを用いたTableViewが作成できました。