

We get a constraint telling us we did this: In the attribute inspector, change the Relation to Less Than or Equal. Select the horizontal constraint between the buttons if not already selected. One way to handle such constraint problems is to change the horizontal constraint between the buttons to an inequality. The thee horizontal constraints have equal priorities of Required, which is a value of 1000. To make everything fit, Auto layout squeezes our first item to fit the screen. Our three constraints add up to 450 points, and the buttons are about 60 points each plus 16 more for the margin for a total size of 586 points. The horizontal space constraint pushes button 2 off the screen. The 410 point constraint alone is wider than the phone. A iPhone 4 inch has a width of 320 points in portrait. We need to be careful here with the difference between points and pixels, since Auto layout works in points. We have pin of 20 points to the right margin on Button 2, and we have a constant space of 410 points between them. on Button 1 we have a pin of 20 points to the left margin. Why is the first item disappearing in portrait and compressing in landscape? We have three constant values. You can now see the order between the first and second item. In the attribute inspector, you will find Click on a button and then click on the horizontal constraint between them. again select a horizontal spacing constraint. Make a horizontal spacing constraint.ĭelete the constraint. The preview looks like this:Ĭontrol drag from Button 1 to Button 2. Pin Button 2 50 up and 20 right and select Items of New Constraints.
#Horizontal compression update#
Pin Button 1 50 up and 20 left and update Items of New Constraints. If not, change the order by dragging Button 1 to the top of the list.

In the document outline, make sure your controls have this order: by pressing the Add button on the bottom of the assistant editor. Change from Auto or Manual to Preview in the assistant editor and add another iPhone 4 inch.

Set up your workspace by closing the navigator on the left, and opening the assistant editor. Make the superview’s background Light Gray. Make the Blue background for Button 1 with White lettering and the Red background for Button 2 with White lettering. Once loaded, go to the storyboard and add two buttons. Make a new project called AutoLayoutPriorities. While many of my tutorials have you making proportional or equal sized buttons with a static amount of space between them, what if you want to control the space between buttons? What if you don’t want a button to re-size? That is what this lesson is about.
#Horizontal compression how to#
If you have worked a bit with auto layout, you may have noticed a few extra settings that you have no idea how to use.
