iOS : UITableViewとUITableViewCellのスタイル
UITableViewとUITableViewCellのスタイルについて解説します。
テーブルのスタイルを指定することで、テーブルの見た目を変更できます。セルのスタイルを指定することで、テキストの表示方法を変更できます。また、セルのプロパティを操作することで、セルに矢印ボタンや画像を表示したり、選択状態の見た目を変更することができます。
テーブルのスタイル
テーブルのスタイルは、UITableViewインスタンス生成時に指定します。スタイルはinitWithFrame:style:関数のstyle引数にUITableViewStyle列挙子の値で指定します。
サンプルコード
m_objTableView =
[ [ UITableView alloc ] initWithFrame:self.view.bounds style:UITableViewStylePlain ];UITableViewStylePlainの場合（Plainスタイル）
UITableViewStyleGroupedの場合（Groupedスタイル）
initWithFrame:style:関数の公式リファレンス
テーブルのスタイルは、UITableView生成後に変更することはできません。例えばPlainスタイルで生成したテーブルをGroupedスタイルに変更することはできません。
Plainスタイルでセクションフッターを表示すると、セクションヘッダーとフッターが連続して表示されるので、可読性が悪くなります。
なお、現在のテーブルのスタイルはUITableViewのstyleプロパティで確認できます。
セルのスタイルとテキスト
セルのスタイルは、UITableViewCellインスタンス生成時に指定します。スタイルはinitWithStyle:reuseIdentifier:関数のstyle引数にUITableViewCellStyle列挙子の値で指定します。
セルに表示するテキストはtextLabelプロパティのtextプロパティに設定します。
セルのスタイルがUITableViewCellStyleDefault以外の場合は、サブテキストを表示できます。サブテキストはdetailTextLabelプロパティのtextプロパティに指定します。
サンプルコード
UITableViewCell * cellView = [ [ [ UITableViewCell alloc ]
initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"cell1" ] autorelease ];
cellView.textLabel.text = @"value text";
cellView.detailTextLabel.text = @"detail text";UITableViewCellStyle列挙子とセルの見た目（Plainスタイルの例）
| UITableViewCellStyleDefault |  |
| UITableViewCellStyleValue1 |  |
| UITableViewCellStyleValue2 |  |
| UITableViewCellStyleSubtitle |  |
initWithStyle:reuseIdentifier:関数の公式リファレンス
UITableViewCellStyle列挙子の公式リファレンス
セルのアクセサリタイプ
セルにアクセサリタイプを指定すると、セルの右端に矢印ボタンやチェックマークなどのアクセサリを表示できます。アクセサリタイプはUITableViewCellクラスのaccessoryTypeプロパティに、UITableViewCellAccessoryType列挙子の値で設定します。
サンプルコード
cellView.accessoryType = UITableViewCellAccessoryDisclosureIndicator;UITableViewCellAccessoryType列挙子とアクセサリ（Plainスタイルの例）
| UITableViewCellAccessoryNone |  |
| UITableViewCellAccessoryDisclosureIndicator |  |
| UITableViewCellAccessoryDetailDisclosureButton |  |
| UITableViewCellAccessoryCheckmark |  |
UITableViewCellAccessoryType列挙子の公式リファレンス
セルの画像
セルに画像を設定すると、セルの左端に画像を表示できます。画像はUITableViewCellクラスのimageViewプロパティに設定します。
imageViewプロパティはUIImageViewインスタンスなので、画像の設定はimageViewプロパティのimageプロパティにUIImageインスタンスを設定する形になります。imageViewプロパティ自体は読み取り専用なので、直接UIImageViewインスタンスを設定することはできません。
通常状態の画像とは別に、セル選択時のハイライト画像を指定することもできます。ハイライト時の画像は、imageViewプロパティのhighlightedImageプロパティに設定します。highlightedImageプロパティの設定を省略した場合は、ハイライト時も通常状態の画像が表示されます。
ただし、UITableViewクラスのallowsMultipleSelectionプロパティがYESの場合は、ハイライト時の画像が表示されないので注意が必要です。詳しくは以下の「セルの複数選択時の注意点」参照してください。
サンプルコード
imageView.image = [ UIImage imageNamed:@"icon001.png" ];
cellView.imageView.highlightedImage = [ UIImage imageNamed:@"icon001_hi.png" ];画像を貼り付けた例
通常画像とハイライト画像
セルの通常状態と選択状態
UIimageViewのimageプロパティの公式リファレンス
UIimageViewのhighlightedImageプロパティの公式リファレンス
セルの選択状態のスタイル
UITableViewCellクラスのselectionStyleプロパティを利用して、セル選択時のスタイルを指定できます。選択状態のスタイルはUITableViewCellSelectionStyle列挙子で指定します。デフォルトはUITableViewCellSelectionStyleBlueです。
UITableViewCellSelectionStyle列挙子と選択状態（Plainスタイルの例）
| UITableViewCellSelectionStyleBlue |  |
| UITableViewCellSelectionStyleGray |  |
| UITableViewCellSelectionStyleNone |  |
UITableViewCellSelectionStyle列挙子の公式リファレンス
セルの複数選択時の注意点
テーブルで複数選択が可能な場合、セルが選択状態になってもハイライト設定が反映されません。複数選択を制御するallowsMultipleSelectionプロパティがYESの場合、セル選択状態の見た目が以下のように変わります。
テキストの色が変化しない
単一選択の場合は、テキストの色が変化します。複数選択の場合は、テキストの色が変化しません。つまり複数選択の場合は、textLabelプロパティやdetailTextLabelプロパティのhighlightedTextColorの値が反映されません。
アクセサリの色が変化しない
単一選択の場合は、アクセサリの色が変化します。複数選択の場合は、アクセサリの色が変化しません。
画像が変化しない
単一選択の場合は、ハイライト時の画像が表示されます。複数選択の場合は、画像が変化しません。つまり複数選択の場合は、imageViewプロパティのhighlightedImageの値が反映されません。
| 通常状態 |  |
| 単一選択 |  |
| 複数選択 |  |