Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Working with Xcode Auto Layout in Swift and iOS
Auto layout is constraint based layout system used for development of User Interfaces for iOS Devices. This layout based constraint system also known as Auto Layout is basically an adaptive UI which adapts to screens of different sizes and orientations.
Auto layout is completely dependent on constraints where developer defines a relation between neighbouring or parent element to seize it position.
Why Auto Layout?
While designing an iOS application you need to make sure, the UI which you’re developing should be equally compatible with all screen sizes and orientation. Auto layout comes handy when you wish to do so.
Consider below images. A centrally kept button in iPhone 6, does not align centrally to other devices this is due to the fact that different iOS devices has different dimension. In this post we will be focussing on constraint so if you want to read more about dimensions, you can check out http://iosres.com/
To make sure the UI we developed is uniform across all the devices and orientation we’re going to use Auto Layout. So, Let’s get started.
Step 1 − Open Xcode → New Projecr → Single View Application → Let’s name it “AutoLayout”
Step 2 − Open Main.storyboard, add button as show below, for reference select device as iPhone 7Plus.
Here you can see we’ve added one button at random place without any constraint. Our aim is to place this button centre and compatible to all the devices and orientations. Before we go to step 3, Let’s understand what exactly we need to do and how are we going to achieve this.
Xcode provides two ways to define Auto layout constraints → Auto layout bar and Control-drag. Although we will be using Auto Layout bar very often and in this blog too but I will make sure to tell you how to use Control-drag too. In your Xcode at bottom right corner of Interface builder you might see 5 buttons these buttons are knows as Layout buttons used to define the constraints.
So, now we will be using the Auto Layout bar to provide constraints to both the buttons.
The main theory over which complete constraint system works is 4 parameters (leading, trailing, top, and bottom), as well as the height, width, and vertical and horizontal centres.
Step 3 − Click on button and tab on Align, enable Horizontally and Vertically in container as shown below.
After adding both the constraints you can see your button aligned to centre of the screen.
Optionally you can achieve the same through control drag feature also, as shown below, Select UI component, tap on control button and drag to give constraints, Give center Horizontally and vertically.
Step 4 − Now we will define the width and height of the button. Select add new constraint option as show below and add height and width.
Alternatively, you can provide leading constraint, trailing constraint, top margin and bottom margin if you do not wish to provide Horizontally and Vertically to container.
Step 5 − So, We’ve provided all the required constraints, we should always remember the 4 edges, align to X-axis, Align to Y-axis, width and height We need to seize the UI Component.
Now let’s run in different devices and see the results. We will be running in different devices and orientation.
You can even edit the constraints, if you wish to modify or remove the same, in the utility area on the right pane select number 5 option and scroll below as shown in the image.
So this tutorial was intended to give you brief about How to use Auto layout and constraints to develop adaptive UI. You can try with multiple components using the basic concepts above.
2K+ Views
