IOS 8 AutoLayout with size class self-awareness (reprint)

IOS 8 AutoLayout with size class self-awareness

Size Classios 8 AutoLayout

Objective

IOS8 and IPhone6 release has been quite a long time, the vast number of fruit powder finally ushered in the big screen iphone, no longer tangled for the big screen to buy Samsung Apple ... But for iOS developers, there's the same kind of screen adaptation as the Android development and development--whether it's a pay-as-you-go rhythm. For adaptation, the network of all kinds of arguments about size class, the previous period of time too busy, has not studied, apply + total words, Apple's approach to adaptation is Bianca. It's really handy after you've measured it. 0.0 (However, it is still to say that the core of the adaptation is always AutoLayout)

On the concept

IOS8 before the company in the development of the project, first made the iphone version, and then asked to develop the ipad version, in fact, the content is exactly the same, but the UI changes, but we need to build 2 projects to correspond to the implementation. IOS8 the size Class, Allows us to fit all sizes in a project's storyboard, not just the iphone 4s-5/5s-6-6 Plus, but also the ipad interface. It introduces a new concept that discards the so-called specific wide-height dimensions that we fit in the traditional sense, The width and height of the screen are divided into two cases: compact-compact, regular-Normal (any-any, in fact, this is the combination of 2, so I did not divide into 3 cases). Together with the 3*3, that is, regardless of the change, add up also 9 kinds, such as above.

1. How is this compact,any,regular used in practice?

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. So:

W:compact h:compact-(W:any h:compact, W:compact h:any, W:any h:any)

W:regular h:compact-(W:any h:compact, W:regular h:any, W:any h:any)

W:compact h:regular-(W:any h:regular, W:compact h:any, W:any h:any)

W:regular h:regular-(W:any h:regular, W:regular h:any, W:any h:any)

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 (reprint)