Learn how to nest stack views to easily build some complex layouts without using complicated auto layout constraints.
This is a companion discussion topic for the original entry at https://www.raywenderlich.com/3942-introducing-stack-views/lessons/3
This is a companion discussion topic for the original entry at https://www.raywenderlich.com/3942-introducing-stack-views/lessons/3
Seems like the demo Finished project still has some of the autolayout warnings (even in the video). ( I tried to post an image of the autolayout warnings but apparently I am allowed only one picture per post 
)
When I use the “Resolve Autolayout” menu that image is still becoming huge.
I tried to play around the content hugging priority and content compression resistant priority ( increased this attribute for map view, but no change). Would love to learn how to fix this issue.
Also, unless you cover that in later videos, I didn’t completely understand how to customize the amount of vertical space a each vertical stack view cell occupies. Is there some way to say that this view takes up 20% of the stack view height and the next one takes up 10% etc?
Hi @shruti,
By default, the views inside a stack view will sized according to their intrinsic content size - which is exactly as you see in the screenshot that you’ve provided. Since the stack view has its size defined by auto layout constraints with its superview, one of the subviews has to be stretched or compressed. This is what Content Compression Resistance Priority and Content Hugging Priority is used for. You can adjust these to determine which of the views should be resized to fill the stack view.
You mentioned being able to set specific heights on stack view arranged subviews. A stack view determines the size of its subviews via their intrinsic content size. However, since a stack view is just creating auto layout constraints, there’s nothing to stop you adding your own constraints (provided they don’t conflict with those created by the stack view). You can easily add AL constraints to achieve the sizing you require.
Hope that helps
sam
Hello, @samdavies.
Thanks a lot for you tutorials and talks.
Could you, please, clarify. As I understand MKMapView doesn’t have any intrinsic content size and if we resolve AL constraints it will be resized to height of zero, which we see on the screenshot, the same thing will happen if we run starter project.
How come, in video you always have map view visible. Is there additional constraint for it’s height? But that way height of the map view would be the same in portrait and horizontal orientation.
Hi shruti & huralnyk. It’s good to know that I am not alone. 
I’ve been working through this same tutorial and I have the exact same problem. I’ve carefully followed the tutorial to the letter, and I’m sure the view hierarchy is correct. But … I don’t see the map view at all, except for a tiny slice of it when the “Crepe Delight” is selected. See the screenshot below. It would be great to fix this and make things look more like Sam’s pic. Sam - maybe something has subtly changed in more recent versions of iOS? Maybe you can run through this particular tutorial step again and see if your original result is replicated? I am running iPhone 6s Plus (9.1) on the sim.
Hi peeps,
There is indeed a difference between the iOS 9 beta I used in the videos and the subsequently released versions.
Some of the comments in the thread on the old forums touch on this:
http://archive.raywenderlich.com/forums/viewtopic.php?f=20&t=22650
The way I would recommend doing it now is as follows:
- Ensure the map is inside the details stack view (with the details label)
- Change the outer stack view from fill equally to fill
- Add an auto layout constraint between the map and the top pancake image to make them equal heights.
This should give you a sensible layout, demonstrating how you can mix auto layout with stack views.
Note that this will break the adaptiveness of the current layout. To retain this, make sure that you only make the above changes for regular height size classes.
sam
1 Like
Thanks for the response, Sam. I verified that the problem was caused by a change in iOS itself by simply downloading the next part of your tutorial (Stack View Configuration) and running that without making any changes at all. (I.e. no possibility of me having screwed things up! 
) Sure enough, it exhibited the same behaviour. So definitely a change in iOS itself since the beta you were working with.
Anyway, I’ll give your suggestions a try. Thanks again,
Dave
1 Like
For a UIImageView in an UIStackView, how important is it to have a place holder image?
Something I was working with…
The UIImageView would sometimes wildly change its size as it seemed like Interface Builder didn’t know what to do.
Perhaps with the right Content Compressions Resistance Priorities being set, it’s not so much of an issue. It did seem like Interface Builder would sometimes flip a coin and all of a sudden determine that the width of the UIImageView is 0.
I always like to put a placeholder image in for precisely this reason. The problem is that your layout is relying on the image view’s intrinsic content size in order to perform its layout. Although this is fine for when you provide the image solely at runtime, it means that IB has no real way to work out the layout (in many cases).
Depending on your layout, you can sometimes fix this with the CCRP and CHP, but more often than not you’ll still be relying on the intrinsic content size of the image view to fully describe the layout.
Instead of using a placeholder image, you could create some constraints which are only present for IB, but labelling them as placeholders.
Provide width and/or height constraints here, and it has precisely the same effect as a placeholder image, but without the necessity of adding an unnecessary image to your app bundle.
Hope that’s of some help
sam
1 Like
Hello, Mr. Sam! I am a newbie here, and I’m using iOS 11 and Xcode 9 beta. I wanted to remake the app’s functionality in this awesome part of your tutorial. The thing is it’s not working as it does with you. @davejewell has the same problem apparently. Could you please guide us on how to remake this on Xcode 9? Thank you very much I’ve rewatched the video about 6 times now and rewrote everything 5 times, the problem remains anyways.
The map only shows a little for this pancake house but for others it’s just not there.
HI @islombek
Sorry to hear that you’re having problems. This course has been replaced by the auto layout course:
https://videos.raywenderlich.com/courses/62-beginning-auto-layout/lessons/1
That course isn’t yet updated for iOS 11, and there are a few changes in UIKit about constraints that will affect how layout works.
The problem that you’re experiencing is related to the fact that maps don’t have an intrinsic content size. If you add a height constraint to the map, then it should (in theory) always appear. The behaviour of maps was undefined when I created this series, and as such has changed over recent versions of iOS.
Hopefully that’ll give you some pointers. As I mentioned, the content from this course has been integrated into the Auto Layout course, which will be updated at some point.
sam