tableHeaderView, tableFooterViewを正しくレイアウトする

UITableViewを使用する際に、tableHeaderViewやtableFooterViewを利用してヘッダーやフッターを実装したい場面があると思います。
先日、tableHeaderViewとtableFooterViewを使用した際に、オートレイアウトで設定するとレイアウトが崩れてしまい少し手こずったため、正しくレイアウトするポイントを残しておこうと思いました。

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

tableHeaderView, tableFooterViewについて

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

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

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

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

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

tableHeaderView, tableFooterViewの使用例

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

以下のようにヘッダーとフッターを設定することができました!
(グルめしアプリのメニュー画面の赤枠で囲んだ箇所)

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

参考文献

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

NO IMAGE
最新情報をチェックしよう!