IOS 8 AutoLayout and Size Class

IOS 8 AutoLayout and Size Class

IOS8 and iPhone6 have been released for quite a long time. the vast amount of fruit powder has finally ushered in the big screen iPhone, and there is no need to worry about buying a Samsung iPhone for the big screen... But for iOS developers, there is a problem like Android development and development-> adaptation of various screens (does it require a pay-as-you-go cycle ). for adaptation and online transmission of various arguments about the Size Class, I was too busy some time ago and never studied it. If I applied +, Apple provided much better adaptation methods than Android. after self-measurement, it is really convenient 0.0 (however, I still want to say that the core of adaptation is always AutoLayout)

Concepts

Before iOS8, when developing projects, the company first made the iPhone version and then required the development of the iPad version. In fact, the content is exactly the same, but the UI has changed, however, we need to build two projects for implementation. the Size Class released by iOS8 allows us to adapt all sizes of screens in a project's storyboard, not only iPhone 4s-5/5s-6-6 Plus, but also iPad interface. it introduces a new concept, abandoning the so-called specific width and height when we adapt to the traditional sense, the screen width and height are divided into two situations: Compact-Compact, regular-normal (Any-Any is actually a combination of the two, so I didn't divide it into three cases ). the combination is 3*3, that is, no matter how it changes, it adds up to 9 types, such.

1. in practical applications, how does Compact, Any, and Regular use it?

W: Any h: Any is selected by default when we first set up the project. It is the parent class of all descriptions. the descriptions of other types are changed on this basis. For example, if weight is set to Any and height is set to Regular, as long as the height of the interface element is Regular, whether weight is Regular or Compact, it will exist. 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. Let's take a look at a set of data and a diagram (a foreign blogger gave a very good image ):

IPhone4S, iPhone5/5S, iPhone6

Portrait screen: (w: Compact h: Regular)

Horizontal screen: (w: Compact h: Compact)

IPhone6 Plus

Portrait screen: (w: Compact h: Regular)

Horizontal screen: (w: Regular h: Compact)

IPad

Portrait screen: (w: Regular h: Regular)

Landscape screen :( w: Regular h: Regular)

3. Summary:

• If the project does not support horizontal display, use w: Compact h: Regular (or directly cancel the use of Size Class)

• If the project supports horizontal display, use w: Compact h: Regular + w: Any h: Compact

• For some public constraints (applicable to Any combination), it is generally set in w: Any h: Any.

• The same applies to iPad

  Therefore, I think the biggest help of the Size Class is to solve horizontal screen adaptation and share a design board with the iPhone and iPad... (Personal opinion)

  Test feedback 1

  1. First, create a project to expand the following page

  PS: this is a new feature of iOS8. If it is used in a project, you must discard iOS7 compatibility... Obviously, it is still not feasible.

  2. In Any case, place a Label and set the upper-left-bottom-Right constraint to 0-0-20-0.

  3. In the case of Compact Any, place another Label and set the constraint to 20.

  4. Continue with Compact Any to see the changes in the landscape status.

  5. Switch to Regular Any to complete the 6 Plus Landscape Display.

  Test feedback 2

  Test 1 demonstrates the combination of various screens listed in the concept. The next step is to use the Size Class to solve the clever use of the screen.

   

  PS: used for horizontal screen adaptation and UI layout during landscape layout

  In addition to modifying constraints under different combinations, you can also change whether the control is displayed under different combinations.

  Test feedback 3

  AutoLayout I don't know how to set it here, because I don't know how to write it. I feel that it is most effective for everyone to write and try it.

  The following is an illustration of AutoLayout settings.

  Test Demo result diagram:

  If the screen is not landscape, you can also directly cancel the Size Classes (the image is different, written at different times... Token)

  Final Demo

  Demo Github address: https://github.com/ConanMTHu/Size-Classes-Demo/tree/master

  
   

  Summary

  It is irresponsible to say that storyboard + autolayout should be used in the future, but it is necessary to think deeply about autolayout!

  Autolayout can be used in the following situations:

  • When there is a lot of content to be displayed and the size is not fixed;

  • The program needs to support screen rotation (mainly iPad programs, iPhone horizontal screen scenarios are a little non-mainstream, it is not excluded... mobile games ..);

  • The program is used on iPhone and iPad (the most important one ).

    However, the use of autolayout in storyboard has advantages and disadvantages. The advantage is visualization, which saves time to implement simple functions, but it also has disadvantages, for example, if you accidentally move a widget, the constraint or custom XXXXXXXX is added to the control.