Auto Layouts Tutorial in iOS 9 Part 2

From this tutorial you can learn how to make UI for all the apple mobile device (i.e, iPhone4s,iPhone5,iPhone6,iPhone6P). It is something difficult to manage frames of view's and subview's  frames so that iOS has great feature autolayouts to handle universal UI.

In the last autolayouts tutorial, we have only one view which is fits for all mobile devices. But this tutorial is little extend to that.

NOTE: Before going to in detailed tutorial, You might know about how to set the frame of view.

view.frame = CGRectMake(x,y,w,h);

origin ->(x,y)

size ->(w,h)

So let's create a demo application which displays list of books info in a UITableView.

Once you create demo application open the Main.storyboard then click on inspector element and define the size as Inferred. After that drag and drop UITableView on to the ViewController's main view. You can seen in the below screen shot.

Define frame of the UITableView

tableView.frame = CGRectMake(0,0,600,600);

Give the constraints to the tableView, as tableView is completely spread to viewcontroller's view so click on pin apply the top,trailing,leading and bottom constraints to the tableview with respect to viewcontroller's view. As like in the image shown

Drag and drop a UITableViewCell on your tableview and also place the subviews on TableviewCell which is custom cell named BookInfoCell.

Subview of Cell are one UIImageView which display book cover image, two labels which display name and author of the book and finally a simple button. Arrange the all view accordingly.

coverImageView.frame = CGRectMake(8,5,83,128);

nameLabel.frame = CGRectMake(109,16,465,21);

authorLabel.frame = CGRectMake(109,58,474,21);

addToBasketButton.frame = CGRectMake(451,94,134,39);

Be sure about view frames with respect to neighbour views.

Let's start giving autolayout constraints to each view.

1)coverImageView: Select the imageview and then click on pin apply the top,trailing,bottom and also if you can see there will be a width radium so enable it and click on Add 4 Constraints.

2)nameLabel: Constraints for this will be applied with respect to neighbourhood imageview. As it's frame of x position is dependent to the imageview width. So let's select the nameLabel from element navigation then click on pin apply the leading space to coverImageView and top,trailing space with respect to cell conetentView.

3)authorLabel: This will be dependent on coverImageView, nameLabel as it's frame of x is with respect to coverImageView and y is with respect to nameLabel. So let's select the authorLabel the click on pin, apply the leading space to coverImageView, vertical space to nameLabel and trailing space to cell contentView.

4)addToBasketButton: The button will be placed towards to right side of the TableView cell's contentView so select the button and then click on pin apply the trailing,bottom and fix the width and height as you can in the screen.

Preview the given constraints for all the views. To preview click on assistant editor then click on preview after that you can choose what ever the mobile screen you want to test the UI by clicking on +.

Viewing Constraints in the Canvas

The editor displays all the constraints affecting the currently selected view as colored lines on the canvas. The shape, stroke type, and line color can tell you a lot about the current state of the constraint.

I-bars (lines with T-shaped end-caps). I-bars show the size of a space. This space can be either the distance between two items, or the height or width of an item.

Plain lines (straight lines with no end-caps). Plain lines show where edges align. For example, Interface Builder uses simple lines when aligning the leading edge of two or more views. These lines can also be used to connect items that have a 0-point space between them.

Solid Lines. Solid lines represent required constraints (priority = 1000).

Dashed Lines. Dashed lines represent optional constraints (priority < 1000).

Red Lines. One of the items affected by this constraint has an error. Either the item has an ambiguous layout, or its layout is not satisfiable. For more information, see the issues navigator or the disclosure arrow in Interface Builder’s outline view.

Orange Lines. Orange lines indicate that the frame of one of the items affected by this constraint is not in the correct position based on the current set of constraints. Interface builder also shows the calculated position for the frame as a dashed outline. You can move the item to its calculated position using the Resolve Auto Layout Issues tool > Update Frames command.

Blue Lines. The items affected by the constraint have a nonambiguous, satisfiable layout, and the item’s frame is in the correct position as calculated by the Auto Layout engine.

Equal Badges. Interface Builder shows constraints that give two items an equal width or an equal height as a separate bar for each item. Both bars are tagged with a blue badge containing an equal (=) sign inside.

Greater-than-or-equal and less-than-or-equal badges. Interface Builder marks all constraints representing greater-than-or-equal-to and less-than-or-equal-to relationships with a small blue badge with a >= or <= symbol inside.

Rules of Thumb

The following guidelines will help you succeed with Auto Layout. There are undoubtedly a number of legitimate exceptions for each of these rules. However, if you decide to veer from them, pause and carefully consider your approach before proceeding.

• Never specify a view’s geometry using its frame, bounds, or center properties.
• Use stack views wherever possible
• Stack views manage the layout of their content, greatly simplifying the constraint logic needed for the rest of the layout. Resort to custom constraints only when a stack view doesn’t provide the behaviour you need.
• Create constraints between a view and its nearest neighbour.
• If you have two buttons next to each other, constrain the leading edge of the second button to the trailing edge of the first. The second button generally should not have a constraint that reaches across the first button to the view’s edge.
• Avoid giving views a fixed height or width.The whole point of Auto Layout is to dynamically respond to changes. Setting a fixed size removes the view’s ability to adapt. However, you may want to set a minimum or maximum size for the view.If you are having trouble setting constraints, try using the Pin and Align tools. Although these tools can be somewhat slower than Control-dragging, they do let you verify the exact values and items involved before creating the constraint. This extra sanity check can be helpful, especially when you are first starting out.
• Be careful when automatically updating an item’s frame. If the item does not have enough constraints to fully specify its size and position, the update’s behaviour is undefined. Views often disappear either because their height or width gets set to zero or because they are accidentally positioned off screen.
• Make sure all the views in your layout have meaningful names. This makes it much easier to identify your views when using the tools.The system automatically names labels and buttons based on their text or title. For other views, you may need to set an Xcode specific label in the Identity inspector (or by double-clicking and editing the view’s name in the document outline).
• In iOS, always use leading and trailing constraints instead of right and left.You can always adjust how the view interprets its leading and trailing edges using its semanticContentAttribute property.
• In iOS, when constraining an item to the edge of the view controller’s root view, use the following constraints:

1. Horizontal constraints. For most controls, use a zero-point constraint to the layout margins. The system automatically provides the correct spacing based on what the device is and how the app presents the view controller.For text objects that fill the root view from margin to margin, use the readable content guides instead of the layout margins.For items that need to fill the root view from edge to edge (for example, background images), use the view’s leading and trailing edges.
2. Vertical constraints. If the view extends under the bars, use the top and bottom margins. This is particularly common for scroll views, allowing the content to scroll under the bars. Note, however, that you may need to modify the scroll view’s contentInset and scrollIndicatorInsets properties to correctly set the content’s initial position.If the view does not extend under the bars, constrain the view to the top and bottom layout guides instead.

• When programmatically instantiating views, be sure to set their translatesAutoresizingMaskIntoConstraints property to NO. By default, the system automatically creates a set of constraints based on the view’s frame and its autoresizing mask. When you add your own constraints, they inevitably conflict with the autogenerated constraints. This creates an unsatisfiable layout.
• Be aware that OS X and iOS calculate their layouts differently.

In OS X, Auto Layout can modify both the contents of a window and the window’s size.

In iOS, the system provides the size and layout of the scene. Auto Layout can modify only the contents of the scene.

These differences seem relatively minor, but they can have a profound impact on how you design your layout, especially on how you use priorities.

Click here for demo project.

To know more from apple documentation.