In this blog, we will show you how Auto Layout can be applied in the Interface Builder.
Firstly, set up a new project based on the Single View Application iOS app template. In the project options, select iPhone for the device family, save the project, then open the Storyboard. You will note a menu at the bottom-right corner. The buttons in the menu are connected to Auto Layout. You can utilize for alignment, sizing, spacing and resolving constraint issue.
Align – build alignment constraints, such as aligning the left edges of two views.
Pin – build spacing constraints, such as defining the width of a UI control.
Issues – determine layout issues.
Resizing – States how resizing affects constraints.
Apart from the Auto Layout menu, Apple has made it stretchy for developer to setup Auto Layout by using Control+drag. You easily control-drag from any display to another view to set constraints between each other. When you release the mouse, it shows a list of possible constraints for you to select from.
Once you setup a constraint in an outlook, the constraint line is showed in either in rose or blue. The rose constraint lines specifies that there are inadequate constraints and you want to fix it.
The blue constraint line indicates that your view layout is being setup correctly and there is no uncertainty.
Occasionally after you build the constraint, the Interface Builder outline view displays a disclosure arrow. The red arrow also shows that there are conflicts or ambiguities. tap the disclosure arrow, and you’ll notice a list of the issues. The issues are displayed on a scene-by-scene basis. Characteristic issues comprise missing constraints, conflicting constraints and misplaced views.
In the Size Inspector, you can vision a list of every constraint that have been included. These constraints show in a section called “Constraints”.
In addition to the size inspector vision, the constraints also show in the Interface Builder Outline under the corresponding view.
Example of Autolayout – how to Center a Button or Image
Currently, you should have a fundamental understanding of Auto Layout and how you can configure constraints. Let’s consider the example again and observe how we can center a button or an image.
As previously states, Auto Layout is a constraint-based layout system. It permits developers to build an adaptive interface that responds appropriately to changes in screen size and device orientation. Okay, it sounds good. But what does the term “constraint-based layout” mean? Let me put it in a more expressive manner. Think about the “Press Me” button again, how do you illustrate its position? Probably you’ll describe like this.
The button must be centered both horizontally and vertically, despite of the screen size.
Here you previously define two constraints (centered horizontally and centered vertically). These constraints convey policy for the layout of label in the interface. Auto Layout is all about constraints. The constraints, however, are expressed in mathematical form. For example, if you’re explaining the e position of a button, you may want to say “the left edge should be 30 points from the left edge of its enclosing view.”
At this instant let’s notice how to center an image sight in the middle of the screen regardless of the screen size and orientation (portrait / landscape).
Assuming you’ve included an image view and placed it in the center of the view, the first step is to include the width and height constraints. In this example, we’ll illustrate you how to use Auto Layout menu to apply the constraints. Choose the image view and then tap the Pin icon in the Auto Layout menu. Choose height and width, then click the “Add 2 constraints” button.
You may observe that a red arrow shows in the Interface Builder outline. This describes us that there are some constraint issues with our image view. Xcode can assist us fix them. Simply tap on that red arrow, followed the red indicator and finally hit the “Add missing constraints”.
Now , we have set the size constraints. Next we’ll set another constraint to centre the image view even if the users spin the device to landscape orientation. To do that, choose the image view and tap the Alignment icon in the Auto Layout menu. In the pop-over menu, choose both “Vertical center in container” and “Horizontal center in container” options, followed by selecting the “Add Constraints” button.
Now you’re complete to test your app. Compile and launch the App. Try to knob between portrait and landscape mode. You will observe that the image outlook stays centered.
Here we just show how to use Auto Layout menu to add constraints. You can execute the similar thing by using control-drag. The following image shows how it can be done.
Auto Layout Example – Login Button
Since you know, the exhibit of iPhone 5 and iPhone 4 are of different size. It will require some tweaks to sustain both screen size. Assume the below shown login screen, the login button is placed at the bottom of the view. If you haven’t applied Auto Layout, the app may not be able to show the login button on a 3.5-inch device.
So how can you decide this problem Again, to fix that we want to setup a constraint to make it stay to the bottom of the screen. On top of that, its width should be modified when it’s in the landscape mode.
First we’ll include a size constraint for the height of the button. We only include a constraint for the height as the width will modify depending on the device’s direction. Control-drag vertically the button and selecting “height”, then fix the uncertainty in the Interface Builder summarize by adding all the missing constraints.
To make sure the button maintains the same distance from the sides of the view (whether it’s in portrait or landscape mode), we need to include another constraint. Control-drag from the button to the left side of the superview and choose“leading space to the container”. Follow the same procedure for the right side and then choose “trailing space to the container”.
The last step is to include a constraint such that the button stays to the bottom of the view. Control-drag from the button to the bottom of the superview and choose“bottom space to bottom layout”.
At this instant you can create and run the project on every device. The login button should be shown correctly on 3.5-inch iPhone. And the login button scales amount when the device is rotated.
Leave a Reply