Adaptive Layout and Size Classes in iOS8

Adaptive Layout

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 .

Screen Shot 2015-03-13 at 1.50.06 PM

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 ,

Screen Shot 2015-03-13 at 1.44.24 PM

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,

Screen Shot 2015-03-13 at 2.00.52 PM

After setting equal width  we get the  look at XCode,

Screen Shot 2015-03-13 at 2.55.42 PM

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 .

Screen Shot 2015-03-13 at 3.08.20 PM

The result is

Screen Shot 2015-03-13 at 3.11.30 PM

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 ,

Screen Shot 2015-03-13 at 3.17.37 PM

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 ,

Screen Shot 2015-03-13 at 3.22.34 PM

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

Screen Shot 2015-03-13 at 3.27.23 PM

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.

Screen Shot 2015-03-13 at 3.35.59 PM

We do the similar task for the right side view  and get the result.

Screen Shot 2015-03-13 at 3.39.19 PM 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,

Screen Shot 2015-03-13 at 3.45.48 PM

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 ,

Screen Shot 2015-03-13 at 3.48.58 PM

Now it looks better ! Our next step to do the similar work for  two bottom views.

Screen Shot 2015-03-13 at 3.53.19 PM

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.

Screen Shot 2015-03-13 at 4.00.04 PM

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;

Screen Shot 2015-03-13 at 5.11.34 PM

So, We can control the height and width by saying the all 8 views  height and weight equal, we get the views

Screen Shot 2015-03-13 at 5.18.11 PM

Wow! , we get the desired output ! But what happens for landscape mode?

 For landscape mode , we see that ,

Screen Shot 2015-03-13 at 5.19.41 PM

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.

Screen Shot 2015-03-13 at 5.24.06 PM

  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 .

Advertisements

2 Comments Add yours

  1. ashik says:

    oneek cute hoise

    Like

  2. Zico says:

    eeeeee robi, ami kichu fari na 😦

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s