iOS

[iOS SDK] UITableView で、任意のセルにジャンプするインデックスリストを実装する

iOS 標準アプリの連絡先・ミュージックなどは、右側にインデックスリストを表示させて、アクセスしやすいように工夫されています。

このインデックスリスト(通称:スーパースクロール)は、セクションと結び付けて、スクロールさせるのが一般的です。

ですが、今回はセクションを利用していない UITableView に、任意のセル数ごとにジャンプするインデックスリストを実装してみました。

環境:Xcode4.3.1、実機転送(iOS 5.1)

UITableView にインデックスリストを作成する

sectionIndexTitlesForTableView のメソッドでは、NSString を要素に持っている配列を返すと、それがインデックスのリストに使われます。

ここでは、データ数15を持つ配列を返しています。

- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
{
    NSArray *indexArray;
    indexArray = [[NSArray alloc] initWithObjects: @"●", @"●", @"●", @"●", @"●", @"●", @"●", @"●", @"●", @"●", @"●", @"●", @"●", @"●", @"●", nil];
                  
    return indexArray;
}

インデックスリストをタップした時に UITableView を移動

ここからは、実際にインデックスリストをタップした時の動作を記述していきます。

インデックスリストをタップした時には、以下のメソッドが呼ばれます。

このメソッドは、セクション数を示す Integer 型を返しますが、ここではセクションを用意していないので、このメソッド内に任意のセルに移動するコードを実装します。

- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index
{
    int cellNum = self.albums.count/15 * index;
    
    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:cellNum inSection:0];
    [self.tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionTop animated:NO];

	return index;
}

cellNum では、セル数/インデックスリスト数 * index という計算式で、移動先のセルを決定しています。

Special Thanks !

  • Cocoa と touch, Cocoa で touch: Table View のインデックスと日本語対応