IOS8 Development ~ui Layout (a) a preliminary study of size Class

First, new features size class introduction

With the release of the IOS8 system, a new page UI layout concept appears, and this new feature will subvert the UI layout, including IOS7 and previous versions, which is the size Class. The size class with auto layout resolves all UI adaptation issues (including iphone and ipad) on the screen size and screen rotation of iOS devices.

Second, why to use the size Class

Until IPhone6 released, there are currently 4 screen sizes for iOS devices.

IPhone6 not appear before, you can also use code to fit two sizes of UI, but after IPhone6 release, gradually found that the previous way may really be eliminated, because the future may have to face more screen size. It is clear that the age of the frame with hard-coded UI is going to be gone, using auto layout.

Auto layout has been introduced since IOS6, but has been used for a number of reasons (for example: Auto layout itself is not very mature, hard-coded to solve the iphone with only two screen-size UI adaptations, iphone items and ipad items separately).

The Size class is used with auto layout to make the auto layout less complex.

Third, how to use the size Class

To use the size Class, first install the latest Xcode6, create a new single view Application Template project, select Main.storyboard-> View, and view the Inspector properties:

The default size classes is already in use, but you can turn it off if you don't want to use it, and then use the old layout. But if you choose to use the size Class and then turn off Auto layout,xcode, a warning box pops up: (You'll see why later!) ）

Select Cancel, because the next step is to use size Classes.

Size classes is actually the size of the iOS device screen is categorized, how to classify it?

For iOS devices (whether iphone or ipad), the width and height are divided into 3 cases: compact, Rules (Regular), any

where "any" contains a compact, rule (Regular) type. If the screen width is in W, the height is expressed in H, then the W (Regular)/h (Regular) combination is the category (class) of the ipad screen size (size), regardless of whether the ipad is horizontal or vertical, The screen size category is W (Regular)/h (Regular), which can be expressed clearly.

The official website also lists some of the following:

It should be understood here that size classes is a further abstraction of the type of screen size. There is a question, what is the use of classification? How to use it?

In the past, for different iOS device sizes or the same size of the same screen different UI, you have to calculate the frame according to the actual situation. Using the size classes to layout with auto layout based on the current screen size type, discard the previous idea of calculating the frame and instead use the relative layout to think (in fact, to calculate the frame).

And Xcode6 The biggest breakthrough is here, do not need to establish different sizes of storyboard, as long as the establishment of a, and then modify the size of its view can do a variety of screen size adaptation, as follows:

For example, I want to do the ipad page design, set to W (Regular)/h (Regular)

Then the same project, but also compatible with the horizontal screen of IPhone6 Plus, you can set the view size class to: W (Regular)/h (Compact), and then continue to adapt

Then, when the program runs on different devices, or the device has a horizontal screen and a vertical screen switch, the corresponding UI can be displayed.

If you say so much, try experimenting:

Fit IPhone6, add a new view on the Rootviewcontroller view, so that the new view regardless of screen horizontal screen or vertical screen when the distance from its Superview edge 50 points wide, and horizontal screen when the green color, vertical screen when the red color.

1, the new project (has just created a new AL8 project, do not repeat the steps)

2. Switch size class to Wcompact/hregular mode

and add a view without having to control its frame, and set its background color to red

Next, select the Red view, then click on the Editor-pin of the top toolbar of the Xcode and add the constraints of the red view relative to the Superview border (up or down)

When you add a constraint, you see that the line of the constraint is yellow, indicating that the current constraint is not yet able to determine the frame of the view, and that you need to continue adding it, when the 4 constraints are added, the color of the constraint line is blue, indicating that the current constraint is correct.

Then check the constraint and set the value of the constraint (we don't want the new view to be 50 points wide from its superview boundary!) ), 4 constraints are set.

When you're done, clicking the view will automatically update the frame, which should look like this:

3. Toggle the size class to Wregular/hcompact mode, then repeat the settings in the second step, the difference is that the newly added view background color is set to green.

4, finished, with the simulator run it, simulator to choose IPhone6 Plus Oh! Then rotate the screen to see if it's the effect we want!

Think: What happens if you switch the simulator to IPhone6, IPhone5, iphone4s, ipad! The next article will explain!

IOS8 Development ~ui Layout (a) a preliminary study of size Class