I am trying to create a layout element like below in the middle of a page and leverage UIPageViewController to do it.
I embedded a UIPageViewController in a container view. The contents of the card element have a height determined by AutoLayout, and stretch horizontally towards the margins, with the card having a max width after which it stays centered. However I'm running into a strange problem. When I set the VC for the card element to be the contents of my UIPageViewController, the individual page gets mostly sized correctly, but its origin is outside the bounds of the pageVC's content view.
I recreated the problem in a very small test project. Here is the storyboard and relevant constraints:
Here is my code:
class ViewController: UIViewController {
var pageController: UIPageViewController!
override func viewDidLoad() {
super.viewDidLoad()
guard let vc = storyboard?.instantiateViewController(withIdentifier: "PageView") else { return }
pageController.setViewControllers([vc], direction: .forward, animated: true, completion: nil)
}
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
if let dest = segue.destination as? UIPageViewController {
pageController = dest
}
}
}
class SinglePageViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.translatesAutoresizingMaskIntoConstraints = false
}
}
And here is what I am actually getting:
I tried setting view.autoresizingMask = [.flexibleWidth, .flexibleLeftMargin, .flexibleRightMargin] instead of view.translatesAutoresizingMaskIntoConstraints = false in SinglePageViewController, and that gives it correct leading, trailing, and width constraints, but then I can't get the UIView-Encapsulated-Layout-Height: self.height = 0 constraint to go away. There are no system constraints that account for the origin misplacement, so I have no idea how to debug further. All the views higher up in the hierarchy have height 0, and all the views farther down are placed correctly. If I embed the SinglePageViewController directly in the container view, it lays out perfectly, but if I put the UIPageViewController in between, it breaks.
Why doesn't the UIPageViewController constrain the pages inside it to match its view's bounds? Is there any way to get this to work?
First, you should not do this:
When views are instantiated from Storyboards they are loaded with appropriate resizing masks... the "Root" view of a view controller needs
translatesAutoresizingMaskIntoConstraintsset totruein order for the layout to work properly.Removing that line may get you where you need to be, but I think you have a couple constraints setup incorrectly.
Here's how the Storyboard I set up looks:
Then, using this code:
I get this result:
The main view's background color is set to "cantaloupe" to make it easy to see the frame of the
UIContainerView.Rotated to landscape orientation:
The width maxes out at 325 and it stays centered.
For reference, here's how it looks without setting the view's background to white:
And here's the source to my Storyboard: