Kodeco Forums

Video Tutorial: Introducing Stack Views Part 3: Configuration

🎓 Courses & Articles
1

Learn about some of the more advanced configuration options available within a stack view so that you can build the exact layout you want.

This is a companion discussion topic for the original entry at https://www.raywenderlich.com/3942-introducing-stack-views/lessons/4
2

It seems that with the current version of Xcode (7.3.1 as of this writing) does not seem to read the Content Compression Resistance Priority of the image when the device is in portrait mode. It is fine in landscape mode.

However, when I set the height of the map view to be equal to the image (as per instructions from the previous video) the portrait mode works again but, the landscape mode cuts off the detailsLabel since the heights of the image and map view are still equal.

Is it possible to NOT set the heights to be equal in landscape mode similar to how we set the other different properties (Axis, Alignment, Distribution, etc…) based on the orientation of the device?

I am enjoying these videos (: Will they be updated eventually?

Thanks!

Edit: I also noticed Xcode removed the Layout Margins Relative option in interface builder as well and can not see it anymore.

3

Hi @simonqq

If I remember correctly this was a problem that changed between betas of Xcode, all to do with the intrinsic content size of an MKMapView.

When I’ve worked on this sample project since then (for conference talks and the suchlike) I’ve created a constraint for the map and image to be equal height, and then only installed it for regular height size class. That way you can ensure that the height of the map will be the correct size, whilst maintaining the layout flip for compact height.

I think this will do exactly what you want. To be more specific:

  1. Create the equal height constraint
  2. Move into the “Compact Height” size class override, using the adaptive layout bar in Xcode.
  3. Select the constraint, and go to the attributes inspector.
  4. Find the line where it says “Installed”, click the + and create a size class override for the current layout.
  5. Uncheck the installed checkbox for the new size class override.

I think that I used this new approach in the RWDevCon talk I gave at RWDevCon in 2016. If you’ve got access to the RWDevCon Vault, you can check out the talk here:

https://www.raywenderlich.com/130143/rwdevcon-2016-session-103-beginning-uistackview

Hope that helps!

sam

4

Thanks for the reply @samdavies! I was halfway through that video in your RWDevCon talk and decided to go to these video tutorials instead! I didn’t know they were a little bit older!

I’ll try the above method out once I get the chance tonight!

5

@samdavies Thanks! it worked like a charm!!

1 Like
6

Can we have video related to adaptive layout in code (for stack views) instead of interface builder. I would like to understand the same through the code also.

7

@mpasumarthi

Keep on going through the series… video 6 is what you’re after:

https://videos.raywenderlich.com/courses/introducing-stack-views/lessons/6

sam

8

Nice! It would be great to have it updated for Xcode 8. The Layout Margins Relative has been removed from xcode8’s Interface Builder. Admittedly the important part of isLayoutMarginsRelativeArrangement is still relevant. Apple Developer Documentation

9

@minibuildcfx

Yeah - we’re currently putting together an updated set of layout videos to include the changes introduced in Xcode 8. The update will include the information presented in this stack view series.

I’m not sure of the schedule, so I can’t be any more specific than that I’m afraid.

sam

1 Like