This means that the image view’s vertical compression resistance must be very low, so the image view shrinks instead of having the stack view expand. However, stack views only loosely hug their content. The image view should shrink so that it is the same height as the stack containing the name rows. Interface Builder already sets the content hugging at 251, making it higher than the text fields however, you still need to lower both the horizontal content hugging and the horizontal compression resistance of the text fields. The default CHCR priorities work well for the labels. Horizontally, the labels should appear at their intrinsic content size, while the text fields resize to fill any extra space. Therefore, the text view’s vertical content hugging must be lower than any other vertical content hugging priority. Vertically, you want the text view to expand to fill the space between the upper stack and the button stack. These define how the views shrink and grow as the superclass’s bounds change. Like the simple stack view, you must also modify some of the CHCR priorities. Instead, you must explicitly add equal width constraints. Unfortunately, they are all in separate stack views, so the stacks cannot manage this. So, a View.Width = View.Height constraint may appear as a 1:1 aspect ratio.Īdditionally, all the text fields should be the same width. Typically, for aspect ratio constraints, it shows them as a ratio. Interface Builder can also show the multiplier for constraints in a number of ways. In Interface Builder, an aspect ratio constraint is simply a constraint between a view’s height and its width. In the Attribute inspector, set the following attributes: These define how the stack lays out its contents. Root Stack View.Top = Top Layout Guide.Bottom + 20.0īottom Layout Guide.Top = Root Stack View.Bottom + 20.0įirst Name Text Field.Width = Middle Name Text Field.Widthįirst Name Text Field.Width = Last Name Text Field.WidthĮach stack has its own set of attributes. Root Stack View.Trailing = Superview.TrailingMargin Root Stack View.Leading = Superview.LeadingMargin Continue to build the interface as shown. Next, position these rows horizontally, select them, and click the Editor > Embed In > Stack View menu item again. This creates a horizontal stack view for the row. Position the label and text field in their correct relative positions, select them both, and then click the Editor > Embed In > Stack View menu item. Begin by laying out the name rows in Interface Builder. When working with nested stack views, it is easiest to work from the inside out. Instead, additional constraints are needed to further refine the layout.Īfter the view hierarchy is built, add the constraints shown in the next section, Views and Constraints. However, in this example, the stack views cannot create the wanted behaviors alone. This recipe shows a complex layout built from multiple layers of nested stack views. This lets the stack view arbitrarily resize the image view without distorting the image.įor more information on pinning a view to fill its superview, see Attributes and Adaptive Single View. This setting forces the image view to resize the image so that it fits within the image view’s bounds, while maintaining the image’s aspect ratio. Therefore, its vertical content hugging and compression resistance priorities must be lower than the label and button’s default priorities.įinally, set the image view’s mode to Aspect Fit. The image view should always shrink and grow to fill the available space. Vertically, the views are stretched based on their CHCR priorities. Horizontally, each view is stretched to match the stack view’s width. The arranged views are resized to fill the stack view’s bounds. In this recipe, the stack view fills its superview, with a small, standard margin. You must pin the stack view to the superview, but otherwise, the stack view manages the entire layout without any other explicit constraints. In the Attributes inspector, set the following stack view attributes: Stack View.Top = Top Layout Guide.Bottom + Standardīottom Layout Guide.Top = Stack View.Bottom + Standard Stack View.Trailing = Superview.TrailingMargin Stack View.Leading = Superview.LeadingMargin In Interface Builder, start by dragging out a vertical stack view, and add the flowers label, image view, and edit button. This recipe uses a single, vertical stack view to lay out a label, image view, and button.
To view the source code for these recipes, see the Auto Layout Cookbook project. You can augment these settings with additional, custom constraints however, this increases the layout’s complexity. Their attributes allow a high degree of control over how they lay out their arranged views. Stack views are a powerful tool for quickly and easily designing your user interfaces. The following recipes show how you can use stack views to create layouts of increasing complexity.