Hey everybody,
One year ago I started my first Xcode projects with the help of some tutorials. With some off- and on coding I lately started working with constraints and stack views.
Stack views
Stack views were introduced by Apple at the WWDC 2015. Using stack view and constraints you can pretty much set an auto layout for any apple iDevice you like.
What it does
Stack views stack multiple levels horizontally or vertically. Stack views alone wont help much, you will still need to pin or align the buttons, images or labels.
Before Xcode 7 the only constraints options in the interface builder were the align and the pin buttons. With the help of Stack views you can set complex multi-device layouts.
It may look confusing for a non-developer (at first), but its actually pretty cool.
Example: Retro Calculator App
To get an idea, this is an example of a retro calculator I was developing for an online course by devslopes (https://www.devslopes.com) I was doing.
What I did was the following : stack the rows vertically (e.g. 7,8 and 9) and then stack all those rows horizontally.
Theres some follow up work to do to the whole stack to center it in the app by aligning it. But you see how its centered on each interface. Of course I could have fixed the lost space on the iPad but this example is just to show my point.
Don’t stack multiline labels
Now in my example above you see a simple label with just 1 line. You can easily stack it, it wont cause any problems.
But later I was working on a multiline label for an exercise on stack views and I tried to stack it horizontally to my other stacks. Here is a screen of an example app with some buttons and a multi line label before stacking it :
Heres the same screen after stacking it:
You see what problem I was running into. I was getting a headache, I’ve tried setting the lines to 0 or more lines, tried every value that made sense to me, it didn’t help with a stack view. After putting a stack view on it the width got changed to over 1600, which (at least to me) did not make sense.
I was checking stackoverflow to see if any Developer ran into the same problem that I did, and had found this.
The most voted up solution was setting a fixed width to the stack view. I kept thinking that this is not what Apple intended. And it was not.
Solution
It is quite simple and I guess its just a bug.
- Just set a placeholder word in the label (you can use more than 1 word, just dont use a complete sentence so it would end up in a multi line label at this time)
- stack the label
- exchange the word(s) with the multiline text you intented to use
After doing those steps I was able to stack the views as the tutorial told me to do.
I have not played around with Xcode 8 beta yet, and I am still not 100% sure this is really a bug or somehow intended by Apple, but at least I am not running into this problem anymore and to be honest, trying to fix this problem helped me a lot to understand stack views and constraints in general.
Regards,
Jan