UITableViewの高さ制約をコンテンツ量に応じて変化させる

複数の項目を一覧形式して出力する方法はいくつか考えられます。
たとえば、一つは UIStackView を利用し、項目を UILabel として必要な分だけ動的に追加する方法です。

しかし、たとえば項目をタップしたときに特定の動作を行わせたい、スワイプで削除させたいとなると、その実装だけでもかなり大変となります。

一方、UITableView を使うと、セルをタップしたときの処理やスワイプで削除したときの処理など、すべて delegate に任せることができますので、自分で実装すべきコードは格段に減ります。
その一方、UITableView そのものの高さをコンテンツの量（セルの数）にあわせて動的に変化させるとなると、どうすればよいのかかんがえてします。

ここでは、StoryBoard を使い、高さ制約（Constraint）を設定し、それをコード側から動的に変更させることによって、セルの数とUITableView の高さを一致させる方法について考えてみたいと思います。

Interface Builder を使った制約の追加とアウトレットの設定

UITableView に対する制約の追加

StoryBoard で使う制約（Constraint）は、「一つの軸に対して2つの拘束をかける」という点が基本的な考え方になります。
なので、UITableView の場合は、通常上下左右にに対する拘束をかければ、それで十分ということになります。

一方、コンテンツ量に応じてUITableView の高さを変化させるのであれば、高さに関する制約を追加する必要があります。
この、「高さに関する制約」をコードの方から動的に変更させることによって、UITableView そのものの高さを変更することになります。

高さ制約

[Add New Constraints] の [Height] に対して固定値で制約を与えます。
ここでは、StoryBoard 上で設定している仮の値（この場合は88）となっていますが、実際はコード側から変更しますので、適切な値であれば何でもかまいません。
StoryBoard で画面レイアウトを確かめるのに支障がない値を設定しておくと良いかと思います。

制約を追加すると、Document Outline にその制約に関する情報が表示されます。

高さ制約の追加

ここでは、 Equipment Table という名前で既にアウトレットを作っている UITableView に対して掛けた制約なので、Equipment Table Height Constraint という名前になっています。

アウトレットの設定

つぎに、この制約をコード側に対してアウトレットとして設定します。
これは、通常の UI部品と同じく、制約名から Ctrl + ドラッグ を行い、コード側にリンクを貼る作業となります。

アウトレットの作成

ドラッグを終えるとポップアップウィンドウが表示されますので、あとからでも参照できるような適切な名前で変数名を設定します。

ポップアップ

コード上には次のような感じでアウトレットが作成されたと思います。

/// UITableView の高さに関する制約
@IBOutlet weak var equipmentTableHeightConstraint: NSLayoutConstraint!

1 2	/// UITableView の高さに関する制約 @IBOutlet weak var equipmentTableHeightConstraint: NSLayoutConstraint!

Interface Builder を用いた StoryBoard の設定は以上で終了です。

コードの記述

動的レイアウトの設定

iOS がレイアウトの設定を変更する必要が生じたときに呼び出すメソッドの一つが viewWillLayputSubviews() ですので、UITableView の高さ設定はこのメソッドをオーバーライドすることで設定します。

viewWillLayoutSubviews()
Called to notify the view controller that its view is about to layout its subviews.

UITableView の高さですが、ここでは [セル一つの高さの固定値 * セルに表示するデータの数 ] で設定したいと思います。
セルの高さについてはカスタムセルを作る際に固定値として設定することも可能ですし、後述の delegate で一律に設定することも可能です。
ただし、いずれにしてもセルの内容を良く考慮して高さを求めておく必要はありますので、その点には注意するようにお願いします。

/// Cell の高さ
let cellHeight: CGFloat = 30

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    // コンテンツの内容に応じて UITableView の高さを変える
    let itemCount = parkInfo.playEquipments.count
    equipmentTableHeightConstraint.constant = CGFloat(itemCount) * cellHeight
}

/// Cell の高さ

