【Xcode/Swift】連絡先アプリの右側のバーみたいなUIの実装方法

連絡先アプリの右側のバーみたいなUIとは

 

連絡先アプリの右側のバーみたいなUIというのは、このことです。

右側に青い文字でセクションが書かれていて、それをタップするとそのセクションまでスクロールしてくれるというやつです。

実装方法

UITableViewDataSourceDelegateメソッドで実装可能です。

以下のように、sectionの名前が入った配列をreturnするだけです。

func sectionIndexTitles(for tableView: UITableView) -> [String]? {
    return sectionNameArray
}

全てのコード

import UIKit

class ViewController: UIViewController {
    let sectionNameArray = ["A", "B", "C", "D", "E", "F", "G"]

    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

extension ViewController: UITableViewDataSource {

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = "あああ"
        return cell
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }

    func numberOfSections(in tableView: UITableView) -> Int {
        return self.sectionNameArray.count
    }

    func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return self.sectionNameArray[section]
    }
    
    func sectionIndexTitles(for tableView: UITableView) -> [String]? {
        return self.sectionNameArray
    }
}

参考文献

  • teratail-(Swift – 連絡先アプリの右横のバー)