Help us understand the problem. What is going on with this article?

UITableViewHeaderFooterViewをxibで生成する

More than 3 years have passed since last update.

はじめに

こんにちは
UITableViewHeaderFooterViewという
tableViewのセクションで利用できるViewです。
register(_: ,forHeaderFooterViewReuseIdentifier: )
という再利用のメソッドがtableViewにあるのですが、
スクリーンショット 2016-11-17 3.18.05.png
画像のようにxibファイルを同時に作成できなくて困ったので、
まとめてみたいと思います。
至らぬ点など多々あると思いますが、コメントなど頂けたら幸いです。

カスタムClassとxibFileを作成する

UITableViewHeaderFooterViewを継承したカスタムClass

CustomHeaderFooterView.swift
import UIKit

class CustomHeaderFooterView: UITableViewHeaderFooterView {
    @IBOutlet weak var view: UIView!

    override func awakeFromNib() {       
    }
}

xibFile

通常のViewをxibで準備するように,
File -> New -> File... -> User InterfaceのViewを選択し、xibFileを作成します。
スクリーンショット 2016-11-17 3.45.42.png
「Custom Class」を先ほど作成したCustomHeaderFooterViewに設定しています。
スクリーンショット 2016-11-17 3.49.48.png
Simulated Metricsの設定やサイズを調節するとViewが見やすくなると思います。


スクリーンショット 2016-11-17 3.56.12.png
UIViewを追加します。UITableViewHeaderFooterViewの持つcontentViewが参照のみのプロパティで少し扱いにくいからです。(あまりよろしくないかもしれません...)

TableViewで利用する

tableViewにCustomHeaderFooterViewを初期化するように登録します。

ViewController.swift
override func viewDidLoad() {
    super.viewDidLoad()
    //xibの生成
    let xib = UINib(nibName: "CustomHeaderFooterView", bundle: nil)
    //再利用するための準備
    tableView.register(xib, forHeaderFooterViewReuseIdentifier: "CustomHeaderFooterView")
}

TableViewのDelegateにSectionの再利用を求めます

extension ViewController: UITableViewDelegate{
    //セクションの設定
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let headerFooterView = tableView.dequeueReusableHeaderFooterView(withIdentifier: "CustomHeaderFooterView") as! CustomHeaderFooterView
        return headerFooterView
    }
}

サンプルコード

一応、サンプルコード(動作させたViewController)を貼っておきたいと思います

ViewController.swift
import UIKit

class ViewController: UIViewController{
    @IBOutlet weak var tableView: UITableView!

    var sectionData:[UIColor] = [UIColor.brown,UIColor.green,UIColor.cyan]
    var cellData:[String] = ["セル 1","セル 2","セル 3"]

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        tableView.delegate = self
        //セクションの高さを設定
        tableView.sectionHeaderHeight = 44
        //xibの生成
        let xib = UINib(nibName: "CustomHeaderFooterView", bundle: nil)
        //再利用するための準備
        tableView.register(xib, forHeaderFooterViewReuseIdentifier: "CustomHeaderFooterView")
    }
}

extension ViewController: UITableViewDataSource{
    //テーブルの行ごとのセルを返却する
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell()
        cell.textLabel?.text = cellData[indexPath.row]
        return cell
    }
    //テーブルの行数を返却
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return cellData.count
    }
    //セクションの個数を返します
    func numberOfSections(in tableView: UITableView) -> Int {
        return sectionData.count
    }
}

extension ViewController: UITableViewDelegate{
    //セクションの設定
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let headerFooterView = tableView.dequeueReusableHeaderFooterView(withIdentifier: "CustomHeaderFooterView") as! CustomHeaderFooterView
        headerFooterView.view.backgroundColor = sectionData[section]
        return headerFooterView
    }
}

参考にさせていただいた記事

スタック・オーバーフロー

ありがとうございます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした