IOS development ~ UI layout (1) Size Class, iosui

IOS development ~ UI layout (1) Size Class, iosui

With the release of the iOS8 system, a new page UI Layout Concept emerged. This new feature will subvert the UI layout methods of iOS7 and earlier versions. This new feature is the Size Class. With Auto Layout, Size Class can solve the problem of UI adaptation during screen Size and screen rotation of all iOS devices (including iPhone and iPad.

 

Ii. Why should we use Size Class?

After the release of iPhone 6, there are four screen sizes for iOS devices,

 

Before the advent of iPhone 6, you can also use code to adapt to two types of UI, but after the release of iPhone 6, it gradually found that the previous method may have to be eliminated, because more screen sizes may be required in the future. Obviously, the Frame era of the hardcoded UI is over, and Auto Layout is needed.

Auto Layout has been introduced since iOS6, but it has never been used for promotion for many reasons (for example: auto Layout itself is not very mature and hard-coding can solve the problem of iPhone UI adaptation with only two screen sizes, iPhone project and iPad project separately ).

The Size Class is used with Auto Layout, making the Auto Layout method less complex.

 

3. How to Use Size Class

To use the Size Class, first install the latest Xcode6, create a Single View Application template project, Select Main. storyboard-> View, and View the Inspector attributes:

 

The default Size Classes is used. If you do not want to use it, you can disable it and use the old layout method. However, if you choose to use Size Class and disable Auto Layout, Xcode will bring up a warning box: (you will understand why later !)

Select cancel because the Size Classes is used next.

 

The Size Classes are actually used to classify the screen Size of iOS devices. How can this be classified?

For iOS devices (iPhone or iPad), the width and height are divided into three types: Compact, Regular, and Any)

 

"Any" (Any) contains Compact and Regular types. If the screen width is w and the height is h, the combination of w (Regular) and h (Regular) is the class of the iPad screen size ), whether the horizontal or vertical screen of the iPad, the screen size category is w (Regular)/h (Regular), which can be clearly expressed.

 

The official website also lists some of the following:

 

 

 

Here we should understand that Size Classes further abstracts the types of screen sizes. So there is a question: what is the use of classification? How to use it?

In the past, frame computing was required based on the actual situation for different iOS device sizes or different UI adaptation for different horizontal and vertical screens of the same size. The use of Size Classes is based on the current screen size type and uses Auto Layout for Layout. We need to discard the previous frame calculation idea, instead, we should think about the relative layout (in fact, we still need to calculate the frame ).

The biggest breakthrough of Xcode6 is that we do not need to create storyboard of different sizes. We only need to create one and modify the size of its view to adapt to various screen sizes, as shown below:

 

For example, if I want to design an iPad page, set it to w (Regular)/h (Regular)

 

Then, in the same project and compatible with the iPhone 6 plus on the horizontal screen, you can set the size class of the view to w (Regular)/h (Compact), and then continue to adapt.

 

Then, when the program runs on different devices, or the device landscape screen and landscape screen switch, the corresponding UI will be displayed.

 

If you have said so much, Please experiment with it:

Adapt to iPhone 6 and Add a new view to the view of RootViewController, so that the new view is 50 points wide from the edge of its superview, regardless of whether the screen is landscape or portrait, in addition, the landscape is green and the landscape is red.

1. Create a project (a new AL8 project has just been created, and the steps are not repeated)

2. Switch the size class to the wCompact/hRegular mode.

 

Add a view without having to worry about its frame, and set its background color to red.

 

Next, select the red view, click the Editor-Pin in the toolbar at the top of Xcode, and add the constraints of the red view relative to the superview border (top, bottom, and left)

 

When the constraint is added, the line of the constraint is yellow, indicating that the current constraint cannot determine the view frame. You need to add the constraint again. After adding the four constraints, the color of the constraint line is blue, indicating that the current constraint is correct.

 

Then select the constraint and set the value of the constraint (do we not want the new view to be 50 points wide from its superview boundary !), You must set all four constraints.

 

After setting, clicking the view will automatically update the frame, which should be like this:

 

3. Switch the size class to wRegular/hCompact mode and repeat the settings in step 2. The difference is that the newly added view background color is set to green.

 

4. All done. Run it on the simulator. Select iPhone 6 plus for the simulator! Then rotate the screen to see if we want the effect!

Think: What will happen if I switch the simulator to iPhone6, iPhone5, iPhone4s, and iPad! The next article will explain!