UIStackView: Vertical Axis Portrait, Horizontal Axis Landscape
Do you ever work with a UIStackView and think “Jeez, this vertical stack view looks really good on portrait, but looks like a disaster on landscape. If only I could make it vertical on portrait BUT horizontal on landscape…”
Well, this tutorial is for you! 😁
If you just want to see the trick, skip to part 2! Part 1 only covers how to set things up.
Part 1: Setup
Start with a new project as “Single View Application” and jump straight into your Main.storyboard file.
- Insert a UIImageView anywhere on your View Controller, adding whatever image you want. I chose an image of Plato. Make sure you put whatever image you want to use on the Assets directory of your project so that the image shows up on Image selection!
2. Insert a label below the UIImageView. Set the number of lines to 0 and the Line Break to Word Wrap.
Setting the number of lines to 0 allows for multiline text. The label will take up any number of lines it needs to depending on the amount of text. This is good for dynamic text, if you don’t know how much text is going to be on your label.
Setting the Line Break to Word Wrap allows the text to break line at complete words.
3. Embed your UIImageView and Label into a stack view. There are many ways to do this. I click on the image and the label while holding down Cmd, and press that stack icon at the bottom.
4. Set constraints on your stack view. Select your stack view on document outline, and set horizontal and vertical constraints. I chose to go with: Trailing = 5, Leading = 5, Top Space = 20
5. On your stack view, set Alignment to Fill, and Distribution to Fill Equally.
Setting Alignment to Fill lets each item completely fill the available space perpendicular to the stack view’s axis. Setting Distribution to Fill Equally makes each item in the stack view fill the space along its axis equally. Add some spacing if you want. I added 3.
6. Add some text to your label.
Alright. It’s all set up. 😤
Part 2: Vertical Axis Portrait, Horizontal Axis Landscape
To change the way the stack view is displayed on landscape, we need to implement Trait Variation. Trait Variation is presenting a UI differently based on a device’s configuration. In this case, you want your stack view to look different on varying device orientations (portrait and landscape).
- With your stack view selected on Document Outline, Click on the ‘+’ next to ‘Axis’. Set Width: Any, Height: Compact, Gamut: Any. Click Add Variation. Set the Axis to that added variation to Horizontal.
On the size class for landscape mobile, the stack view will have a regular width and a compact height. The axis will also be horizontal, so that the items in the stack view are displayed horizontally.
As for the gamut, it is not really relevant to the axis. It has to do more with colour and image properties. Setting the Gamut to Any means that the device screen can support a wide range of colours.
More info on gamut:
You can read more about Trait Variations here:
https://developer.apple.com/documentation/uikit/uitraitcollection
That’s it.
Result:
Like Plato said,
Nothing beautiful without struggle.
