MXParallaxHeaderのヘッダーの高さを可変にする

Twitterのユーザー詳細画面のような、上からヘッダー、タブ、コンテンツのような画面を作る時、MXParallaxHeaderが便利です。

github.com

こういう画面。

• SwiftUI対応
• ヘッダーの高さを中身によって可変にする

ということがやりたかったんですが、地味に大変でした。 以下、コードです。

gist.github.com

環境:

• MXParallaxHeader 1.1.0
• iOS14

解説

UIHostingController

UIViewController.hostingController {
   EmptyView()
}

みたいなやつは

UIHostingController(rootView: EmptyView())

に読み替えてください。

ヘッダーの高さの取得

ヘッダーもSwiftUIなので、SwiftUIのViewの高さを取得する必要があります。

SwiftUIのViewをUIHostingControllerにして、高さの制約を切った上で systemLayoutSizeFitting(_:) をやると高さが取得できます。この時、サイズに UIScreen.main.bounds.width を使ってしまっていますので、幅が画面サイズと一致しない場合は適切に変更してください。

そのUIHostingControllerをUIViewControllerに貼り付けて、UIHostingControllerのviewに先ほど取得した高さの制約をつけています。

ヘッダーの高さの変更

ヘッダーの高さが変わる操作をしたあと、 update.toggle() を呼ぶようにします。これでUIViewControllerRepresentableの updateUIViewController() が呼ばれるので、その中でヘッダーの高さを取得してMXParallaxHeaderに伝えています。

動作

これでヘッダー内でコンテンツが開いたり閉じたりするUIを実現できます。

ここまで書いておいてなんですが、複雑なコンテンツだと一部挙動が変なことがありましたので参考程度でお願いします。