Skip to content

4.3 セルのカスタマイズ

ginrou edited this page Apr 24, 2013 · 5 revisions

UITableViewCellには、デフォルトでいくつかのオプションがあります。

例):

  • detailLabel : タイトルより小さめのUILabel。
  • accessoryType : このボタンを押したらこういうアクションですよ、というのを伝える目印
  • imageView : 画像を貼れる、ただしアイコンサイズ

このようなオプションはありますが、カスタマイズ性は低く、オリジナルなデザインを用いることは難しいです。

https://raw.github.com/mixi-inc/iOSTraining/master/Doc/Images/4.3/29thCell.png

そこで、ここではxibを使ってカスタムセルを作り、tableviewに表示する方法を紹介します。

UITableViewとカスタムセル

カスタムセルを作り、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を作り、以下のようにカスタマイズしてください。

    1. 高さを125pxくらいにする
    2. 左下10,10くらいの位置に正方形(44×44くらいの大きさ)のUIImageViewを置いて、imageをmaimai.jpg か daisuke.jpg を指定してください
    3. (x,y) = (54, 3), (width, height) = (219, 106) くらいの位置と大きさでUIImageViewを置いて、imageにfukidashi_left.jpgを指定してください。ストレッチが少しおかしいので、(x,y) = (0.5, 0.5), (width, height) = (0, 0) として、角が変に伸びないように調整します。
    4. 吹き出し画像の上にLabelを貼ります。 - (x,y) = (70, 20), (width, height) = (173, 49) の位置と大きさ - フォントは system 15pt くらいに指定します。
  • 以下のようにできていればOKです。

https://raw.github.com/mixi-inc/iOSTraining/master/Doc/Images/4.3/regulation_maimai.png

カスタムセルの登録と利用

カスタマイズしたセルを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です!

https://raw.github.com/mixi-inc/iOSTraining/master/Doc/Images/4.3/result_1.png

セルの高さの調整やレイアウトの調整

自分で作ったセルを再利用することはできましたが、セルがオーバーラップしていたり、裏側にテキストがあったりして、なかなかに見づらいです。 そこで、これらのレイアウトの調整を行います

セルの高さの調整

セルがオーバーラップしているのは、セルの高さが固定でデフォルト値の44pxとなっているためです。セルの内容に合わせて高さを動的に変更する場合、delegateメソッドであるtableView:heightForRowAtIndexPath:を実装する必要があります。

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 125;
}

今回、セルの高さを125pxとしたので、固定で125pxを返しています。

注)hogeのような文字が表示される、と言う場合はとりあえずtextをセットしないとうまくきます。

テキストを動的に変更する

カスタムセルを使うことは出来るようになりましたが、中身は動的に変化させることができていません。 そこで、カスタムセルの中でテキストラベルのプロパティを作り、その中でセットさせます。

  1. プロパティの追加 - カスタムセルのヘッダファイルで以下のようにプロパティを追加してください
@property (weak, nonatomic) IBOutlet UILabel *bodyLabel;
  1. xibで接続 カスタムセルのObjectsを選び、クラスをカスタムセルに変更してください https://raw.github.com/mixi-inc/iOSTraining/master/Doc/Images/4.3/set_class_to_cell.png 次にObjectsの中にあるbodyLabelと、xib上のラベルとを接続してください https://raw.github.com/mixi-inc/iOSTraining/master/Doc/Images/4.3/set_class_to_cell.png

  2. datasourceでの変更の反映 ViewControllerでカスタムセルを定義したヘッダファイルをインポートし、tableView:cellForRowAtIndexPath: 内で以下のようにテキストをセットします

TVSCustomCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];
cell.bodyLabel.text = [NSString stringWithFormat:@"%d", indexPath.row];

実行して、以下のようにテキストが反映されればOKです!

https://raw.github.com/mixi-inc/iOSTraining/master/Doc/Images/4.3/result_3.png

複数のカスタムセル

マイマイに引き続き、大輔のセルを追加して、会話させているようにしましょう。 手順は以下の通りです

  1. 新しいxibの追加
  2. 異なるCellReuseIdentifierをつける
  3. 各行ごとに用いるCellReuseIdentifierを使い分ける

1. 新しいxibの追加

