table view 的 header & footer
表格裡除了顯示每筆資料的 cell 外，在整個表格的前面和後面還可以再加入一塊長方形的 view 呈現特別的內容。加在前面的稱為 header，後面的稱為 footer。
如下圖 Penny 音樂 App 的專輯頁面，cell 顯示每首歌的歌名。但我們還想顯示專輯的名字和圖片，以及加入，播放等特別的按鈕，因此紅色框框的區塊即為呈現這些資訊的 header。
一般而言，表格每個 cell 會長得差不多，所以它的 header 和 footer 可拿來呈現比較不一樣的內容。(不過你喜歡的話，你也可以用第一個 cell 來呈現剛剛的專輯的名字和圖片區塊，然後從第二個 cell 開始顯示歌名。) 接下來我們將介紹兩種加入 header / footer 的做法。
- 搭配 Static Cells 的 table 顯示 header / footer
- 搭配 Dynamic Prototypes 的 table 顯示 header / footer
搭配 Static Cells 的 table 顯示 header / footer
- 為了 Demo 方便，我們以 table view controller 為例子，並將 table view 的 Content 設成 Static Cells，加入三個 cell 顯示 Penny 的好聽歌曲。
- 移除 section 的 header & footer。
當 table view 設為 static cells 時，預設會加入 section 的 header & footer。我們不想要 section 有 header & footer，因此請點選 table view，將 Header 的 Estimate & Footer 的 Estimate 設為 0。
- 從 Objects Library 拖曳 View 到表格上，讓它成為表格的 header。
將 View 拖曳到左邊 Document Outline 清單裡 Table View & Table View Section 之間。
另一個方法是將 View 拖曳到表格的上方，看到藍色線條和綠色 + 後放開觸控板。
成功加入後，table view 的上方將多一塊長方形的區塊。
- 設定 header 的顏色。
header 其實是 view，所以我們可以設定它的背景顏色。
等等，為什麼 cell & header 之間多了一塊白色區塊。別擔心，這只是 Interface Builder 的顯示問題，App 執行後將是正常的。如下圖所示， cell & header 之間並不會有白色區塊。
- 調整header 的高度。
將游標移到 header 長方形下方的線條，變成十字形的游標後，即可拖曳調整高度。
- 在 header 的 view 裡加入顯示文字圖片的 label 和 image view。
只要模仿以上步驟，即可打造出任何你想要的 header 畫面。另外會用 View 當 header 是為了在 View 上再裝其它元件，並不是只能用 View 當 header。比方我們只想在列表的上方顯示 Penny 漂亮的圖片，那其實用 image view 當 header 會更簡單。
至於顯示在表格下方的 footer，做法差不多，只是它的位置在 table view section 的下方，如下圖的藍色區塊為表格的 footer。
搭配 Dynamic Prototypes 的 table 顯示 header / footer
剛剛的例子以 static cells 為例，不過 table view header & footer 要搭配 dynamic prototypes 也不是問題，比方以下範例模仿 Music App，以 table view header 製作上方的 Play & Shuffle 區塊。
修改 header / footer 的內容
有些時候我們希望能從程式修改 header / footer 的內容，比方我們想從程式設定 header 呈現的專輯資訊。
由於 table view header 只會有一個，所以我們可以直接將 header 裡的元件拉 outlet 到 table view controller，然後再從 viewDidLoad 修改。
class AlbumTableViewController: UITableViewController {
@IBOutlet weak var albumImageView: UIImageView!
@IBOutlet weak var albumNameLabel: UILabel!
@IBOutlet weak var singerNameLabel: UILabel!
@IBOutlet weak var genreLabel: UILabel!使用 auto layout 計算 header / footer 的高度
table view header / footer 的高度預設是固定的，想要它聰明地依據內容自動計算高度，我們必須做到以下兩件事:
- 在 header / footer 裡設定 auto layout 條件。
2. 在 controller 的 viewDidLayoutSubviews 裡設定 header 高度。
利用 function systemLayoutSizeFitting 計算 header 高度。值得注意的，我們必須以 tableView.tableHeaderView = headerView 重新設定 headerView，它的高度才會正確。
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
if let headerView = tableView.tableHeaderView {
let height = headerView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize).height
if height != headerView.frame.size.height {
headerView.frame.size.height = height
tableView.tableHeaderView = headerView
}
}
}假設我們在 viewDidLoad 設定 lyricsLabel 的內容。
override func viewDidLoad() {
super.viewDidLoad()
lyricsLabel.text = """
再見吧我的王子 守護愛情的樣子
讓回憶紀念最初感動的真實
滿口永遠的孩子 慢慢懂事
用眼淚灌溉會幸福的種子
再見吧我的王子 夢想還沒有消失
我會併著你的勇氣一起堅持
曬著艷陽的奔馳 勾勾手指
你住的城市會有我的 思念因子 喔喔
"""
}結果
參考連結
