Exception Code.

iPhone、Macと読書が大好き。iPhone・Mac・書評を中心に好きな事を書いていました。今は『ほーくブログ』でブログを書いています。

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

      2013/09/06

Xcode icon 375x375 75

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

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

StoryBoardでUIを作成

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

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

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

TableCustomCellTest xcodeproj  ViewController h 1

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

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

カスタムセルの実装方法

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

TableCustomCellTest xcodeproj  ViewController h

 

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

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

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

TableCustomCellTest xcodeproj  MainStoryboard storyboard 3 1

 

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

TableCustomCellTest xcodeproj  ViewController m

 

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

IOSシミュレータ

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

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

.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

 - 開発/プログラム

  関連記事

信じられないほど簡単にオブジェクト指向って何?を解決してくれる本

「俺がやらなきゃ誰かやる」が合言葉の社会に生きている僕です。分からないことを分か …

bloggerXcode-icon-375x375-75.png
[XCode]UINavigationBarにUIBarButtonItemでボタンを追加する方法

アプリ開発には欠かせないナビゲーションバー。 UINavigationBarにボ …

bloggerXcode-icon-375x375-75.png
[XCode]NSNotificationってなに?って人もとりあえずこれだけは知っておくべき

異なるクラス間で通知や変数を渡したりできる便利なNSNotificationです …

bloggerXcode-icon-375x375-75.png
[XCode]追加してインポートしたヘッダーファイルが見つからないときの対処法3つ

XCodeでインポートの宣言をした際(import <hoge.h> …

プログラミングができるだけではプロジェクトは成功しない

プログラマーなのに最近は電話対応で1日が終わる僕です。いろんな所でうめき声ととも …

bloggerXcode-icon-375x375-75.png
開発したiOSアプリに不具合を見つけた時に緊急で審査期間を早くしてもらう方法

先日とうとう恐れていたことが起こりました。黒い怪物が部屋に出たとかそういうことで …

[XCode]iPhoneに入っていないフォント(カスタムフォント)を使えるようにする方法と注意点

iPhoneは結構いろんなフォントが使えますが、「オリジナルのフォントを使いたい …

[git]Coda2でgitを設定してWordPressのテーマファイルをバックアップする方法

ブログのテーマを作り直していろいろしています。家ではiMac、外ではMacBoo …

bloggerXcode-icon-375x375-75.png
[XCode]UIViewControllerからUISplitViewController 1つのビューからSplitViewに遷移させる方法

先日、アプリを初めてAppleに申請しました。@hawk_aです。 iOS開発の …

bloggerXcode-icon-375x375-75.png
[XCode 4.3]Text Fieldの入力が終わったら次のText Fieldにソフトウェアキーボードでカーソルを移動させて最後にボタンを押す方法

XCodeをしこしこやっております。ほーく(@hawk_a)です。 プログラムの …