This workshop will be retired on May 31, 2020.
VFL Options3:57 with Pasan Premaratne
We've been ignoring the options argument when defining a format string so far. In this video let's take a brief look at the different values we can pass in and conclude with a summary.
We created several format strings in the last two videos but 0:00 we always parsed in an empty set for the options argument. 0:03 So what does options do? 0:07 The options parameter specifies alignment and it does so 0:10 in a manner perpendicular to the current layout orientation being defined. 0:13 So if you've already taken the content about stack views and how 0:18 access alignment and distribution works in stack views, this is somewhat the same. 0:21 For example, when setting horizontal constraints, we can specify alignment 0:27 along vertical axis by specifying a value of align all center y. 0:31 So there are two kinds of options that we can specify to take a step back. 0:37 Alignment masks and formatting directions. 0:41 You can select more than one alignment mask when setting options but 0:44 only one direction mask. 0:48 So alignment mask are things like AlignAllLeft, AlignAllRight, Leading, 0:50 Trailing, and CenterX. 0:54 So if you're laying out something in the vertical axis, 0:56 let's say you're giving a view a height but you want it to be aligned or 0:59 vertically centered, you would pass in AlignAllCenterY. 1:04 There's also AlignAllTop, AllBottom, and so on. 1:09 Now, we can split these up into two groups here. 1:12 So first up are those that are added to vertical constraints, and 1:15 then the bottom is stuff that you add to horizontal constraints. 1:19 Another example is if two views are spaced ten points apart vertically, 1:22 we can use the AlignAllLeft mask to specify that they'll 1:26 be aligned along their leading edges. 1:29 The direction masks are a bit more straight forward. 1:32 By default, visual format masks are applied left to right, 1:35 we can specify that it goes from right to left instead. 1:38 But really we're now going to focus on this because as I mentioned 1:42 several times already, we won't be using visual format strings. 1:46 And that's really all we need to know. 1:50 So to summarize and end this discussion, let's talk about pros and cons. 1:52 So pro, using format strings, 1:56 we can add multiple constraints in a single line of code. 1:58 While there are some limitations, getting views up on screen is a lot less work than 2:02 even layout anchors at some times. 2:07 A con, when using a visual format string, 2:09 we can't specify a value for the multiplier in a constrained equation. 2:12 For the most part this doesn't matter. 2:18 But if you ever wanted to do a proportional with relationship, 2:19 you'll have to result to either defining the constraint before hand and 2:23 doing that logic before passing it in, or 2:26 using some of the other auto layout options that we've looked at. 2:29 Another con is that when layouts break, or 2:33 when we have ambiguous layouts, it's really quite hard to debug things. 2:36 Visual format strings create many constraints from a single string. 2:40 And while this is an advantage it also makes it hard to 2:44 understand what little mistakes we might be making along the way. 2:47 Most of all though, and you saw I ran into this, 2:51 it's stringly typed code which is always prone to errors. 2:54 Simple things like typos can break your layouts. 2:57 As we saw earlier, layout anchors have some compile time support 3:00 which reduces errors and uses a fluent API so there's no reliance on strings. 3:05 The Apple Docs actually used to list visual format language 3:10 as the preferred way for laying out constraints. 3:13 But with layout anchors and even stat views now, that's no longer the case. 3:16 This was mostly just an exercise to understand what 3:20 the visual format language is. 3:23 So you shouldn't really invest much time into using it as your primary layout 3:25 API in code. 3:29 But hopefully, this shows you one way of doing it and 3:30 also highlights something cool, building up a layout using a string. 3:33 We didn't cover the entirety of the topic though. 3:38 Using the visual format language you can also define greater than or 3:40 less than relationships, specify priority values, and so on. 3:43 We didn't go over any of that because all I want you to take away from this is that 3:48 it exists, and give you some sense of how to read this code should you encounter it. 3:51
You need to sign up for Treehouse in order to download course files.Sign up