もちゅろぐ
iOS
UITableView
【初心者向け】UITableViewのヘッダーをカスタマイズする

【初心者向け】UITableViewのヘッダーをカスタマイズする

2019-9-29

Table of Contents

UITableViewのカスタムヘッダー完成イメージ
UITableViewのセクションヘッダーとは
セクションヘッダーとなるUITableViewHeaderFooterViewを用意する
セクションヘッダーのレイアウトをxibで作成
セクションヘッダーxibをUITableViewに登録する
セクションヘッダーの高さを変更する
セクションヘッダーを独自ビューで生成する
セクションフッターも同様に可能

UITableViewのヘッダーとはセクション毎の上下表示されるSectionHeader(セクションヘッダー)とSectionFooter(セクションフッター)のことを指しこれらはカスタマイズ可能です。シンプルなカスタマイズであればUITableDataSourceのtitleForHeaderInSectionなどを変更することで簡単なカスタマイズは可能です。しかし、独自UIViewなどを設定したいなど複雑な場合はUITableViewDelegateを使った実装が必要になります。この記事ではその独自UIViewなどを使ったヘッダーの実装方法について説明します。

もし基本的なセクションヘッダーの変更であれば、「【初心者向け】UITableViewのSection(セクション)の使い方」の記事を見てください。

UITableViewのカスタムヘッダー完成イメージ

リソースは適当に用意したものなので見た目としては酷いですが、機能は満たしてあります。

UITableViewのセクションヘッダーとは

セクションヘッダーの定義元には次のようなコメントがあります。

fixed font style. use custom view (UILabel) if you want something different

つまり、この方法ではフォントは固定で、もしカスタマイズしたい場合は、UILabelを使います。これを実装するには、UITableViewDelegate の func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? を実装します。
なぜ急にdelegate？と多少違和感を感じますが、少なくともDataSourceではないと思うと多少疑念が和らぎます。

セクションヘッダーとなるUITableViewHeaderFooterViewを用意する

レイアウトは今回は画像とラベル１つずつ使おうと思います。なので次のようなコードになります。

class HeaderView: UITableViewHeaderFooterView {
    @IBOutlet private weak var imageView: UIImageView!
    @IBOutlet private weak var titleLabel: UILabel!

    func setup(image: UIImage, title: String) {
        imageView.image = image
        titleLabel.text = title
    }
}

セクションヘッダーのレイアウトをxibで作成

次にxibでレイアウトを用意します。

デフォルトではiPhoneサイズのViewになっており変更もできないので、下記画像のように状態を変更します。

これで角をドラッグすることでサイズ変更が可能となります。
またバッテリーアイコンなど余計なアイコンもでなくなります。
ホームバーについては消す方法がなかったです。

レイアウトは今回は画像とラベル１つずつ次のように配置しました。

制御クラスは先程作成したクラスを紐付けます。

セクションヘッダーxibをUITableViewに登録する

override func viewDidLoad() {
  super.viewDidLoad()
  let nib = UINib(nibName: "HeaderView", bundle: nil)
  tableView.register(nib, forHeaderFooterViewReuseIdentifier: "HeaderView")
  // ...
}

セクションヘッダーの高さを変更する

デフォルトではセクションヘッダーも高さが決まっているので変えておかないと小さいです。変更方法は UITableViewDelegate の heightForHeaderInSection でセクション単位で変更する方法と、
UITableView.sectionHeaderHeight で一律変更する方法です。

今回は一律でサイズは予め分かっているので固定値にします。delegateやdataSourceの設定の下あたりに置いときます。

tableView.sectionHeaderHeight = 88

セクションヘッダーを独自ビューで生成する

ではパーツの準備ができたので、実際のそのパーツを組み込みます。

extension ViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let view = tableView.dequeueReusableHeaderFooterView(withIdentifier: "HeaderView")
        if let headerView = view as? HeaderView {
            headerView.setup(image: #imageLiteral(resourceName: "icon2") , title: "Hoge")
        }
        return view
    }
}