4

How do I apply auto layout variations based on the screen size of the selected device? All iPhone devices are Compact width Regular height, so if I want to add a variation for an iPhone 4s screen only, the variation gets applied to ALL iPhone screens since they're all part of the same trait. I remember this used to be pretty easy and straightforward in Xcode 7, but I'm guessing that this just another of millions things that Apple unnecessarily has to overcomplicate. How do I do this in Xcode 8?

bad_coder
  • 11,289
  • 20
  • 44
  • 72
Mark Carols
  • 403
  • 4
  • 20

1 Answers1

4

How do I apply auto layout variations based on the screen size of the selected device

In a nutshell: You don't. The idea of auto layout is that you apply constraints that cause your interface to look reasonably good in all the different iPhone sizes (that is, all the different ways that the trait collection can be Compact/Regular or Compact/Compact).

This is typically done by using constraints that are based in some way on the size of the ultimate superview; thus, when the superview size is different (because you've launched on a different size screen), things still look good.

I remember this used to be pretty easy and straightforward in Xcode 7

Then you remember wrong. There is no difference in this regard between Xcode 7 and Xcode 8. There is a difference in how Xcode 8 displays to you the effect of your constraints in the Interface Builder canvas, but this is merely a matter of display in Interface Builder, and is in fact an improvement over Xcode 7 (which showed you a big unhelpful square).

matt
  • 515,959
  • 87
  • 875
  • 1,141
  • "This is typically done by using constraints that are based in some way on the size of the ultimate superview;" Meaning, this "some way" you're talking about is using multipliers, I guess. It really is a shame there's no practical solution for creating 'dynamic' constraints in a Storyboard (where Auto Layout usually takes place). But then again, knowing there's only so many traits for a boatload of screen resolutions, there seems to be a lot of impractical work methods in Xcode. – Mark Carols Nov 15 '16 at 07:06
  • Never understood what the point of 3 different image resolutions in the asset library was either, when you still have to calculate all the width/height constraints yourself for every single screen resolution. – Mark Carols Nov 15 '16 at 07:07
  • No, you're perfectly right, you clearly don't understand resolution or autolayout. If you think you need different constraints for different screen resolutions, you are deeply confused and are probably doing far more work than you have to. But the comments section here is not where you're going to be convinced out of your misconceptions. – matt Nov 15 '16 at 11:55
  • I don't need different constraints, but I do need different constraint constants. If I put a `UIImageView` inside my view and give it a height and width of 350, it's gonna fit perfectly on an iPhone 7 screen (view frame width of 375) but it won't fit inside a 4s screen (view frame width of 320). What I said in my previous comment was that I don't see the point in adding three different image sizes if you're still going to have to take care of the `UIImage` view and its width and height constraints yourself. It was just an example of confusing concepts of building your interface in Xcode. – Mark Carols Nov 16 '16 at 06:00
  • I understand Auto Layout perfectly, and the fact that you misunderstood my second comment doesn't change this. I guess my complaints against Xcode's Interface Builder mostly come from the realization that I'm gonna have to do a lot of unpractical layout programming, while I feel like it could've been made a lot easier by the developers over at Infinite Loop. If you can throw in some suggestions on how to make Space Constraints dynamic (adept to the view's frame size) INSIDE MY STORYBOARD (so not programmatically), it would be much appreciated. If not, I understand... – Mark Carols Nov 16 '16 at 06:07
  • "I understand Auto Layout perfectly" I don't think you do. The point of autolayout is that you do _not_ give your image view a height and width of 350. You pin its edges to its neighbors or its superview so that it looks good relative to any size screen. You do _not_ change the constants programmatically. You do not do _any_ layout programming. You _do_ configure it all right in the storyboard. That is why autolayout is good. – matt Nov 16 '16 at 14:43
  • 1
    Oh boy...alright, third attempt to ask my question because I'm once again being misunderstood. How do I make those SPACE constraints (so not width/height, but those constraints you pin to the edges of a subview) dynamic, to make it adept to its superview? If I pin a subview to its superview and give all 4 constraints a constant of 20, that subview will not have the same relative size on every screen. On bigger screens it will be closer to the edges than on smaller screens, thus making the relative size of the subview vary depending on what screen the view is displayed on. You're still with me? – Mark Carols Nov 16 '16 at 17:50
  • Alright, here it comes, pay close attention: how do I make it that Space Constraints have a dynamic value instead of a hard-coded constant? If I want to do that with width/height constraints, I make the width/height equal to its superview's width/height and then use multiplier (as noted in my very first comment on this answer) to say for example: "make this view's width 15 percent of its superview's width". Voila! Now the constraint constant will change along with its superview, thus making the view's relative size stay the same, no matter what screen the view is displayed on. Still following? – Mark Carols Nov 16 '16 at 17:57
  • Good, 'cause here comes the actual question: Is there a way to take a Space Constraint and 'tell it': "You should always be 5 percent of the superview's width", so that spaces (just like widths and heights) will also adept to the size of the screen? You can easily do this programmatically by defining the constraint as a variable and just assign "the superview's width multiplied by 0,05" to its constant property, but since this would be in the pain in the butt to do for 40 different constraints, I'm asking how to do this in the Storyboard, and not programmatically. – Mark Carols Nov 16 '16 at 18:03
  • You see, as far as I know there's no way of making a Space constraint equal to a frame's width/height, which is the first step to take if I want to create a dynamic width/height constraint. However, Space constraint DO have multiplier properties, so I assume there has to be one way or another to get this done in the Storyboard. This really is as clear as I can explain my question, so hopefully no more misconceptions or miscommunications because of one example I gave which didn't even have anything to do with my question really. – Mark Carols Nov 16 '16 at 18:09
  • If you could just answer the question I've asked three times already, instead of constantly disqualifying me based on your own misconceptions, it would be much appreciated. If you can't, please say so, so I can move on and ask this question to someone who CAN answer it. Thanks! – Mark Carols Nov 16 '16 at 23:36
  • I think I did answer it. And of course I've written you a whole book with a big chapter devoted largely to autolayout. But as I've said, comments are not the place to hash this out; if you ask a _specific_ question with a _specific_ scenario (i.e. what is the end result you think you want), blip me and I'll be glad to take a look! – matt Nov 17 '16 at 02:59
  • 1
    "I think I did answer it." You really didn't. It looks like you've been evading my question to write a book that I didn't even ask for devoted to Auto Layout. In response to the rest of your comment: Specific question: "How do I make it that a Space Constraint is relative to the width or height of its superview IN THE STORYBOARD?". Specific scenario (the end result I want): "I want the Space Constraint's constant value to be a percentage of the superview's width or height (for example: 15 percent of the superview's width)". The answer to this question shouldn't require more than 1 comment. – Mark Carols Nov 17 '16 at 03:10
  • Well, if I understand what you mean by "space constraint", the answer used to be that you use a spacer view, as I explain here: http://stackoverflow.com/a/20865342/341994. Nowadays you use a UIStackView, and the way _it_ works is by means of UILayoutGuide objects, as I explain here: http://stackoverflow.com/a/31523872/341994 So the really short answer, no programming required, is: UIStackView. – matt Nov 17 '16 at 03:26
  • Thanks! If I was bound to use the old method (spacer views) I would have definitly chosen to do it programmatically instead, since it would probably be a lot less work in my case (tons of subviews). But I'm glad to see there's an alternative now. I'll give the stack view a shot and see how that works out. I'm gonna keep on hoping it'll be possible to make the constant of Width/Height constraints equal to those of Horizontal/Vertical Space constraints in a future release of Xcode though. It would make things so much easier. – Mark Carols Nov 17 '16 at 07:31
  • You can add variations. @matt is completely wrong. https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/Size-ClassSpecificLayout.html – Iulian Onofrei Feb 20 '17 at 11:29
  • @IulianOnofrei I'm exactly right and your link proves it. As I said in my answer, those variations are about size _classes_ — not about individual screen sizes, which is what the OP asked about. Read more carefully. – matt Feb 20 '17 at 16:27