UITableViewとUITableViewCellのスタイル

UITableViewとUITableViewCellのスタイルについて解説します。

テーブルのサンプル

テーブルのスタイルを指定することで、テーブルの見た目を変更できます。セルのスタイルを指定することで、テキストの表示方法を変更できます。また、セルのプロパティを操作することで、セルに矢印ボタンや画像を表示したり、選択状態の見た目を変更することができます。

テーブルのスタイル

テーブルのスタイルは、UITableViewインスタンス生成時に指定します。スタイルはinitWithFrame:style:関数のstyle引数にUITableViewStyle列挙子の値で指定します。

サンプルコード
m_objTableView = [ [ UITableView alloc ] initWithFrame:self.view.bounds style:UITableViewStylePlain ];
UITableViewStylePlainの場合(Plainスタイル):

UITableViewStylePlainの場合

UITableViewStyleGroupedの場合(Groupedスタイル):

UITableViewStyleGroupedの場合

UITableViewクラスの公式リファレンス

initWithFrame:style:関数の公式リファレンス

UITableViewStyle列挙子の公式リファレンス

テーブルのスタイルは、UITableView生成後に変更することはできません。例えばPlainスタイルで生成したテーブルをGroupedスタイルに変更することはできません。

Plainスタイルでセクションフッターを表示すると、セクションヘッダーとフッターが連続して表示されるので、可読性が悪くなります。

UITableViewStylePlainのセクションフッター

なお、現在のテーブルのスタイルはUITableViewのstyleプロパティで確認できます。

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スタイルの例)
UITableViewCellStyleDefaultUITableViewCellStyleDefaultの例
UITableViewCellStyleValue1UITableViewCellStyleValue1の例
UITableViewCellStyleValue2UITableViewCellStyleValue2の例
UITableViewCellStyleSubtitleUITableViewCellStyleSubtitleの例

UITableViewCellクラスの公式リファレンス

initWithStyle:reuseIdentifier:関数の公式リファレンス

UITableViewCellStyle列挙子の公式リファレンス

textLabelプロパティの公式リファレンス

detailTextLabelプロパティの公式リファレンス

セルのアクセサリタイプ

セルにアクセサリタイプを指定すると、セルの右端に矢印ボタンやチェックマークなどのアクセサリを表示できます。アクセサリタイプはUITableViewCellクラスのaccessoryTypeプロパティに、UITableViewCellAccessoryType列挙子の値で設定します。

サンプルコード
cellView.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
UITableViewCellAccessoryType列挙子とアクセサリ(Plainスタイルの例)
UITableViewCellAccessoryNoneUITableViewCellAccessoryNoneの例
UITableViewCellAccessoryDisclosureIndicatorUITableViewCellAccessoryDisclosureIndicatorの例
UITableViewCellAccessoryDetailDisclosureButtonUITableViewCellAccessoryDetailDisclosureButtonの例
UITableViewCellAccessoryCheckmarkUITableViewCellAccessoryCheckmarkの例

accessoryTypeプロパティの公式リファレンス

UITableViewCellAccessoryType列挙子の公式リファレンス

セルの画像

セルに画像を設定すると、セルの左端に画像を表示できます。画像はUITableViewCellクラスのimageViewプロパティに設定します。

imageViewプロパティはUIImageViewインスタンスなので、画像の設定はimageViewプロパティのimageプロパティにUIImageインスタンスを設定する形になります。imageViewプロパティ自体は読み取り専用なので、直接UIImageViewインスタンスを設定することはできません。

通常状態の画像とは別に、セル選択時のハイライト画像を指定することもできます。ハイライト時の画像は、imageViewプロパティのhighlightedImageプロパティに設定します。highlightedImageプロパティの設定を省略した場合は、ハイライト時も通常状態の画像が表示されます。

ただし、UITableViewクラスのallowsMultipleSelectionプロパティがYESの場合は、ハイライト時の画像が表示されないので注意が必要です。詳しくは以下の「セルの複数選択時の注意点」参照してください。

サンプルコード
cellView.imageView.image = [ UIImage imageNamed:@"icon001.png" ];
cellView.imageView.highlightedImage = [ UIImage imageNamed:@"icon001_hi.png" ];
画像を貼り付けた例

・通常画像とハイライト画像:

通常画像 ハイライト画像

・セルの通常状態と選択状態:

セルの通常状態
セルの選択状態

imageViewプロパティの公式リファレンス

UIimageViewのimageプロパティの公式リファレンス

UIimageViewのhighlightedImageプロパティの公式リファレンス

セルの選択状態のスタイル

UITableViewCellクラスのselectionStyleプロパティを利用して、セル選択時のスタイルを指定できます。選択状態のスタイルはUITableViewCellSelectionStyle列挙子で指定します。デフォルトはUITableViewCellSelectionStyleBlueです。

UITableViewCellSelectionStyle列挙子と選択状態(Plainスタイルの例)
UITableViewCellSelectionStyleBlueUITableViewCellSelectionStyleBlueの例
UITableViewCellSelectionStyleGrayUITableViewCellSelectionStyleGrayの例
UITableViewCellSelectionStyleNoneUITableViewCellSelectionStyleNoneの例

selectionStyleプロパティの公式リファレンス

UITableViewCellSelectionStyle列挙子の公式リファレンス

セルの複数選択時の注意点

テーブルで複数選択が可能な場合、セルが選択状態になってもハイライト設定が反映されません。複数選択を制御するallowsMultipleSelectionプロパティがYESの場合、セル選択状態の見た目が以下のように変わります。

テキストの色が変化しない

単一選択の場合は、テキストの色が変化します。複数選択の場合は、テキストの色が変化しません。つまり複数選択の場合は、textLabelプロパティやdetailTextLabelプロパティのhighlightedTextColorの値が反映されません。

アクセサリの色が変化しない

単一選択の場合は、アクセサリの色が変化します。複数選択の場合は、アクセサリの色が変化しません。

画像が変化しない

単一選択の場合は、ハイライト時の画像が表示されます。複数選択の場合は、画像が変化しません。つまり複数選択の場合は、imageViewプロパティのhighlightedImageの値が反映されません。

通常状態:

通常状態の例

単一選択:

単一選択の例

複数選択:

複数選択の例