オートレイアウトでtableHeaderView, tableFooterViewを正しくレイアウトする【Swift】

はじめに

UITableViewを使用していると、ヘッダーやフッターを実装したい場面は少なくないと思います。
tableHeaderViewやtableFooterViewを利用するのがメジャーと思いますが、オートレイアウトで設定するとレイアウトが崩れてしまう場合があります。

この記事では、tableHeadetView, tableFooterViewの使用一例と、オートレイアウトでも正しくレイアウトするためのポイントをまとめています。
この機会に、tableHeaderView, tableFooterViewを安心して使用できるようにしましょう!

tableHeaderView, tableFooterViewについて

tableHeaderViewtableFooterViewは、それぞれテーブルコンテンツの上と下に表示されるビューです。使用するポイントは同じのため、以下ではtableHeaderViewについてのみ説明します

tableHeaderViewプロパティを使用して、テーブル全体のヘッダービューを指定します。ヘッダービューは、テーブルのビューのスクロールコンテンツに表示される最初の項目で、個々のセクションに追加するヘッダービューとは別のものです。このプロパティのデフォルト値はnilです。
このプロパティにビューを割り当てる場合、そのビューの高さをゼロ以外の値に設定します。テーブルビューは、ビューのフレーム長方形の高さのみを尊重し、テーブルビューの幅に一致するように、ヘッダービューの幅を自動的に調整します。

https://developer.apple.com/documentation/uikit/uitableview/1614904-tableheaderview

と翻訳しただけですが、重要な点は「このプロパティにビューを割り当てる場合、そのビューの高さをゼロ以外の値に設定します」というところです。

ヘッダービューの中身はオートレイアウトでレイアウトを組んでも問題ないのですが、それをインスタンス化してtableHeaderViewプロパティに割り当てる際には、frameの高さを指定してあげないとレイアウトが崩れてしまう場合があります。

tableHeaderView, tableFooterViewの使用例

tableHeaderView, tableFooterViewプロパティにビューを割り当てる際に、高さを指定するだけで正しくレイアウトできます。繰り返しになりますが、オートレイアウトで高さを設定するとレイアウトが崩れる場合があったため注意が必要です。

以下スクショの赤枠部分のようにヘッダーとフッターを設定することができました。
(グルめしアプリのメニュー画面の例)

グルめしのメニュー画面 (ヘッダー)
グルめしのメニュー画面 (フッター)

終わりに

とても簡単なことですが、tableHeaderView, tableFooterViewを使用するときのポイントについて書きました。UIKitでオートレイアウトかつUITableViewを利用する場面は少なくないと思いますので、この記事が少しでも誰かの役に立てば幸いです。

参考文献

この記事は、以下の情報を参考に書いています。