Table View

リストを表示するView

種類

プレーンテーブル

Viewの幅いっぱいまで広がる行を表示。行はラベル付のセクションで分けることができる デフォルトの行の背景色は乳白色

グループテーブル

画面の端から少し内側に下がった位置に、行のグループを表示。青の縞模様の背景に、乳白色の背景のグループ

要素

• チェックマーク - 行の選択を示す。
• ディスクロージャインジケータ - 行に関連づけられた別のテーブルを表示。
• 詳細ディスクロージャボタン - 行に関する追加の詳細を、別のビューで表示。
• 行の整理 - 行をテーブル内の別の場所にドラッグ可能であることを示す。
• 行の挿入 - 新しい行をテーブルに追加
• 削除コントロールボタン - 削除ボタンの表示/非表示を切り替える
• 削除ボタン - 行を削除

要素ではないが、テーブルの表示を更新するための、更新コントロールが定義されている。

スタイル

• Default - 項目名がタイトル
• Subtitle - タイトルと、少し小さいグレイのフォントのサブタイトル
• Value 1 - 左寄せでタイトル、右寄せに少し小さい青のフォントでサブタイトル(画像は不適切)
• Value 2 - Value 1とは逆に、サブタイトルが目立つようにしたもの

---

ガイドライン

• 概念的にグループ化された情報を表示する
• 検索しやすくするためインデックス化された情報を表示する
• ユーザーが項目を選択した際には、必ずフィードバックを返す
• テーブルの内容が膨大、または複雑な場合、全てのデータが利用可能になるのを待たない - 先に荒いデータ(テキスト等)を表示し、あとで複雑なデータに橋帰る
• 最新データを待つ間、古いデータを表示する - データの更新頻度が低い場合は、古いデータを一旦表示しておく
• データのロードに時間がかかったり、データが複雑な場合は、処理が継続中であることをユーザーに示すための、アクティビティインジケーター等でユーザーにフィードバックする
• プレーンテーブルの行の高さを可変にしない - グループ化テーブルならよいが、プレーンテーブルでは不揃いな外観となる
• 透明に見えて欲しい画像領域に白を使わない - 行の背景は乳白色であるため、透明に見せたい箇所はきちんと透明にしておく
• Deleteボタンにカスタムのタイトルを使ってもよい - アプリケーションの動作がわかり易くなる場合は、Deleteボタンのラベルを変更してもよい
• Value1/Value2のスタイルにはグループ化テーブルを使用する - 見栄えがよくなる
• テキストラベルはできる限り簡潔にする - 長い文字列は切り詰められるため、出来る限り短くする。切り詰めがさけられない場合、先頭に重要な情報を入れる。
• テーブル行を高くしてテキストの切り詰めを避けることはできるだけしない - デバイスの向きによって折り返されたりされなかったりするのは避けるべきなため、高さを変更して対応しない方がよい。
• カスタムセルを使え - 行のレイアウトを変更するのであれば、カスタムセルを使う方が楽