Tables
テーブルは、データをスクロールする1列のリストとして表示し、セクションやグループに分割することができます。
テーブルを使用すると、大量または少量の情報をリストの形ですっきりと効率的に表示できます。
一般的に、テーブルはテキストベースのコンテンツに適しており、スプリットビューの片側にナビゲーションの手段として表示され、反対側には関連コンテンツが表示されることが多い。
iOSには、プレーン、グループ化、グループ化されたインセットの3つのスタイルのテーブルがあります。
Plain（プレーン）
行をラベル付きのセクションに分け、表の右端にインデックスを垂直に表示することができます。
セクションの最初の項目の前にはヘッダーを、最後の項目の後にはフッターを表示できます。
https://gyazo.com/b8166a723c6561587e2a57f7c7525f85
Grouped（グループ）
行はグループで表示され、グループの前にはヘッダーが、後にはフッターが表示されます。
このスタイルの表には、必ず最低1つのグループが含まれ、各グループには必ず最低1つの行が含まれます。
グループ化された表には、インデックスは含まれません。
https://gyazo.com/3f7121758db6d37d18084992259f2dab
Inset grouped（グループ化されたインセット）
行は、角が丸く、親ビューの端から挿入されたグループで表示されます。（⬇の画像の右に示すように）
このスタイルのテーブルは、常に少なくとも1つのグループを含み、各グループには常に少なくとも1つの行が含まれ、前にはヘッダー、後にはフッターを置くことができます。
グループ化されたインセットテーブルは、インデックスを含みません。
グループ化されたインセットのスタイルは、通常の幅の環境で最もよく機能します。
コンパクトな環境ではスペースが少ないため、特にコンテンツがローカライズされている場合は、グループ化されたインセットテーブルによってテキストの折り返しが発生することがあります。
https://gyazo.com/268591f893ef838475b4e533046d7809
テーブルの幅について考えてみましょう。
幅の狭いテーブルは、切り捨てや折り返しの原因となり、遠くから見ても読みにくく、素早く視認することができません。
幅の広いテーブルもまた、読みにくく、視認しにくく、コンテンツからスペースを奪ってしまう可能性があります。
テーブルのコンテンツを素早く表示する。
広範囲のテーブルコンテンツが読み込まれるのを待たずに、何かを表示しましょう。
画面上の行にはすぐにテキストデータを表示し、画像などの複雑なデータは利用可能になってから表示します。
この手法により、ユーザーは有益な情報をすぐに得ることができ、アプリの応答性が向上すると考えられます。
場合によっては、新鮮で新しいデータが届くまで、古くなったデータを表示することが有効な場合もあります。
コンテンツの読み込み時に進捗状況を伝える。
表のデータの読み込みに時間がかかる場合は、プログレスバーや回転するアクティビティインジケータを表示して、アプリがまだ動作していることを人々に安心させます。
コンテンツの鮮度を保つ。
新しいデータを反映させるために、表のコンテンツを定期的に更新することを検討してください。
ただし、スクロールの位置は変えないようにしましょう。
その代わりに、表の最初か最後にコンテンツを追加し、人々が準備ができたときにスクロールするようにします。
アプリの中には、新しいデータが追加されるとインジケーターが表示され、そこからすぐにジャンプできるようになっているものもあります。
また、いつでも手動で更新できるように、更新コントロールを用意しておくとよいでしょう。
インデックスと、右揃えの要素を含むテーブル行との組み合わせは避けてください。
インデックスは、大きくスワイプするジェスチャーで操作します。
開示インジケータなどの他のインタラクティブな要素が近くにある場合、ジェスチャーが発生したときにユーザーの意図を見極めるのが難しくなり、誤った要素が起動してしまう可能性があります。
Table Rows
標準のテーブルセルスタイルを使用して、テーブル行のコンテンツの表示方法を定義します。
https://gyazo.com/69e4212a82493b9dcd695ad309e33761
Basic (Default)
行の左側に任意の画像を表示し、その後に左揃えのタイトルを表示します。
補足情報を必要としない項目を表示するのに適したオプションです。
https://gyazo.com/bd6fc676b128d13ec82df4f562adf274
Subtitle
1行目に左揃えのタイトル、次の行に左揃えのサブタイトルを表示します。
このスタイルは、行が視覚的に類似している表でよく機能します。
追加のサブタイトルは、行を互いに区別するのに役立ちます。
https://gyazo.com/c2ecb8e1f7d9e59b1e64478ae150a44e
Right Detail (Value 1)
左揃えのタイトルと右揃えのサブタイトルが同じ行に表示されます。
https://gyazo.com/d23b099bb9a3275d58e168316910e56e
Left Detail (Value 2)
右揃えのタイトルと、それに続く左揃えのサブタイトルが同じ行に表示されます。
すべての標準テーブルセルスタイルでは、チェックマークや開示インジケータなどのグラフィック要素も使用できます。
もちろん、これらの要素を追加すると、タイトルやサブタイトルのためのスペースが減少します。
クリッピングが発生しないように、テキストは簡潔にまとめてください。
切り捨てられた単語やフレーズは、視認して解読するのが難しくなります。
テキストの切り詰めは、すべてのテーブルセルスタイルで自動的に行われますが、使用するセルスタイルや切り詰めが発生する場所によって、問題が大きくなったり小さくなったりします。
削除ボタンには、カスタムタイトルの使用を検討してください。
行が削除をサポートしていて、わかりやすくするためには、システムが提供する［削除］タイトルをカスタムタイトルに置き換えます。
選択されたときにフィードバックを提供する。
行の内容がタップされたときに、行が短くハイライトされることが期待されます。
その後、新しいビューが表示されるか、選択が行われたことを示すチェックマークが表示されるなど、何かが変わることを期待します。
標準的でない表行のために、カスタムの表セルスタイルをデザインする。
標準的なスタイルは、さまざまな一般的なシナリオでの使用に適していますが、コンテンツやアプリ全体のデザインによっては、テーブルの外観を大幅にカスタマイズする必要がある場合があります。