Adaptive Layout comes in iOS8, an exciting feature for designing interfaces for iOS developers . It reduces the complexity and overhead to design interfaces separately for iPhones different sizes and iPads . It includes Auto Layout , Size Classes , Adaptive Font etc.
Size classes gives different sizes and screen for multiple devices . There are two types of sizes . Compact Size and Regular Size . The compact width and regular height defines the portrait mode for all iPhone devices and Regular Width and Regular Sizes for all iPads. .
The adaptive design is fully controlled by constraints. Constraints handle the relative position ,sizes according to the way how constraints are defined with views .
Here , I skip the theoretical background and going to XCode 6.1 and create a project named MyAdaptiveLayout.
1. Storyboard Configuration
We can see the AnyAny at the below of ViewController . By clicking this we can set the ViewController look to which we start to design the interface . This gives the full idea of Compact Size and Regular Sizes for all iPhone devices and iPads .
We take the Any Any Size . That means the default look for all devices .
Then we take 8 views with same size that look like this ,
At the right hand sight of the figure we see the preview of different devices .
2. Our task is to bring the same look at the reference view.
At first, we will ensure the size of the views always same ,
So set the width equal for all views selecting all 8 views and go to Editor->PIn->Widths Equally,
After setting equal width we get the look at XCode,
we see that the views are not shown in previews of all devices.
We must remeber !, when we set a constraint , we have to set all other constraints so that every view has a position , size, everything that can be found in a logical way.
The position can be fixed up by setting the values for
1. Top Space to Superview or other reference view
2. Bottom Space to Superview or other reference view
4. Leading Space to Superview or other reference view
4. Trialling Space to Superview or other reference view
5. Horizontal Spacing or other reference view
6. Vertical Spacing or other reference view
7. Width in fixed or relative mode
8. Height fixed or relative mode etc.
Ok! We remove that constraint named equal size and get back to the original look.
Now , We say the position of the most top-left views by adding two constraints Leading Space to SuperView and Top Space to SuperView .
The result is
We lost the view’s size relative to other views. So we set the size , by adding width and height constraints . In similar way , we set the position and sizes for other three views Top-Left, Bottom-Left, Bottom- Right . And we get the results ,
We see only this four views are right position in iPad Preview. And there are many chages for all theses devices. Now we set the horizontal spacing, vertical spacing between views .If we set the horizontal Spacing between Top Two views ,
We see in the iPad view the right view of Top lost its position from the right side. Why? Because , the horizontal spacing for Leading and Trailing for that view are same priority . This ambiguity can be handled by setting priority for different constrains .
So we change the priority for leading horizontal space from 1000 to 700
Then get our desired look. We do not consider what happens for other devices because in preview we don’t identify the views position.
So our next work to see what happens for iPhone devices ,
We say the sizes for top two views the sizes are 249px width and 199px height . That means (249+ 249)+ other spacing is greater that any screen width for iPhone6 plus(414px), iPhone6(375px),iPhone5,4(320px). So we have to fix the weight of these views.
We change the value for width 50 and add a relation that the width always be equal or greater than 50 , This give the auto resizing ability if needs with respect to screen width of different devices in both portrait and landscape mode.
We do the similar task for the right side view and get the result.
Now we see the both two view on the top but there size is different . What happens? Here, We only say, Their width must be equal of greater than 50 . Its not enough to ensure the desired size for a view. So, we say that the width of both views are equal , Then we get the look,
Now the two views are same size, For a better look we set the leading space for top- left View and trailing space for right view to 10px,
The result is ,
Now it looks better ! Our next step to do the similar work for two bottom views.
We get the desired result till now . Now we have to work with four middle views.
We set the Leading space for left- middle two views to 10 and Trailing Space for Right Side middle two views to 10. We also set the horizontal spacing to 10 for every pair of view to 10 with priority 700.
These four views are disappeared ! Because we don’t set the top and bottom spacing , we set the value for top and bottom spacing to less or equal 10;
So, We can control the height and width by saying the all 8 views height and weight equal, we get the views
Wow! , we get the desired output ! But what happens for landscape mode?
For landscape mode , we see that ,
Oops! for only iPad the preview is considerable . What is missing!
We don’t say the height for all eight views when it is a iPhone4 or iPhone5 . We just set a default value of height at the first time for four outside views, and the value is 118.
So now we change the value of all heights and weights to equal or greater than 20 four both four views.
Finally we get the same look for all iPhones and iPad in landscape mode.
Interface design with Adaptive layout and Size Classes is an interesting approach for iOS developers . Here , we always clear about what happens , if we set a constraint for all devices in both portrait and landscape mode. So relation between views with their constraints is very important for Adaptive Layout Design.
Now, Start your app with Adaptive Layout .