A tech author’s work is never done. As soon as he or she completes manuscript and gets it published, the manuscript almost immediately becomes obsolete. In my case, Practical Autolayout for Xcode 8 went obsolete a day before I published, but I had no idea about a major change in Xcode 8.1.
Until Xcode 8.1, if you wanted to update a frame with new constraints, you had two possibilities. The first was in the pin and align menu to update as you were setting the constraints.
The second was a selection in the resolver
It seems everyone, including me was not ready for a change Apple made in Xcode 8.1. If you go to look for Update Frames in the resolver , it is missing:
So where did it go?
Apple moved this to an icon on the auto layout toolbar and deleted it from the menus.
If it were me, I wouldn’t have deleted it from the menus in such an abrupt way. Apple did. This Update Frame button has some different behaviors from its predecessor on the menu, and I’d like to explain that using some examples from Chapter 3 of Practical Autolayout for Xcode 8
Set up a storyboard that looks something like this with a label Hello Pizza, a text view, and three buttons, Pepperoni, Cheese, and Done:
Select the Hello Pizza label. Click the pin button in the auto layout toolbar. In the popup, set the top to 0 points, the left to 0 points and the left to 0 points. Leave Update Frames as None
Add the 3 constraints. The Hello Pizza Label will show misplacement constraints.
Press the Update Frames button and the frame updates.
This is not always the result. You must have all constraints satisfied before the button will update frames. For example, select the text view. Press the align button and center the text view by checking on Horizontally in Container and Vertically in Container.
Again don’t update frames, but click Add 2 constraints. You’ll see an ambiguous constraint in red.
If you click the button nothing happens. Until a frame has no ambiguity(i.e. no red constraint errors), you cannot update it. Most often that is setting a size. For the text box, set an absolute size in the pin menu of 175 points in both directions.
Add the constraints. The errors all turn to misplacements.
Once all misplacements, you can update the frame with .
Priorities are not assumed with the new update frames button. When there is an ambiguity in size between two frames that depend on each other for size, you must specify the a priority for them or set a size. Take for example these two buttons.
Pepperoni is pinned to the left margin, the label above it and the text view below it. Cheese is pinned 10 points from Pepperoni, aligned to the top of Pepperoni, and pinned 10 points from the right margin. We’d like to have two buttons that fill the available space.
The option used in Practical Auto Layout for these buttons is to make them the same size. Control drag from Pepperoni to Cheese. A menu appears.
Shift select Equal Width and Equal Heights, then hit the Add Constraints selection. The ambiguity changes to misplacements.
Select both the Pepperoni and Cheese buttons. Hit the Update Frame button and two equally sized buttons appear
The other, more advanced option is to change priority of one of the buttons so they are not equal. Both are by default 250. Going back to the original ambiguous layout,
changing the content hugging priority of Pepperoni from 250 to 251 tells auto layout for Pepperoni to keep its size and Cheese to stretch to make up the difference.
In our last post we found that the list box was a waste of time for its task, unless you want one-word selections. We hacked our way around it for the meantime, using the underscore character. We left off needing a scroll bar to scroll through our survey results. There was also a bug in the layout. The window looked like this:
The combo boxes with the type and action are on the bottom of the window. Our code reads:
In line one, we set the orientation to vertical on our scroll bar. In line two we set the bar to a north-south stickiness. Always remember to make a scroll bar sticky in the proper direction. If you don’t, it will collapse itself into a little ball and won’t work. Save and run, and you see nothing new.
It turns out we have redundant code causing problems:
In line 1 the code defines the Listbox attribute width as 40 characters wide. In line 2, the columnspan attribute extends the column to four columns wide. This extends the list box over several columns, including the one with the scroll bar. We set the width when we instantiated the list box. We only need one column. Remove the spans:
The grid() method has a simple way of sizing the gird. It finds the biggest vertical and horizontal dimension for the row and column, and sets it to those values. That, and some bad layout is messing us up. Remove the columnspan on the label.
Save and run. Add Oswald Cobblepot Plotting Evil, which is the longest phrase we have:
Let’s take note of our layout problems.
The quit button moves over the accommodate the extra size.
The Add button centers itself with the list box
The Combo Boxes spread out too much
Getting to the first combo box, we can accidentally press Add instead
The two buttons and the two combo boxes would work better in a frame the width of the listbox, then organized in a grid within that frame. Add this code just under def loadView():
The frame button frame is a 2×2 grid, and with everything sticky, lines up perfectly. — almost. The scroll bar is out in its own column. Let’s make another frame and place the list box and scroll bar inside of it.