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

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What is going on with this article?
@AkkeyLab

TableHeaderView の高さが AutoLayout で変わってくれないときの対処法

More than 1 year has passed since last update.

この記事について

AutoLayout 利用時の TableHeaderView Height 問題は多くの記事で取り上げられています。今回紹介するのは、その中でも実装難易度が低く、複雑性が低いものをサンプルを使いながら紹介します。
よってこの方法は解決スピードを重視したものとなりますので、ご理解ください。

  • Swift 4.x
  • Xcode 10.1
  • iOS 12

高さ不確定の現状

Screen Shot 2019-01-21 at 14.58.00.png

import UIKit

class ViewController: UIViewController {
    @IBOutlet private weak var tableView: UITableView!
    private let headerView = UINib(nibName: "HeaderView", bundle: nil).instantiate(withOwner: nil, options: nil).first as! HeaderView

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.delegate = self
        tableView.dataSource = self
        tableView.tableHeaderView = headerView
    }
}
// セルに関する処理は省略

このように TableHeaderView が正しく決まっておらず、レイアウトが崩れています(image/label/button の間隔が空きすぎてます)。
HeaderView 内で自動的に高さが決まるように設計しても、強制的に高さを変えられてしまう現象が発生しています。

解決方法

Screen Shot 2019-01-21 at 14.53.59.png
TableHeaderView 上のパーツを UIView 上に直置きするのではなく、1つ UIView を敷いてからその上に置くようにします。 BaseView と定義している View のことです。そして、 BaseView の上・左・右に対して制約をつけ、高さは中のパーツで決まるようにレイアウトします。
最後に、 BaseView を IBOutlet でつなげて高さを外部から参照できるようにします。

class ViewController: UIViewController {
    private let headerView = ...
    ...

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        var frame = headerView.frame
        frame.size.height = headerView.height
        headerView.frame = frame
        tableView.tableHeaderView = headerView
    }
}

VC 側で高さを反映させて完了です。

問題解決

Screen Shot 2019-01-21 at 14.33.21.png
TableHeaderView の高さが強制的に決まってしまって、中のパーツで高さが決まってくれないのであれば、 UIView を1つ敷くことによってレイアウト計算を分け、AutoLayout によって決定した高さを TableHeaderView の高さに指定してしまえばいいじゃん!というアプローチでした。

最後に

素材として いらすとや を利用させていただきました。
実は、アプリ内に登場するカプセルフィギュアは本当に存在します(笑)。

6
Help us understand the problem. What is going on with this article?
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
AkkeyLab
I love Swift : )
planningdev
九州工業大学 ITサービス開発・運用団体

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
6
Help us understand the problem. What is going on with this article?