セルをカスタマイズしてオシャレなUITableViewを作成する
InterfaceBuilderを使って、TableViewのセルをカスタマイズする方法をまとめます。
セル用のclassを新規作成
これでカスタムセル用のクラスが作成されますが、IntefaceBuilderがありません。
なので、作ります。
これで空の状態のxibファイルが作成されます。
要素を並べる
xibファイルができたら、後はカスタムセル用に要素を並べます。
とりあえず、こんな感じで背景をカラフルにしてみました。
非常にオシャレです。
xibファイルをclassに紐付ける
これだけだと、ただInterfaceBuilderで見た目を作っただけなので、これを実際に使えるようにします。
まずは、このxibファイルをclassに紐付けます。
これで、xibファイルがclassに紐付きました。
classに紐付けたので、各要素にソースから値を設定できるようにプロパティにします。
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; }
立ち上げてみる
なんだか、狂気じみたTableViewが出来上がってしまいましたが、無事InterfaceBuilderを使用してセルをカスタマイズすることができました。
まとめ
xibファイルを編集するだけで、レイアウトの調整ができるのですごく便利です。