This workshop will be retired on May 31, 2020.
Simple Stack Views: Interface Builder5:35 with Pasan Premaratne
In this recipe we're going to create a simple stack view containing three nested views using Interface Builder
In this recipe, we're going to lay out an image, a label, and 0:00 a button vertically onscreen using a stack view. 0:04 This is a fairly simple layout that is achievable without stack views. 0:08 But getting a handle on stack views should allow you to build more complex layouts 0:12 in the future. 0:16 I have an empty Xcode project here, and instead of working in 0:18 main.storyboard let's add a new story board file to this project, and 0:22 we'll name it SimpleStackViews. 0:27 So in here we're going to add a view controller scene, and 0:34 we'll set this as the initial view controller. 0:38 For this recipe we're going to need an image to work with, and 0:42 you can grab anything from flicker. 0:45 They have a handy search that let's you specify the orientation of a picture, and 0:47 the licence applied to the image. 0:52 So I've selected a portrait picture that is allowed for commercial use for example. 0:54 And once you have an image, any image will do, download the appropriate size and 0:59 drag it over and add it to the assets catalogue in Xcode. 1:03 Now back in our scene, let's grab an image view from the object library. 1:07 And we're going to resize it to fit most of the space in portrait mode. 1:13 Next, we're going to go to the attributes inspector, and 1:22 we'll select that image that we added from the drop-down, and 1:25 for the Content Mode, we'll set it to Aspect Fit. 1:29 After that, let's add a label below the image, and 1:34 we'll change this text to something that describes the picture. 1:39 So here I'll say mountains. 1:43 And finally, below that we'll throw in a button and we'll change this 1:47 text to whatever, it doesn't matter, I'll set it to Like, this is a like button. 1:53 Okay, next we're going to select all three views, and you can hold shift and 1:58 just drag around it, or select each one individually. 2:02 And then we're going to click on the Embed in stack button 2:06 in the auto layout sub menus, so second button from the right. 2:09 Xcode is smart enough to figure out that since our buttons and 2:14 label and image were arranged vertically, we want a vertical stag view. 2:18 But as you can see when you do that, the layout isn't quite resolved. 2:22 With static views, well, we don't have to add constraints 2:26 to the subviews within the static view, so the views contained with the static view, 2:30 we do have to define constraints that position and size the static view itself. 2:34 Once the static view has a size, 2:39 it can use this information to size its arrange subviews. 2:40 So from the document outline so like the stack view, and 2:44 from the pin menu pin it on all four sides with 8 ppoint spacing. 2:48 Ops, not 88 just 8. 2:54 Okay, now the layout fix the screen there's no vertical spacing 2:57 between the sub views. 3:02 And it seems like this but it isn't obvious there isn't, 3:04 and you can see that the layout isn't quite resolved just yet, 3:07 we still have an issue here and the views are outlined in red. 3:10 Spacing between the arranged subviews in a stack view is handled by 3:14 the spacing property. 3:18 So, select the stack view and in the attributes, this is right here, spacing. 3:19 If we keep increasing the spacing value, you'll notice that as expected the spacing 3:24 does increase between the views, but it does so simply by pushing the views out. 3:30 This pushes the image up and 3:35 out of the stack view's bounds, essentially breaking our way out. 3:37 And you can see some red bars all over the place when you select this. 3:40 Now the reason all of this is happening, 3:44 Is because the stack view is respecting the content hugging and 3:47 content compression resistance values of the arranged solved views. 3:50 And rather than shrinking the solve views to add space between them, 3:54 because primarily our image is large here and it needs to fit the space. 3:58 But rather than shrinking it and adding space between theme after, 4:02 that it's breaking the layout. 4:05 To fix this, we need to indicate that we're okay with the stack view resizing 4:08 the image, so that everything fits. 4:12 And we'll do this by lowering the content hugging, and 4:15 content compression resistance priority values on the image view. 4:18 So, select the image view, and then go to the size inspector, and 4:22 then go all the way down. 4:26 So we have the content hugging priority and 4:28 content compression resistance priority values, and we're gonna drop both of them. 4:31 But we're only going to do this in the vertical axis since we have no issues 4:35 horizontally. 4:38 So here we'll set this to 250, and we'll set this to 749. 4:40 Once we do that, the layout is immediately resolved. 4:46 And now we can go back and set the spacing value on the stack view 4:48 to whatever we want, so we'll do something like 32. 4:51 It's important to note the advantage the stack view offers here, 4:54 even with such a simple layout. 4:58 Had we attempted this without stack views, achieving the equal spacing between 5:00 all the views would've necessitated either a space of views or layout guides. 5:04 Moreover, tweaking the amount of spacing would have meant modifying several 5:09 constraints, whereas with stack views, all we have to do is tweak a single value. 5:12 The stack view currently has a distribution value of fill 5:17 with an alignment of center. 5:20 Modifying this to have, for example, 5:22 a fill proportionately distribution, is pretty trivial. 5:24 If you're interested in implementing this recipe in code, check the note section for 5:28 a link to the relevant video. 5:32
You need to sign up for Treehouse in order to download course files.Sign up