I'm trying to create a launch screen storyboard (so no code) with a somewhat complicated layout.
The problem is that I need two views shown side by side (kind of like a split view controller). Here are the requirements:
All three of these must be applied to the regular width size class.
I have the first two requirements working just fine. I can't figure out how to apply the 3rd requirement.
These are the constraints I have at the moment:
Those pin the two views around the sides. The following additional constraints set the widths of the two views to meet my first two requirements:
With those in place you can see the results in various iPads.
On a 12.9" iPad in portrait you will see the left view taking up the left 1/3 of the screen and the right taking the right 2/3 of the screen. On a 12.9" iPad in landscape, the left view maxes out at 375 and the right view takes the rest of the screen. All good so far.
On a 9.7" iPad in landscape you see the left view taking the left 1/3 of the screen and the right view taking the right 2/3 of the screen. Again, good.
The problem I'm trying to solve starts with a 9.7" iPad in portrait. The left view is taking up 1/3 of the screen but it's really narrow. It's only 256 points wide. Since that is smaller than my desired minimum of 340, I don't want the left view to appear at all. The right view should fill the whole iPad.
Is there some combination of constraints, perhaps with various priorities, that can force the left view's width to 0 if it can't be at least 340?
As a side note, I have even different requirements for compact width but I have all of that working. It's just this one last requirement for different sized screens within the regular width size class that I need to solve.
Looks like I managed to achieve what you need. Tested it on iPad 9.7" and 12.9", works as expected. It's a bit of a mess, but it works.
The trick is to use additional view, which should be 0 points wide if screen is less then 1020 points, and 1 point wide otherwise (I'll refer to it as OnePixelWideView
). Then make your LeftView.width == 375 * OnePixelWideView.width @ 999
.
Another complication is that it will not work with LeftView.width = 0.5 * RightView.width @ 999
, regardless of priority, but we can work around that by adding one more view with sides pinned to superview (I'll call it FullscreenView
), and make LeftView.width <= 0.33 * FullscreenView.width
Here is a full list of horizontal constraints:
FullscreenView.leading = superview.leading
FullscreenView.trailing = superview.trailing
superview.trailing = OnePixelWideView.trailing + 1019
superview.leading = OnePixelWideView.leading @ 999
OnePixelWideView.width <= 1
LeftView.leading = superview.leading
LeftView.width <= 375
LeftView.width <= 0.33 * FullscreenView.width
LeftView.width = 375 * OnePixelWideView.width @999
RightView.leading = LeftView.trailing
RightView.trailing = superview.trailing
Here is a .storyboard
content to play around.