はじめに
UITableViewを使用していると、ヘッダーやフッターを実装したい場面は少なくないと思います。
tableHeaderViewやtableFooterViewを利用するのがメジャーと思いますが、オートレイアウトで設定するとレイアウトが崩れてしまう場合があります。
この記事では、tableHeadetView, tableFooterViewの使用一例と、オートレイアウトでも正しくレイアウトするためのポイントをまとめています。
この機会に、tableHeaderView, tableFooterViewを安心して使用できるようにしましょう！
tableHeaderView, tableFooterViewについて
tableHeaderViewとtableFooterViewは、それぞれテーブルコンテンツの上と下に表示されるビューです。使用するポイントは同じのため、以下ではtableHeaderViewについてのみ説明します。
tableHeaderViewプロパティを使用して、テーブル全体のヘッダービューを指定します。ヘッダービューは、テーブルのビューのスクロールコンテンツに表示される最初の項目で、個々のセクションに追加するヘッダービューとは別のものです。このプロパティのデフォルト値はnilです。
https://developer.apple.com/documentation/uikit/uitableview/1614904-tableheaderview
このプロパティにビューを割り当てる場合、そのビューの高さをゼロ以外の値に設定します。テーブルビューは、ビューのフレーム長方形の高さのみを尊重し、テーブルビューの幅に一致するように、ヘッダービューの幅を自動的に調整します。
と翻訳しただけですが、重要な点は「このプロパティにビューを割り当てる場合、そのビューの高さをゼロ以外の値に設定します」というところです。
ヘッダービューの中身はオートレイアウトでレイアウトを組んでも問題ないのですが、それをインスタンス化してtableHeaderViewプロパティに割り当てる際には、frameの高さを指定してあげないとレイアウトが崩れてしまう場合があります。
tableHeaderView, tableFooterViewの使用例
tableHeaderView, tableFooterViewプロパティにビューを割り当てる際に、高さを指定するだけで正しくレイアウトできます。繰り返しになりますが、オートレイアウトで高さを設定するとレイアウトが崩れる場合があったため注意が必要です。
以下スクショの赤枠部分のようにヘッダーとフッターを設定することができました。
(グルめしアプリのメニュー画面の例)
終わりに
とても簡単なことですが、tableHeaderView, tableFooterViewを使用するときのポイントについて書きました。UIKitでオートレイアウトかつUITableViewを利用する場面は少なくないと思いますので、この記事が少しでも誰かの役に立てば幸いです。
参考文献
この記事は、以下の情報を参考に書いています。