IOS 8 AutoLayout with size class self-awareness

The storyboard can be adapted for all sizes of screens (iphone and ipad), which discards the traditional meaning of the so-called specific wide height, the width and height of the screen are divided into two cases: compact-compact, normal-regular (any-arbitrary, In fact, this is the 2 combinations, so there is no 3 kinds of situations). So there are 9 kinds.

W:any H:any is the default choice when we first set up the project, which is the parent of all descriptions. Other kinds of descriptions are based on this change, such as: if weight is set to any,height regular, Then the interface element in this state will exist in the state of the regular, whether weight is regular or compact, as long as the height is the same.

2. Look at a set of data and a picture (given by a blogger abroad, very image):

Iphone4s,iphone5/5s,iphone6

Vertical screen: (w:compact h:regular)

Horizontal screen: (W:compact h:compact)

IPhone6 Plus

Vertical screen: (w:compact h:regular)

Horizontal screen: (W:regular h:compact)

Ipad

Vertical screen: (W:regular h:regular)

Horizontal screen: (W:regular h:regular)

3. Can be summed up as:

• If the item does not support horizontal display, use W:compact h:regular (or simply cancel using size Class)

• If the project supports horizontal screen display, use W:compact h:regular+w:any h:compact

• For some public constraints (applicable in any combination), they are generally set in the W:any H:any

• ipad in the same vein

So, I think the biggest help with size class is to solve the cross-screen adaptation and share a design board with the iphone ipad ... (Personal opinion)

Test Feedback One

1. First, set up a project to start the following page

PS: This is a new feature of iOS8, really used in the project need to abandon compatible iOS7 ... Obviously, it's not going to work right now.

2. In any case, place a label and set the constraint on-left-bottom-right is 0-0-20-0

3. In the compact any case, place a label and set the constraint to 20

4. Continue in the compact any case to see changes in the horizontal screen state

5. Finally switch to regular any to complete the 6 Plus horizontal screen display

Test Feedback Two

Test one inside, verify the concept of the various screens applicable to the combination, next, is a size Class to solve the magical use of horizontal screen

PS: Used in, horizontal screen adaptation, re-typesetting the vertical screen when the UI layout

In addition to changing the constraints under different combinations, you can change whether the controls are displayed under different combinations

Test Feedback Three

AutoLayout here does not give specific how to set up, because do not know how to write, feel or everyone to write more, to try, the most effective

A plot of the AutoLayout setting is given below

Simple answer test demo result diagram:

If you do not cross-screen, you can also directly cancel the size Classes (picture not the same, different time written ...) 囧

Final Demo

Demo's github address: Https://github.com/ConanMTHu/Size-Classes-Demo/tree/master

Summarize

It is not responsible to say that you should use storyboard+autolayout in the future, but it is necessary to think deeply about AutoLayout.

It is helpful to use AutoLayout in the following situations:

• When you need to show a lot of content and the size is not fixed;

• The program needs to support screen rotation (mainly the ipad program, the iphone app landscape is a bit non-mainstream, also do not exclude.) Hand-tour:);

• The program is common to the iphone and ipad (most importantly).

But storyboard use AutoLayout pros and cons, the benefits of course is visualization, the realization of simple functions is time-saving, but there are drawbacks, such as accidentally moving a control will confuse those constraints or controls more than a custom xxxxxxxx

IOS 8 AutoLayout with size class self-awareness