4.3 セルのカスタマイズ
UITableViewCellには、デフォルトでいくつかのオプションがあります。
例):
- detailLabel : タイトルより小さめのUILabel。
- accessoryType : このボタンを押したらこういうアクションですよ、というのを伝える目印
- imageView : 画像を貼れる、ただしアイコンサイズ
このようなオプションはありますが、カスタマイズ性は低く、オリジナルなデザインを用いることは難しいです。
そこで、ここではxibを使ってカスタムセルを作り、tableviewに表示する方法を紹介します。
カスタムセルを作り、tableviewで用いるには以下の手順が必要です
- xibでセルを作る
- さらに動的な変更を加える場合は.mファイルを追加しその中で変更を加える、ということも可能です
- 作ったtableviewのセルとして登録
- セルの高さに合わせてcellの高さを変える
この手順に沿って、実装を進めて行きます。 プロジェクトファイルは4.2のものから引き続きで問題ありません。 (注:TableViewのスタイルはPlainにしておいてください）
今回は以下の画像を使うので、サンプルプロジェクトに追加してください
###カスタムセルのxibの追加
-
XcodeのNewFileから Objective-C class を選択し、UITableViewCellのサブクラスとしてクラスを作成します。 クラス名は、TVSCustomCellとしました。
-
次に同じ名前のxibファイルを作ります。NewFileからUserInterface → Empty を選んで、セルのクラス名と同じ名前で保存してください。(サンプルではTVSCustomCellです) この辺りは、前回のviewをxibから作る、とほぼ同じです。
-
Interface builder から TableViewCell をドラッグアンドドロップしてCellを作り、以下のようにカスタマイズしてください。
- 高さを125pxくらいにする
- 左下10,10くらいの位置に正方形(44×44くらいの大きさ)のUIImageViewを置いて、imageをmaimai.jpg か daisuke.jpg を指定してください
- (x,y) = (54, 3), (width, height) = (219, 106) くらいの位置と大きさでUIImageViewを置いて、imageにfukidashi_left.jpgを指定してください。ストレッチが少しおかしいので、(x,y) = (0.5, 0.5), (width, height) = (0, 0) として、角が変に伸びないように調整します。
- 吹き出し画像の上にLabelを貼ります。 - (x,y) = (70, 20), (width, height) = (173, 49) の位置と大きさ - フォントは system 15pt くらいに指定します。
-
以下のようにできていればOKです。
カスタマイズしたセルをUITableViewで表示するためには、viewDidLoadで以下のメソッドを呼び出します。
[_tableView registerNib:[UINib nibWithNibName:@"TVSCustomCell" bundle:nil] forCellReuseIdentifier:@"Cell"];
- このメソッドでは、指定されたCellReuseIdentifierに対して再利用できるセルがなかった時に自動的にロードするxibファイルを指定できます
- nibNameは今自作したxibファイル名を指定してください。
- CellReuseIdentifierには再利用する際のキーを指定します。今回は@"Cell"を用いているので、それにあわせています。
- そうすると、dequeueReusableCellWithIdentifierでnilが返ってくることがなくなるので、tableView:cellForRowAtIndexPath:の冒頭は以下のように書き換えることができます
before
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"Cell"];
}
after
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];
実行すると以下のような画面になります。作成したCellを利用できていればOKです！
自分で作ったセルを再利用することはできましたが、セルがオーバーラップしていたり、裏側にテキストがあったりして、なかなかに見づらいです。 そこで、これらのレイアウトの調整を行います
セルがオーバーラップしているのは、セルの高さが固定でデフォルト値の44pxとなっているためです。セルの内容に合わせて高さを動的に変更する場合、delegateメソッドであるtableView:heightForRowAtIndexPath:を実装する必要があります。
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 125;
}
今回、セルの高さを125pxとしたので、固定で125pxを返しています。
注)hogeのような文字が表示される、と言う場合はとりあえずtextをセットしないとうまくきます。
カスタムセルを使うことは出来るようになりましたが、中身は動的に変化させることができていません。 そこで、カスタムセルの中でテキストラベルのプロパティを作り、その中でセットさせます。
- プロパティの追加 - カスタムセルのヘッダファイルで以下のようにプロパティを追加してください
@property (weak, nonatomic) IBOutlet UILabel *bodyLabel;
-
xibで接続 カスタムセルのObjectsを選び、クラスをカスタムセルに変更してください
次にObjectsの中にあるbodyLabelと、xib上のラベルとを接続してください
-
datasourceでの変更の反映 ViewControllerでカスタムセルを定義したヘッダファイルをインポートし、tableView:cellForRowAtIndexPath: 内で以下のようにテキストをセットします
次にObjectsの中にあるbodyLabelと、xib上のラベルとを接続してください
TVSCustomCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];
cell.bodyLabel.text = [NSString stringWithFormat:@"%d", indexPath.row];
実行して、以下のようにテキストが反映されればOKです！
マイマイに引き続き、大輔のセルを追加して、会話させているようにしましょう。 手順は以下の通りです
- 新しいxibの追加
- 異なるCellReuseIdentifierをつける
- 各行ごとに用いるCellReuseIdentifierを使い分ける
TSVCustomCell2という名前で新しいxibファイルを追加してください。 xibにTable View Cell を追加し、以下のようにパーツを配置して行ってください
- クラスの設定 - クラスはマイマイと同じくTVSCustomCellとします。
今、二つのセルのxibを作りました。tableviewではCellReuseIdentifierを用いて出し分けを行っているので、それぞれのxibに異なるcellReuseIdentifierを設定します。
viewControllerのviewDidLoadでregisterNibをしていた箇所を以下のように変更します。
[_tableView registerNib:[UINib nibWithNibName:@"TVSCustomCell" bundle:nil] forCellReuseIdentifier:@"maimai"];
[_tableView registerNib:[UINib nibWithNibName:@"TVSCustomCell2" bundle:nil] forCellReuseIdentifier:@"daisuke"];
TVSCustomCell.xibのidentifierにmaimaiを、TVSCustomCell2.xibのidentifierにdaisukeを、それぞれ設定しています。
呼び出しでは以下のように変更します。
NSString *identifier = indexPath.row % 2 == 0 ? @"maimai" : @"daisuke";
TVSCustomCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
(行が偶数の時はマイマイを、奇数の時はダイスケを表示するようにしています) 呼び出す時に、viewDidLoadで登録したidentiferを利用してdequeueすると、登録したxibのセルが返ってきます。
実行すると次のようになります。
カスタムセルの利用はここまでとなります。お疲れ様でした。
登録することができます。というのも、xibとクラスは必ずしも一対一で対応していないためです。 例えばViewControllerの挙動は一緒だけど、見た目(xib)だけは変えたい、とか今回のように表示する項目は同じだけどセルの見た目は変えたいということがあります。iPadとiPhoneで同じコントローラ使いたいけどxibは別物がいい、と言う時ですね。
そういう時のために、一つのクラスに対して複数のxibを登録することができるようになっています。view controller の initWithNibNameなどがその例で、同じクラスだけどxibを切り替えて使えるようになっています。