let cellHeight: CGFloat = 30

override func viewWillLayoutSubviews() {

super.viewWillLayoutSubviews()

// コンテンツの内容に応じて UITableView の高さを変える

let itemCount = parkInfo.playEquipments.count

equipmentTableHeightConstraint.constant = CGFloat(itemCount) * cellHeight

}

ここで、 cellHeight がセル一つ分の高さを示すプロパティとなります。
また、ここでは parkInfo.playEquipments というプロパティがセルに表示したい配列となっていますので、 count プロパティを用いて表示するセル数を計算します。

セルの高さは8行目で行っているように、UITableView の高さ制約が持つ constant プロパティ（定数）に対し、直接設定したい高さを代入します。
ここでは、セル数 * 高さ を代入しています。

また、UITableView の delegate でセルの高さを返すように設定します。
カスタムセルを作るなどして、セルの高さが固定値となっている場合には、この設定は必ずしも必要とはならないので、環境に応じて設定していただければと思います。

// Cell の高さ
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return cellHeight
}

// Cell の高さ

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {

return cellHeight

}

基本的に、この設定だけでセル数に応じた UITableView の高さ設定を行うことが可能となります。

シミュレータで実際に確認するとつぎのような感じとなります。

2つの公園で表示する遊具数が異なっていますが（赤枠の部分）、それに応じて UITableView の表示領域も違っていることが確認できるかと思います。
ちなみに、UITableView の下にある黄色のボタンは、UITableView の外部に配置したボタンです。このボタンの top と UITableView の bottom を関連づけて制約をかけていますので、UITableView のサイズに応じてボタンの場所も移動しています。

データの追加とレイアウトの更新

UITableView の場合、データを追加したあとに reloadData() を呼び出すことによってUITableView の再描画を行いますが、同時にレイアウトの更新を行うことで表示領域も変更させることが可能です。

parkInfo.playEquipments.append(text)

tableView.reloadData()
view.setNeedsLayout()

parkInfo.playEquipments.append(text)

tableView.reloadData()

view.setNeedsLayout()

このように、 setNeedsLayout() を呼び出すことによって、UITableView の高さも動的に変化させることが可能となります。

セルの削除とレイアウトの更新

セルの削除の場合も、追加と同じく必要に応じて setNeedsLayout() を呼び出すことによってレイアウトを更新できます。
以下の例は、UITableView の delegate を使い、スワイプによって任意のセルを削除する場合の例です。
ここでは、レイアウトの更新にアニメーションを併用することによって、削除後のレイアウトの変化に動きを持たせています。

func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
    if editingStyle == .delete {
        parkInfo.playEquipments.remove(at: indexPath.row)
        tableView.deleteRows(at: [indexPath], with: .fade)
            
        // 項目の削除に合わせて拘束を更新する。
        // 更新はアニメーションさせる
        self.view.setNeedsLayout()

        UIView.animate(withDuration: 0.5) {
            self.view.layoutIfNeeded()
        }
    }
}

func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {

if editingStyle == .delete {

parkInfo.playEquipments.remove(at: indexPath.row)

tableView.deleteRows(at: [indexPath], with: .fade)

// 項目の削除に合わせて拘束を更新する。

// 更新はアニメーションさせる

self.view.setNeedsLayout()

UIView.animate(withDuration: 0.5) {

self.view.layoutIfNeeded()

}

セルのスクロールを抑制する

表示するセルの数とUITableView の数を一致させた場合でも、そのままの設定だとスクロールは可能であり、ちょっと使い勝手が悪くなる場合があります。
このような場合は、あらかじめ UITableView のプロパティのうち、 isScrollEnabled を設定しておくことでスクロールを抑制することが可能です。

tableView.isScrollEnabled = false

1	tableView.isScrollEnabled = false

まとめ

単なるラベルの羅列であれば、UILabel を UIStackView に配置することで可能ですが、動的な追加削除を行いたいのであれば、UITableView を活用するのも一つの方法だと思います。