Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

UITableViewHeaderFooterViewをxibで生成する

はじめに

こんにちは
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
17
Help us understand the problem. What are the problem?