IOS screen adaptation can be divided into three chunks, representing the mainstream of screen adaptation in different periods:

  1. AutoResizing:Prior to iOS6, it was perfectly fine, because apple only had a 3.5-inch screen and very little landscape support, and it was very limited: it could only be laid out relative to the parent controls
  1. AutoLayout:After iOS6, apple added several screen sizes, and AutoResizing was no longer available. At this time, apple launched AutoLayout, which is very powerful and can establish layout relationship between any two controls, which is now the mainstream.
  2. SizeClass:With the release of iOS8, a new concept of page UI layout appeared, which overturns the previous version of UI layout. This feature is SizeClass, SizeClass and AutoLayout can solve the screen UI adaptation problem of all iOS devices

Here we come to understand one by one, because it involves UI layout, may be more pictures or GIfs, we have to be prepared.

This interface UI adaptation has been eliminated by The Times, now just a simple understanding, or for the following AutoLayout to explain the background of The Times. AutoResizing functions only relative to the parent control layout:

When using autoResizing, you need to turn off autoLayout and Sizeclass (if using Xcode6), which conflict with each other

###### has 6 lines, corresponding to the 6 enumerations below:

typedef NS_OPTIONS(NSUInteger.UIViewAutoresizing) {
    UIViewAutoresizingNone                 = 0.UIViewAutoresizingFlexibleLeftMargin   = 1 << 0.UIViewAutoresizingFlexibleWidth        = 1 << 1.UIViewAutoresizingFlexibleRightMargin  = 1 << 2.UIViewAutoresizingFlexibleTopMargin    = 1 << 3.UIViewAutoresizingFlexibleHeight       = 1 << 4.UIViewAutoresizingFlexibleBottomMargin = 1 << 5
};
Copy the code
  1. Around the 4 lines is used to set the current View from the parent control up and down around the distance is fixed
  1. The middle two lines are used to set whether the current View ADAPTS to the width and height of the parent control

As you can see, the Settings above can only set the layout between the current control and the parent control, not between sibling controls. For example, if I wanted the spacing between 2 control views to be fixed, this would not be possible using AutoResizing.

Because AutoResizing limitations can no longer meet the needs of different sizes of screens after iOS6, the advantage of iOS development is to have a good owner. Apple not only attaches great importance to user experience, but also is friendly to developers. For example ARC, AutoLayout. AutoLayout is now using the mainstream screen adaptation, it can be in any two controls between the establishment of a layout relationship, can be a father and son View, can also be a brother View, much more powerful, learning costs are also higher. ###### Use AutoLayout:

  1. Align layout interface
  1. Relative layout interface
  2. Constraint Management interface

####1. Align the layout: click the stairway button in the lower right corner

###### can be divided into three functional parts:

  1. The above four are control boundary aligned layouts
  1. The middle three are control center aligned layouts
  2. The next two are center aligned layouts for parent-child controls

The above 7 alignment layout, need to select multiple views to set.

####2. Click the square button in the lower right corner of the layout interface

###### is divided into four functional parts:

  1. The top is the distance Settings relative to nearby controls
  1. Width and Height set the Width and Height of the control
  2. The next three are equal width and height constraints between multiple controls
  3. At the bottom is the alignment Settings, which repeat the alignment layout interface above

####3. Constraint Management interface Click the small triangle button at the lower right corner:

###### is divided into two major functional areas:

  1. Above the split line is constraint management for selected views, most commonlyUpdata Frames
  1. Below the dividing line is the constraint management for all views in the container, most commonlyUpdata Frames

####4. Use the control button with the drag line to do AutoLayout

####5. The restriction list is displayed on the right of the restriction page.

FirstItem = SecondItem * Multiplier + Constant 
view1.width = view2.width * 1 + 0 
-> view1.width = view2.width
Copy the code

### 3

######AutoLayout practice examples:

  1. The views are the same width and length
  1. Both views are equidistant from the horizontal center of the screen
  2. The distance between the two views and the left and right boundaries of the parent control is fixed

###### Final rendering:

####1. Set two views of equal width and height

SizeClass is to abstract the screen size, no longer stick to the specific size, because the size has been changing, if we adapt according to the size, will be very tired. ######SizeClass abstractly classifies screens:

  1. Compact: compact – small
  1. Any: Any
  2. -Blair: Regular, big

###### to sum up:

  • SizeClassThe screen is only abstract classification, specific screen adaptation or to useAutoLayoutTo carry out.
  • Without the concept of horizontal and vertical screens, without the concept of specific dimensions, you don’t have to worry about what the specific device is
  • Width and height are abstracted into the three above, and 3 by 3 is a total of nine types, but not nine screen sizes

So a storyboard with Xcode using SizeClass looks like this:

###### used to have such a abnormal requirement:

There’s a View that’s 100 by 100, and it’s in the top left corner for portrait on iPhone, the bottom right corner for landscape, and it’s right in the middle for iPad

# # # # # now can use SizeClass simple implementation: # # # # # # iPhone portrait: use SizeClass fixed screen for the iPhone vertical screen: first compactWith | RegularHeight

In addition to this, iOS8 added SizeClass, some controls also have more properties, such as:

You can see it in the menu area on the right: Set to Installed, this controls when the control is displayed. Currently, there is no constraint, indicating Any * Any, that is, it can be displayed regardless of the size of iPhone or iPad. Click the small plus sign to the left to control the display with sizeclass. Also have font, picture display:

##### Do you think storyboard can be played like this after watching it? (^o^)/~ ##### Most of this note is from: Bloggarden with the uncomfortable blogger, thank him for sharing.

##### Any questions can be asked in the comments section below, O(∩_∩)O ha!