TSVCustomCell2という名前で新しいxibファイルを追加してください。 xibにTable View Cell を追加し、以下のようにパーツを配置して行ってください

https://raw.github.com/mixi-inc/iOSTraining/master/Doc/Images/4.3/regulation_daisuke.png

  • クラスの設定 - クラスはマイマイと同じくTVSCustomCellとします。

2. 異なるCellReuseIdentifierをつける

今、二つのセルの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のセルが返ってきます。

実行すると次のようになります。

https://raw.github.com/mixi-inc/iOSTraining/master/Doc/Images/4.3/result_4.png

カスタムセルの利用はここまでとなります。お疲れ様でした。

TIPS : 同じクラスに対して二つのxibを登録できるのか?

登録することができます。というのも、xibとクラスは必ずしも一対一で対応していないためです。 例えばViewControllerの挙動は一緒だけど、見た目(xib)だけは変えたい、とか今回のように表示する項目は同じだけどセルの見た目は変えたいということがあります。iPadとiPhoneで同じコントローラ使いたいけどxibは別物がいい、と言う時ですね。

そういう時のために、一つのクラスに対して複数のxibを登録することができるようになっています。view controller の initWithNibNameなどがその例で、同じクラスだけどxibを切り替えて使えるようになっています。

はじめに

  1. iOSについて

  2. Xcode最初のステッフ

  3. 導入

  4. Objective C の基礎

  5. メモリ管理

  6. 1.3 UIViewController1 UIViewController のカスタマイズ(xib, autoresizing)

  7. 1.3 UIViewController1 UIViewController のカスタマイズ(storyboard)

  8. UIViewController2 - ModalViewController

  9. UIViewController2 - ModalViewController(storyboard)

  10. UIViewController3 - ライフサイクル

  11. HomeWork 1 Objective C の基本文法

  12. HomeWork 2 UIViewControllerとModalViewController

  13. HomeWork 3 UIViewController + Animation

  14. UIKit 1 - container, rotate-

  15. UINavigationController

  16. UITabController

  17. Custom Container View Controller

  18. Supporting Multiple Interface Orientations

  19. HomeWork 1 - タブバーからモーダルビューを表示する

  20. HomeWork 2 - NavigationController

  21. HomeWork 2.3 デバイスことに回転対応

  22. UIKit 2- UIView -

  23. UIView

  24. UIView のカスタマイズ

  25. UIView Animation

  26. HomeWork 1 - UIScrollView

  27. UIKit 3 - table view -

  28. UITableView について

  29. UITableViewとNavigationController

  30. custom UITableViewCell の作成

  31. UITableViewのその他のオプション、カスタマイズ

  32. HomeWork 1 - Dynamic height with a custom uitableviewcell

  33. UIKit 4 - image and text -

  34. UIImagePickerController

  35. Assets Library

  36. UITextFiled, UITextView

  37. KeyboardNotification

  38. Homework 1 - フォトの複数枚選択

  39. ネットワーク処理

  40. NSURLConnection

  41. JSONのシリアライズとデシリアライズ

  42. UIWebView

  43. ローカルキャッシュと通知

  44. NSUserDefaults, Settings Bundle

  45. NSFileManager

  46. Key Value Observing

  47. NSNotification、NSNotificationCenter を用いた通知

  48. UILocalNotification

  49. Blocks, GCD

  50. Blocks

  51. GCD

  52. 【演習】GCD,-Blocksを用いたHTTPリクエストマネージャの作成

  53. 設計とデザインパターン

  54. クラス設計 1

  55. クラス設計 2

  56. [クラス設計演習] (https://github.com/mixi-inc/iOSTraining/wiki/9.3-%E3%82%AF%E3%83%A9%E3%82%B9%E8%A8%AD%E8%A8%88%E6%BC%94%E7%BF%92)

  57. 開発ツール

  58. Instruments, デバッガ

  59. CocoaPods

  60. テスト

  61. iOS開発におけるテスト

  62. GHUnit

  63. Kiwi

  64. KIF

  65. In-App Purchase

  66. In-App Purchase

  67. 付録

  68. Tips of Xcode

  69. Auto Layout 入門

  70. Auto Layout ドリル

Edit sidebar

Clone this wiki locally
You can’t perform that action at this time.