はじめに
UIKitはまだまだ現役の認識でして、リスト表示においては UITableViewが利用される場面がまだまだあると思います。
ヘッダーやフッターを実装したいとき、UITableViewであれば基本的にはtableHeaderViewやtableFooterViewを設定すると思いますが、オートレイアウトで設定するとレイアウトが崩れてしまう場合があります。
本記事では、オートレイアウトで tableHeaderView, tableFooterViewを設定するポイントを説明します。
tableHeaderView, tableFooterViewについて
tableHeaderViewと tableFooterViewは、それぞれテーブルコンテンツの上と下に表示されるビューです。
どちらも使用方法は同じため、以下では tableHeaderViewについて説明します。
ドキュメントの内容を例のごとくDeepLで翻訳すると、
tableHeaderViewプロパティを使用して、テーブル全体のヘッダービューを指定します。ヘッダービューは、テーブルのビューのスクロールコンテンツに表示される最初の項目で、個々のセクションに追加するヘッダービューとは別のものです。このプロパティのデフォルト値はnilです。
このプロパティにビューを割り当てる場合、そのビューの高さをゼロ以外の値に設定します。テーブルビューは、ビューのフレーム長方形の高さのみを尊重し、テーブルビューの幅に一致するように、ヘッダービューの幅を自動的に調整します。
重要なのは、 「このプロパティにビューを割り当てる場合、そのビューの高さをゼロ以外の値に設定します。」というところです。
ヘッダービューの中身はオートレイアウトでレイアウトを構築しても問題ないのですが、そのビューをインスタンス化して tableHeaderViewに割り当てる際にはframeの高さを指定してあげないとレイアウトが崩れてしまう場合があります。幅は UITableViewの幅に依存します。
tableFooterViewも同じくです。
tableHeaderView, tableFooterViewの使用例
tableHeaderView, tableFooterViewプロパティにビューを割り当てる際に、frameの高さを指定するだけで適切にオートレイアウトが機能します。繰り返しになりますが、frameの高さを指定しないとレイアウトが崩れる場合があったため注意が必要です。
let headerView = CustomHeaderView()
headerView.frame.size.height = 44
tableView.tableHeaderView = headerView
let footerView = CustomFooterView()
footerView.frame.size.height = 150
tableView.tableFooterView = footerView
上記の例にある CustomHeaderViewと CustomFooterViewの中身はオートレイアウトでレイアウトを組んで問題ないです。
終わりに
非常に簡単なことですが、オートレイアウトで tableHeaderView, tableFooterViewを正しくレイアウトするポイントについて書きました。UIKitかつ UITableViewを使用する場面は少なくないと思いますので、この記事が少しでも誰かの役に立てば幸いです。