This workshop will be retired on May 31, 2020.
Stack View Alignment3:58 with Pasan Premaratne
Views inside a stack view can be aligned in several ways each with some nuances to it.
We last left off with a functional stack view that displayed our buttons, 0:00 but it doesn't look good, right? 0:05 There's a zero point spacing layout here, and that's not what we want. 0:07 To modify this, let's head over to the Attributes inspector, 0:11 making sure you have the Stack View selected, and not one of its subviews. 0:15 Now, this is easier with the document outline. 0:19 And if you click on it, click on the document outline at the bottom here. 0:22 And look at our view hierarchy, 0:27 you'll see that the buttons are now nested views of the stack view. 0:28 So clicking on the Stack View and going to the Attributes inspector, 0:33 you can see here at the very top, our Stack View attributes that we can modify. 0:36 The first is axis. 0:41 Right now our labels are laid out horizontally, or our buttons rather. 0:43 To change them to be in a vertical column layout with a stack view, this is easy. 0:48 We don't have to delete constraints, 0:51 all we do is select Vertical, and there you go. 0:53 Next is the alignment attribute. 0:56 The alignment property determines how a stack view lays out its 0:59 arranged subviews perpendicularly to the axis. 1:04 Since the current axis is vertical, 1:08 the choices from the drop down affect how the view is aligned in 1:11 the horizontal direction since this is perpendicular to the axis. 1:15 The default value for alignment regardless of the axis is fill. 1:19 Fill makes the arranged subviews take up the entire space. 1:23 And since we're in the vertical axis, 1:28 this means that it stretches across horizontally. 1:29 If you click on the Start button inside of the nested stack views, you'll see 1:32 that it's with, if you can faintly see it here, stretches from end to end. 1:37 Now back to the stack view's alignment property, other values include leading, 1:43 which aligns the leading edge of the arranged views 1:47 along the leading edge of the stack views. 1:51 In a horizontal stack view, since alignment is perpendicular to the axis, 1:54 this means alignment from the top edges 1:58 of the arranged subviews to the top of the stack view. 2:00 Next, we have center. 2:04 The stack view aligns the center of the arranged views 2:06 with the center along the axis. 2:09 So if this is a vertical stack view, 2:11 the stack view aligns the arranged subviews along its horizontal center. 2:13 If it's a horizontal stack view, the views are arranged along the vertical center. 2:18 Now after center, we have trailing and 2:22 this is the opposite of the leading alignment. 2:25 In a vertical stack view, this means the trailing edges of the arranged subviews 2:28 are aligned with the trailing edge of the stack view. 2:32 In a horizontal stack view, since alignment is perpendicular to the axis, 2:35 this means an alignment from the bottom edges of the arranged subviews to 2:39 the bottom of the stack view. 2:43 There are actually two more values, but they depend on the axis of the stack view. 2:45 With a horizontal axis, the stack view has two additional alignment options, 2:50 first baseline and last baseline. 2:56 These two options are only valid in the horizontal axis, 2:58 since the baseline is a horizontal attribute. 3:02 Now back in the Interface Builder, we can change the alignment value to either 3:05 leading, and you can see how it works. 3:09 So it puts the Start button at the leading edge. 3:11 You can do center, which goes back to how we were, and trailing. 3:14 The second label, Suspend Account, or the second button rather, I keep saying label. 3:19 The second button won't change at all and that's because the width of the stack view 3:24 Is the width of this label since it's the largest label. 3:29 The intrinsic size of Suspend Account button, 3:32 that width is what determines the width of the Stack View. 3:35 Center, fill, leading, and trailing all mean the same dimensions for 3:38 the second label. 3:42 But for the first label, it's adjusted to fit these different alignments. 3:43 Note that at fill, the label is stretched to fit the width of the stack view. 3:48 But at any other alignment, that button, the Start button, hugs the content. 3:53
You need to sign up for Treehouse in order to download course files.Sign up