UITableViewは殆どの場合、カスタムセルで表示させると思いますが、セクションヘッダー（フッター）も使用するとなれば、独自のデザインで実装することがほとんどです。
2年前はこの実装方法がわからずセクションヘッダーにnibを表示出来ないエラーに阻まれ、結局セクションを区切ってセクションヘッダーのように実装するということを行っていました。
しかし解決方法は単純でした。
nibの継承を”UIView”ではなく”UITableViewHeaderFooterView”にし、カスタムセルと同様にtableViewにregisterする必要があるのでした。。。
今回はUITableViewのセクションヘッダーにカスタムセルを表示する方法を記載します。
カスタムのnibを作成する
「New File」から「Cocoa Touch Class」を選択し、「Subclass of」に”UITableViewHeaderFooterView”を選択します。ファイル名も”CustomeHeaderView”などで自由に指定します。
これにより、”CustomeHeaderView”が作成されます。
あとは、xibファイルの編集等で、レイアウト等を編集していきます。
UITableViewから独自のセクションヘッダーを呼び出す
こちらもカスタムセルの時と同様に、UITableViewにregisterする必要があります。
UITableViewに独自のセクションヘッダーをregisterする
@IBOutlet weak var tableView: UITableView! {
didSet {
tableView.register(
UINib(nibName: String(describing: CustomeHeaderView.self), bundle: nil),
forHeaderFooterViewReuseIdentifier: String(describing: CustomeHeaderView.self)
)
}
}カスタムセルをregisterする時と全く同じ手順です。
違うのは、呼び出す時です。
UITableViewで独自のセクションヘッダーを呼ぶ
カスタムセルを表示させるときは”tableView(cellForRowAt)”で、こちらはUITableViewDataSourceの必須の関数でした。
セクションヘッダー（フッターも）は必須ではないので、追加してあげる必要があります。
Xcodeの補完機能を用いて、追加します。
“func tableViewviewfor…..”と入力していくと、”viewForHeaderInSection”の関数が表示されるので、それを選択します。便利！
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let view = tableView.dequeueReusableHeaderFooterView(withIdentifier: String(describing: CustomeHeaderView.self))
if let headerView = view as? CustomeHeaderView {
headerView.someFunction()
return headerView
}
return nil
}“viewForHeaderInSection”の関数は戻り値が”UIView?”なので、“viewForHeaderInSection”内で、定義したカスタムセクションヘッダーを返すようにします。
これでセクションヘッダーに独自のviewを表示させることが出来るようになります。
ただし、セクションヘッダーにはデフォルトの背景色が表示されてしまうので、こちらも併せて修正してあげると良いです。
セクションヘッダーの背景色を変更
セクションヘッダーの背景色を変更するには、UITableViewDataSourceプロトコルにて、”willDisplayHeaderView”を追加します。
このviewのtintColorプロパティにカラーを指定してあげると、セクションの背景色を変更することが出来ます。
func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
view.tintColor = .clear
}セクションヘッダーの高さを指定する
セクションのヘッダーの高さも指定することが可能です。デザインの要件に併せて指定します。
“heightForHeaderInSection”を追加して、CGFloatを返すようにするだけです。
もしセクションヘッダーに複雑なデザインを実装する場合は、この記述が必要になってきます。
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 60.0
}
