IOS 8 UI Layout AutoLayout and Sizeclass (ii)

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 that includes the IOS7 and previous version numbers, which is the size Class.

The size class with auto layout solves all of the UI adaptation issues (including iphone and ipad) on the screen size and screen rotation of the iOS device.

Second, why to use the size Class

Until after IPhone6 was released. There are now 4 screen sizes for iOS devices,

Before IPhone6, the code was able to fit the two-size UI, but IPhone6 was released. Gradually found that the way the past May really be eliminated, because the future may have to face a lot of other screen size. Obviously the era of hard-coded UI frame is going to pass. You want to use auto layout.

Auto Layout has been introduced since IOS6 started. But it has been used for a lot of reasons (such as: Auto layout itself is not very mature, hard-coded to solve the iphone only has two screen sizes of UI adaptation, iphone items and ipad items separately to do).

The Size class is used with auto layout. Make auto layout less complex.

Third, how to use the size Class

To use the size Class. To 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, assuming that you don't want to use it and you can turn it off and use the old layout. But suppose you choose to use the size Class. Then turn off Auto Layout. Xcode will pop up a warning box: (It will be clear later!) ）

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

Size classes actually classifies the size of the iOS device screen. How to classify it?

For iOS devices, regardless of iphone or ipad. The width and height are divided into 3 cases: compact, rule (Regular), whatever (any)

The "Whatever" (any) includes the compact, rule (Regular) type. Suppose the screen width is expressed 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), and the screen size category is W (Regular)/h (Regular) regardless of whether the ipad is horizontal or vertical. Able to express very clearly.

The official website also lists some of the following:

watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvbgl6ag9uz2z1mjaxmw==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma== /dissolve/70/gravity/center "width=" "height=" "style=" border:none; max-width:100% ">

It should be clear that you are here. 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?

Once for different iOS device sizes or the same size of the screen with different UI, you have to calculate the frame according to the actual situation.

Use the size classes to lay out the layout using auto layout based on the current screen size type, and discard the previous idea of calculating the frame. Instead of thinking about the relative layout (actually calculating the frame).

And Xcode6 The biggest breakthrough is here, do not need to establish different sizes of storyboard. Just to build one. Then change the size of the view to make a variety of screen size adaptation. For example, the following:

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

watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvbgl6ag9uz2z1mjaxmw==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma== /dissolve/70/gravity/center "width=" "height=" "style=" border:none; max-width:100% ">

Then the same project, and the IPhone6 plus that is compatible with the horizontal screen. You can set the size class of the view to: W (Regular)/h (Compact), then continue to fit

Then when the program runs on different devices. Or the device's horizontal screen and vertical screen switch. To display the corresponding UI.

Said so much. Let's try it out:

Fit IPhone6 To add a new view to the Rootviewcontroller view. Let this new view regardless of screen horizontal screen or vertical screen when all distance from its Superview edge 50 points wide, and horizontal screen is green color, vertical screen is red color.

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

2. Switch size class to Wcompact/hregular mode

watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvbgl6ag9uz2z1mjaxmw==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma== /dissolve/70/gravity/center "width=" "height=" "style=" border:none; max-width:100% ">

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 constraint of the red view relative to the Superview border (up or down)

When you join a constraint, you see that the line of constraint is yellow. Indicates that the current constraint is not yet able to determine the frame of the view. Need to continue joining when 4 constraints are added. The color of the constraint line is blue. Indicates that the current constraint is correct.

Then check the constraint to 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 are finished setting up, click View to update frame yourself, this should be:

3. Switch size class to Wregular/hcompact mode, and 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 to execute it, the 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!

Demo download

IOS 8 UI Layout AutoLayout and Sizeclass (ii)