iOS

[iOS 7] UITableView のセクションインデックスの色・背景色を指定する

UITableView のセル数が多い時、テーブルの右側に見出しを並べる(セクションインデックスを指定する)とユーザがコンテンツを選択しやすくなります。

iOS 7 では、UITableView のセクションインデックスの色の指定ルールが変わりました。アプリのテーマカラー(tintColor)を文字色に採用します。このルールは、Apple 標準アプリ(連絡帳、ミュージック等)で見られます。

セクションインデックスの色・背景色を指定

実際に色を指定するには、以下のように UITableView の sectionIndex~ 系のプロパティに UIColor を指定します。

UIColor *tintColor = [UIColor colorWithRed:232.f/255.f green:71.f/255.f blue:56.f/255.f alpha:1.f];
UIColor *trakingBackgroundColor = [UIColor colorWithRed:206.f/255.f green:203.f/255.f blue:198.f/255.f alpha:1.f];

self.tableView.sectionIndexColor = tintColor;
self.tableView.sectionIndexBackgroundColor = [UIColor whiteColor];
self.tableView.sectionIndexTrackingBackgroundColor = trakingBackgroundColor;

sectionIndexColor は、文字色。~BackgroundColor は、標準状態の背景色。~TrackingBackgroundColor は、選択状態の背景色です。標準・選択状態の背景色は、デフォルトで同じ白色が指定されています。

※ sectionIndexBackgroundColor だけは、iOS 7 以降のみ有効なプロパティなので iOS 6 も対応する場合は、注意する必要があります。

sectionIndexTrackingBackgroundColor には、色を指定すべき

標準・選択状態の背景色は同色で、押したことに対するフィードバックを返していません。これは、Apple の標準アプリでも同様です。Apple は、この考え方を勧めたいのでしょうが、あまり良いとは思えません。

そこでフィードバックをユーザに教えるために、拙作郵便番号検索くんでは、以下のように選択時の背景色を変えています(上のコードと同じです)。これは、iOS 6 以前と似た操作性で、ユーザにとって使い勝手が良いと思います。