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

セルをカスタマイズしてオシャレなUITableViewを作成する

InterfaceBuilderを使って、TableViewのセルをカスタマイズする方法をまとめます。

セル用のclassを新規作成

f:id:w6500:20131126190020p:plain
f:id:w6500:20131126190338p:plain

これでカスタムセル用のクラスが作成されますが、IntefaceBuilderがありません。
なので、作ります。

f:id:w6500:20131126191028p:plain

これで空の状態のxibファイルが作成されます。

要素を並べる

xibファイルができたら、後はカスタムセル用に要素を並べます。

f:id:w6500:20131126191430p:plain

とりあえず、こんな感じで背景をカラフルにしてみました。
非常にオシャレです。

f:id:w6500:20131126191902p:plain

xibファイルをclassに紐付ける

これだけだと、ただInterfaceBuilderで見た目を作っただけなので、これを実際に使えるようにします。
まずは、このxibファイルをclassに紐付けます。

f:id:w6500:20131126194854p:plain

これで、xibファイルがclassに紐付きました。

classに紐付けたので、各要素にソースから値を設定できるようにプロパティにします。

f:id:w6500:20131126195754p:plain

f:id:w6500:20131126204955p:plain

titleLabelというプロパティを追加しました。

カスタムセルを使うための準備

これで、xibファイルの準備は完了です。
ここからは、実際にTableViewにカスタムセルを適用していきます。

作成したカスタムセル用のクラスをインポートします。

#import "TACell.h"

xibファイルを使用することを宣言

[tableView registerNib:[UINib nibWithNibName:NSStringFromClass([TACell class]) bundle:nil] forCellReuseIdentifier:@"cell"];

UITableViewのregisterNibメソッドで、先ほどxibファイルを紐付けたカスタムセル用のクラスを指定します。
また、セルの再利用のためのIDを第二引数で指定します。

cellに値をセットする

UITableViewのセルを返すdelegateメソッドで、TACellを返すようにします。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    TACell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    cell.titleLabel.text = @"タイトル";
    
    return cell;
}

立ち上げてみる

f:id:w6500:20131126210044p:plain:w200

なんだか、狂気じみたTableViewが出来上がってしまいましたが、無事InterfaceBuilderを使用してセルをカスタマイズすることができました。

まとめ

xibファイルを編集するだけで、レイアウトの調整ができるのですごく便利です。