[XCode]StoryBoardで作ったTableViewCellでオリジナルのセルを表示する方法

TableView標準のセルではやりたいことが表現できなさそうな時には、TableViewCellを使用します。

しかし、StoryBoardで作ったTableViewCellを表示させる方法が結構わからなくて頭を抱えたのでシェアします。

StoryBoardでUIを作成

まずはStoryBoardを使ってUIを作成します。

僕はまっさらなUIViewControllerからViewを作りこんでいくのが好きなので、UIViewControllerにTableViewとTableViewCellを設置しました。

めんどくさい人はTableViewControllerから作ってもOKです。この例では3つのUILabelに文字を表示させたいので、こんな感じにします。

この時、ラベルはOutletに繋がないように注意してください。

Outletに繋いでしまうと、Uncategorized Compilation failed.なるエラーが発生します。

カスタムセルの実装方法

.hファイルのソースは以下になります。

ここまで準備ができたら、次はアトリビュートインスペクターから各LabelのTagを指定します。

すべて違うタグ番号で、0以外のものにしましょう。

これが今回のミソとなります。

次に処理を実装していきます。.mファイルで、指定したラベルのタグを読み込む→ラベルに文字を代入という流れを作ります。

これをビルドして実行すれば以下のようになるはずです。

これでセルをカスタムし放題ですね！

カスタムセルのソースコード

.hファイル

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITableViewDelegate,UITableViewDataSource> {
    IBOutlet UITableView *tblTest;
    IBOutlet UILabel *lbl1;
    IBOutlet UILabel *lbl2;
    IBOutlet UILabel *lbl3;
}

@end

.mファイル

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    tblTest.delegate = self;
    tblTest.dataSource = self;
    
}

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

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"CustomCell"];
    
    // 表示タグ
    lbl1 = (UILabel *)[cell viewWithTag:1];
    lbl2 = (UILabel *)[cell viewWithTag:2];
    lbl3 = (UILabel *)[cell viewWithTag:3];
    
    // ラベルに文字を指定
    lbl1.text = @"セルの";
    lbl2.text = @"カスタムに";
    lbl3.text = @"成功！";

    // 設定したセルを返す
    return cell;
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

@end