How to add/modify UIView autolayout constraints

How to enable/disable Autolayout Option:

• Select the nib file or any view.
• Select the file inspector on left.
• Drag down to “Interface Builder Document”

Note:

• You should minimize the number of constraints for best solution.
• If you change position of view by dragging, you will lose all your modified constraint.

Constraints:

• Width
• Height
• Leading space to superview
• Trailing space to superview
• Top space to superview
• Bottom space to superview
• Horizontally center in container
• Vertically center in container

Creating a constraint

• Make sure autolayout option is enabled in file inspector.
• Select view to add constraint.
• In canvas area, at right bottom, there are 3 buttons.
• To toggle between 3.5” and 4” iphone
• Auto layout option.
• Zoom-in-out canvas option

• Click on a or b to add a constraint.
• You will have to change to Attribute Inspector if you have not selected.
• This will create a equal to constraint for your view.

Editing a constraint

• Select view whose constraint you want to edit.
• Select size inspector on right.
• At bottom, you will find Constraints column.
• Click on settings button of the constraint and select “Select and Edit”.

I explain their usage through these examples:

To increase width in proportion to superview on rotation while keep at center

• Select width constraint of view to superview.
• Change Relation from Equal to Greater Than or Equal.
• Select Trailing space constraint of view.
• Change Trailing space from Equal to Less Than or Equal.
• Select Leading space constraint of view to superview.
• Change Leading space from Equal to Less Than or Equal.

To increase height in proportion to superview on rotation

• Select height constraint of view to superview.
• Change Relation from Equal to Greater Than or Equal.
• Select Top space constraint of view.
• Change Top space from Equal to Less Than or Equal.
• Select Bottom space constraint of view to superview.
• Change Bottom space from Equal to Less Than or Equal.

Fix banner at top middle with no change in width on rotation

• Set horizontal center in container.
• Set Top space Equal to 0(or as required)
• Set width Equal to
• Set height Equal to

Check out more from Vishun

Check out this iphone app on itunes

Test your web-services directly on iphone
https://itunes.apple.com/in/app/ihttp/id604110931?mt=8