More than 3 years have passed since last update.

iOS15以降では空セル挙動を切り替えるのにfillerRowHeightを使おう

Last updated at 2022-02-20Posted at 2022-02-19

iOS15のUITableViewでは、ついに「空セルが表示されない」挙動がデフォルトになりました。以前は空セル表示がデフォルトだったため、それを消すために

tableView.tableFooterView = UIView(frame: .zero)

のようなワークアラウンド実装を行なった開発者の方は多いのではないかと思います。

しかし、iOS15の挙動変更はtableFooterViewのデフォルト値が空ビューになったのではなく、空セルの挙動が新しいfillerRowHeight(filter: フィルター、ではなく、filler: フィラー)というプロパティによって管理されるようになり、そのデフォルト値が「空セルを表示しない」値になっている事により実現されています。

この記事ではドキュメントに記載のある「プロパティの設定による挙動の違い3パターン」をサンプルとともに解説します。

なお、ここまでは馴染みのある「空セル」と呼称しましたが、これ以降は公式ドキュメントの表現に従って「filler row」という名称を使っていきます。「空いている部分を埋める行」というニュアンスです。

fillerRowHeightの3種類の挙動

前提として、**fillerRowはUITableView.styleが.plainの時でないと表示されません。**なので、スタイルがUITableView.Style.groupedやUITableView.Style.insetGroupedの場合にはfillerRowHeightに何の値を入れても無視されることになります。

そのため、fillerRowHeightの設定を有効にしたい場合は、Storyboardの設定やコード初期化でstyle: .plainを渡すようにします。

その上で、filterRowHeightはその値によって大きく3種類の挙動をすることがドキュメントによって示されています。

・0.0を設定するとfiller rowsを表示しません。この挙動はiOS15以上ではデフォルトです。
・automaticDimensionを設定すると、table viewの最後の行の高さに合わせて、automatic heightを使うfiller rowsを表示します。この挙動はiOS15未満でデフォルトです。
・任意の正の値を設定すると、指定した高さのfiller rowsを表示します。

Apple inc., fillerRowHeight, Discussion, https://developer.apple.com/documentation/uikit/uitableview/3801921-fillerrowheight, viewed: 2022/02/19

引用部分の一行目と二行目見てもらうと分かりますが、デフォルト挙動が切り替わっていることも明示されています。

検証

上記の三種類の挙動を実際に動かしてみていきます。検証コードはPlaygroundで書かれていますので、お手元の環境でペーストしてお試しください。

fillerRowHeight.playground

//: A UIKit based Playground for presenting user interface
  
import UIKit
import PlaygroundSupport

class MyViewController : UIViewController, UITableViewDataSource {

    /*
     style: .plainは必須
     */
    let tableView = UITableView(frame: .zero, style: .plain)

    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white
        view.addSubview(tableView)

        // AutolayoutをサボりたいときにたまにresizingMaskを書きます
        tableView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
        tableView.dataSource = self

        self.view = view
    }

    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 3
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        var contentConfiguration = cell.defaultContentConfiguration()
        contentConfiguration.text = indexPath.row.description
        cell.contentConfiguration = contentConfiguration
        return cell

    }

}

let myViewController = MyViewController()

// fillerRowHeight = 0.0
// 検証に必要な際にアンコメントしてください
//myViewController.tableView.fillerRowHeight = 0.0 // default

// fillerRowHeight = UITableView.automaticDimenssion
// 検証に必要な際にアンコメントしてください
//myViewController.tableView.fillerRowHeight = UITableView.automaticDimension

// fillerRowHeight = 任意の正の値
// 検証に必要な際にアンコメントしてください
myViewController.tableView.fillerRowHeight = 30

PlaygroundPage.current.liveView = myViewController