Use of IOS 8 Sizeclass with auto layout

In the growing number of apple rings, even if the mobile phone application alone, in the screen size judgment is no longer an if can solve the problem. Apple's new Sizeclass on IOS8 is a feature that matches the previous AutoLayout use and perfectly solves the problem of screen adaptation.
Sizeclass the width and height of the screen into three situations: compact, arbitrary (any), normal (Regular), 22 combined, 9 categories, so Sizeclass looks like a nine sudoku that can switch screens at random, setting Size Class, the page prompts the current interface for which screen to fit. In this way, the various sizes of the interface in a storyboard, we can work for a variety of screens in a file to complete, and then according to the different screen size of the device to adjust.

Create a new item, the device chooses Universal, the default is Sizeclass and AutoLayout enabled, and the default size of storyboard is any:

In (W:any | H:any) under Add a button to the storyboard:

Sizeclass is the role of different sizes of the screen abstraction for classification, the next layout management or AutoLayout, and then began to add constraints to the button, right-click the Select button, drag up (Control key + LEFT arrow up drag can also achieve this effect), select " Top Layout Guide "constraint button distance from the screen to determine the Y of the button

After you add the first constraint, a red haircut tip appears in the left view:

Point in, System hint X also need to constrain

Right-click the Select button to drag to the left (or CONTROL key + LEFT arrow drag) Select "Leading spaces to Container Margin", Determine the button x:

The red error in the upper left corner is gone and a warning is left to indicate that the expected button size is inconsistent with the actual button size:

Right-click to select the button, drag to the next figure, select the width and height fixed button width Height:

Or click on the button below to hook the width and height and click Add 2 constraints:

This way down the constraint on the button is complete, the upper left corner of the warning also eliminates, click the button, you can see the button on the right side of the constraints and modify the constraint values:

Randomly select a constraint, you can remove the installed in front of the right side of √, click the plus sign from the Sizeclass 9 interface type in which type of interface to hide or display this constraint:

Just in a separate tutorial on Sizeclass and AutoLayout, now combine them for screen adaptation, open Nine Sudoku, and choose an iphone screen (W:compact | H:any):

Put a few label on it:

Next, switch the screen to the ipad (W:regular | H:regular, you can see that when you work on the ipad interface, the label that is dragged under the iphone interface is grayed out, which means it's not available.

Then let the program run on the Iphong and the ipad separately:

If a new project for children's shoes has only been chosen for the iphone, then no matter how you set up the simulator on the ipad screen, the style that was designed on the iphone (and the blood and tears of the time when you thought you had a problem with your environment) We can use the iphone and ipad to make the most of the features of the screen to design the UI.
To delete a constraint on a screen with the Command+delete key, just remove the constraint from the iphone screen and show it dimmed, indicating that no other dimensions are available to be unaffected.

Select the iphone screen and create a new button on the top:

Right-click to select the Yellow button to drag to the red button, select horizontal Spacing (Set the yellow button to the horizontal spacing of the red button) to determine x:

Click on the left side of the error, prompt y also need constraints:

Right-drag the button up, select "Top spaces to top Layout Guide" and determine y:

Now there is a warning that the expected button size is inconsistent with the actual button size, this time we set the yellow button size constraint to the red button to make them the same size:

Right-drag to the Red button, select Wide, high equality:

Click on the left warning, select Update frame, update frame:

The updated interface should look like this:

And imagine a little different, the yellow button is a little lower, on the right to modify the yellow button to the top of the length and the same as the red button:

There's no problem with that:

Size In addition to the width-height equality, you can set the width of the two buttons in the settings proportionally (customizable input scale):

For special needs, you can also choose "Aspect ration" to set two buttons wide and high proportions for size setting:

Of course, if you want to make a wide and high proportion of size constraints, the previous set of size constraints will be deleted, otherwise it will cause constraints conflict, in short, the constraint is to determine a control on the screen unique position, determine x,y, and then assign size.
Because they are also learned not to write this blog after the project, you may look at will feel very confused, there is no level, there is a mistake, but also their knowledge of the point of an understanding, hoping to let everyone have a harvest, put forward errors and deficiencies.