【swift】ちょい足しレシピ⑧！UITableViewにインデックスバーを表示させる方法

2017/12/21

WRITER

ロッキーカナイ

SwiftやObjective-CでiOS開発や、Flutterを用いたiOS/Androidアプリ開発、PHPでLaravelを使ったWebアプリ開発などをしてます。趣味は猫と戯れる事、キックボクシングにハマってます。ちなみに名前のロッキーカナイは以前よく昼飯を食べてた所。

extension ViewController {
    func sectionIndexTitles(for tableView: UITableView) -> [String]? {
        return list
    }
    
　　func tableView(_ tableView: UITableView, sectionForSectionIndexTitle title: String, at index: Int) -> Int {
        self.tableView.scrollToRow(at: [0, index], at: .top, animated: true)
        return index
    }
}

これらのデリゲートメソッドを定義するとインデックスバーが表示されます。

sectionIndexTitlesメソッドでは、表示させる文字配列を返します。

tableView:sectionForSectionIndexTitleメソッドはタップされたindexPathが入るので、そこにセル移動するようにscrollToRowを呼んでます。

インデックスバーの設定

// 文字色
self.tableView.sectionIndexColor = UIColor.black

// 背景色
self.tableView.sectionIndexBackgroundColor = UIColor.white

// トラッキング中の背景色
self.tableView.sectionIndexTrackingBackgroundColor = UIColor.blue

インデックスバーの文字色、背景色、トラッキング時の背景色の設定が可能です。