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

ニペブ - iPhone / iOSアプリ開発

iPhone / iOS アプリ開発方法と技術情報、入門レベルの初心者向けの記事を書いています。

(iOS/iPhoneアプリ開発) UITableViewCellの自作カスタムセルを作成する

完成イメージ

自作のカスタムセル(UITableViewCell)にラベル(UILabel)とテキストフィールド(UITextField)とスイッチ(UISwitch)を表示させています。
f:id:nipe880324:20131227144659p:plain:w320

環境

StoryBoardの作成

まずは、次のようにStoryBoardを作成します。
f:id:nipe880324:20131227145132p:plain

  1. TableViewControllerを追加
  2. TableViewControllerのClassに「CustomCellOneViewController」を記載
  3. そのTableViewCellのReuse Identifierに「CustomOneCell」を記載(StyleがCustomであることを一応確認)
  4. TableViewCellの下にあるContentViewに「Label」、「Text Field」、「Switch」を追加

カスタムセル(カスタム UITableViewCell)の作成

次にCustomCellOneViewController.h に次のカスタムセル用のクラスを作成します。

// カスタムセル
@interface CustomOneCell : UITableViewCell

@end

さらに、CustomCellOneViewController.mにも実装を記載します。中は空ですがw

// カスタムセル
@implementation CustomOneCell

@end

StoryBoardの作成(再び)

  1. UITableViewCellのClassに上記で作ったクラス名「CustomOneCell」を記載します。
  2. StoryBoardとCustomCellOneViewController.hの2つのビューを表示し、「Ctrl + ドラッグ」を使って、CustomOneCellに「Label」、「TextField」、「Switch」を追加します。

CustomCellOneViewController.hに次のような記述が記載されます。

// カスタムセル
@interface CustomOneCell : UITableViewCell

@property (weak, nonatomic) IBOutlet UILabel *label;
@property (weak, nonatomic) IBOutlet UITextField *textField;
@property (weak, nonatomic) IBOutlet UISwitch *switchCtrl;

@end

CustomCellOneViewController.hの作成

次に、CustomCellOneViewController.h を作成します。
特に追記することはありません。詳細はコメントを確認してください。

// カスタムセル
@interface CustomOneCell : UITableViewCell

// カスタムセルのパーツ
@property (weak, nonatomic) IBOutlet UILabel *label;
@property (weak, nonatomic) IBOutlet UITextField *textField;
@property (weak, nonatomic) IBOutlet UISwitch *switchCtrl;

@end

// コントローラ部分
@interface CustomCellOneViewController : UITableViewController

@end

CustomCellOneViewController.mの作成

次に、CustomCellOneViewController.m を作成します。
UITableViewControllerを継承して作ったため、最初からソースコードが記載されています。
しかし、コメントアウト部分を削除し、若干修正した実際のソースコードです。
細かくコメントを記載してますのでそれを見れば大体分かると思います。

#import "CustomCellOneViewController.h"

// カスタムセル
@implementation CustomOneCell

@end

// コントローラ部分
@interface CustomCellOneViewController ()

@end

@implementation CustomCellOneViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark - Table view data source

// セル数を返す
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // 本来はデータベースなどから配列を取得して、countの値を返すとよい
    return 5;
}

// セルの内容を返す
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"CustomOneCell";
    // カスタムセルにキャスト。キャストすることによりカスタムセルのpropertyが使える
    CustomOneCell *cell = (CustomOneCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
    
    // セルの値を設定
    cell.label.text = [NSString stringWithFormat:@"No%d", indexPath.row+1];   // Label
    cell.textField.placeholder = @"値を入れてください";  // UITextField
    cell.switchCtrl.on = indexPath.row % 2; // UISwitch
    
    return cell;
}

@end

UITableViweなどのUIKitに関するサンプルのソースコードGithubに置いてあります。よろしければ、覗いてみてください。
yanagi0324/test-uikit · GitHub

補足

もし、カスタムセル上のSwitchのイベントを処理したい場合、MVCの原則からイベント処理ロジックはCell側(View)ではなくはController側に記載したがいいと思います。そして、Cellの内容を設定する箇所(cellForRowAtIndexPath)でdelegateなどを登録します。

参考情報

分かりづらい箇所やご質問などありましたら、 コメントやメールアドレスにご連絡いただけると嬉しいです。