Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Size Class and Auto Layout

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.16k
    Comment on it

    Size Class is used when we need to have different constraints for different screen sizes or orientations.

    The following table shows how the size classes apply to the different devices and orientations:

      Verticle size Class

    Horizontal Size Class

    Ipad portrait Regular Regular
    Ipad portrait Regular Regular
    Iphone portrait Regular Compact
    Iphone landscape Compact Compact
    Iphone 6 plus landscape Compact Regular


    Here we are making a simple App in which we have taken one label and one view. We want to display these two things in following ways->
    1. I want when my app runs  in portrait mode label should display on the top and view should display at the bottom .
    2.  In landscape mode label should display right and view should display left side of the screen.


    Take one label and a view in your storyboard ,give constraints accordingly.
    Suppose we have given four constraints to view i.e
    1. horizontal in container
    2. vertical in container
    3. width
    4. height

    And 2 constraints to the label i.e
    1. horizontal in container
    2. vertical spacing from the view.

    Now select any one either label or a view and click on Resolve Auto layout Issue (triangle shape option at the bottom) and select update frames,now your label and view will come at exact position.


    You can see any width and any height is showing by default at the bottom of the storyboard.
    Now click on size Inspector option you will see all the constraints there. Now you have decide which constraints you don’t want in landscape mode, as we mentioned earlier in landscape, label should display left and view should display right side of the simulator so remove constraints as follows.

    Select label click on size inspector then double click on vertical spacing constraint. You will get constraint's details of that constraint. At the below you will find one installed option and infrot of that there is one + sign option click on +sign, select any width and compact height and uninstall wAny hC option, make sure installed option is ticked.

    Now select horizontal constraints of the label and repeat the procedure as we did with vertical spacing constraint. uninstall wAny hC option and installed should be ticked.

    Installed option is for portrait mode and wAny hC(any width and compact height) is for landscape mode which we will handle afterwords.

     Now select View and click on size inspector option ,as we don’t want horizontal constraints in landscape mode so select horizontal constraint and double click on it, Click on + sign in front of installed option and repeat the same thing as we did earlier.

    Now go to the size class at the bottom and select the same option as we selected earlier i.e any width and compact height. Your storyboard will display in landscape mode and you will find missing constraints for label and for view. Now our main job is to give constraints to label and a view.

     Select View and give trailing space according to your need, we have given 30.
    select label and give leading space constraint and center vertically to the View,here we have given 30.

    Click on those new constraints which you applied, you will find that wAny hC is  selected for all new constraints. It shows that these constraints are only for landscape mode.

    Now you can run the app.


 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: