Hello,
I’m developing an app where I display a SwiftUI view inside a UIHostingController embedded within a UIKit ViewController.
I’m trying to animate the height of the UIHostingController’s view based on a switch’s value, but the SwiftUI view doesn’t animate at all.
Below is a simplified version of my code:
class ViewController: UIViewController {
private lazy var parentView: UIView = {
let view = UIView()
view.backgroundColor = .red
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
private lazy var hostingView: UIView = {
let testView = TestView()
let hostingController = UIHostingController(rootView: testView)
let view = hostingController.view!
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
private lazy var button: UISwitch = {
let button = UISwitch()
button.addTarget(self, action: #selector(onClickSwitch(sender:)), for: .valueChanged)
button.translatesAutoresizingMaskIntoConstraints = false
return button
}()
private var hostingViewHeightConstraint: NSLayoutConstraint?
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(parentView)
parentView.addSubview(hostingView)
parentView.addSubview(button)
NSLayoutConstraint.activate([
parentView.topAnchor.constraint(equalTo: view.topAnchor),
parentView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
parentView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
parentView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
])
NSLayoutConstraint.activate([
hostingView.bottomAnchor.constraint(equalTo: parentView.bottomAnchor),
hostingView.leadingAnchor.constraint(equalTo: parentView.leadingAnchor),
hostingView.trailingAnchor.constraint(equalTo: parentView.trailingAnchor)
])
hostingViewHeightConstraint = hostingView.heightAnchor.constraint(equalTo: parentView.heightAnchor, multiplier: 0.5)
hostingViewHeightConstraint?.isActive = true
NSLayoutConstraint.activate([
button.centerXAnchor.constraint(equalTo: parentView.centerXAnchor),
NSLayoutConstraint(item: button,
attribute: .centerY,
relatedBy: .equal,
toItem: parentView,
attribute: .centerY,
multiplier: 0.25,
constant: 0)
])
}
@objc func onClickSwitch(sender: UISwitch) {
hostingViewHeightConstraint?.isActive = false
let multiplier: CGFloat = sender.isOn ? 0.25 : 0.5
hostingViewHeightConstraint = hostingView.heightAnchor.constraint(equalTo: parentView.heightAnchor, multiplier: multiplier)
hostingViewHeightConstraint?.isActive = true
UIView.animate(withDuration: 0.3) {
self.view.layoutIfNeeded()
}
}
}
I’m looking for the behavior demonstrated in the video below:
Does anyone have suggestions on how to achieve this?
