IOS8 Study Notes 2--autolayout

iOS-supported devices now have a lot of size, and it's certainly unrealistic to make a separate app for each of these different sizes, so Apple launched AutoLayout and Sizeclass after IOS8, along with the VFL interface design language

Let's start with the rotation of the iOS screen, first of all, for developers, the focus is not on the screen pixels, but the concept of a point, that is, the same size devices, different resolutions, the developers think their points are the same, the bottom of the system is responsible for a point with the corresponding pixels together, For example, the average screen pixel of the ipad is 1024x768, and the retina's screen pixel is 2048*1536, but their screen size is the same, so for the point, it is still 1024*268 point, only the retina of each point corresponds to four pixels, A common point corresponds to one pixel.

When the screen rotates, in general, the interface will also be rotated, it will cause the UI deformation, because most of the device is not a square, this time, you have to set the rules of rotation, otherwise rotated out of the interface will be lost UI or extremely ugly, this time, there are three ways to manage rules, UI create constraints, Code-making constraints, or simply making a few sets of UI.

In the iOS configuration you create, you can specify the constraints that your app supports, in the following locations

Portrait normal vertical state landscape left turn landscape right turn

Open here since the default turn on rotation, but also in the code to specify the direction of support rotation, in the view corresponding to the class file to implement the method of inheriting to the parent class Supportedinterfaceorientations, return a nsuinteger, the specific code is as follows

- (Nsuinteger) supportedinterfaceorientations{    return Uiinterfaceorientationmasklandscapeleft| Uiinterfaceorientationmasklandscaperight| uiinterfaceorientationmaskportrait;}

The returned parameter is the result of the macro or operation, and when this method is called, if the rotation is supported in this direction, then the system will emit a message that rotates in that direction.

After the rotation is supported, the UI should be designed to fit the rotation, the relevant knowledge and operation of AutoLayout, please refer to this page

http://blog.csdn.net/pucker/article/details/41832939

The point is that AutoLayout allows developers to establish precise rules of linear variation between any of the two views on the interface. The so-called linear change is a function of mathematics, namely:

y = m*x + C

where x and Y are a layout property of any two views in the interface, M is a scale factor and C is a constant.

http://blog.csdn.net/pucker/article/details/41843511

The focus of this article is

With this proportional relationship, you can derive the relationship between controls and controls

There's another point of attention.

When you add a constraint to scroll view using automatic layout, you need to explicitly scrollview the contentsize size in addition to determining the location size of the ScrollView itself. For the above example, Scroll view itself occupies the lower half of the screen, but the size of its contentsize is indeterminate, so an abnormal scrolling effect occurs. So we also need to determine the width of the two labels so that we can calculate the contentsize. Press the command key to select the logo Image, Name label and description label in the Document Structure window, click the Pin button and select equal width in the popup window, so that the width of the two Label is always the same as the image The width of the view is equal, that is, the width of the contentsize of the scroll view is always the same as the width of the scroll view itself, so there is no horizontal scrolling.

Here, the automatic constraint is finished, but also remember that the use of direct control to pull controls by the way the constraints are established according to the current control state constraints, it is necessary to manually adjust the

These are autolayout using the IB tool and can be AutoLayout with code

Refer to this page for details

http://blog.csdn.net/pucker/article/details/45070955

It mainly describes several classes

Nslayoutconstraint is mainly used to describe the form of constraints

Nslayoutattribute enumeration to its format

Nslayoutrelation layout of the relational formula

There's one more thing to watch out for.

Apple introduced a new concept of automatic layout in iOS 6, but at the time there were still a lot of old code that used Autoresizingmask and Setframe: to build the interface. Imagine, if you add a view that is already set up and use Autoresizingmask to a view that uses automatic layout, The runtime needs to implicitly convert the former frame and autoresizingmask into automatic layout constraints (the type of these implicit conversions is nsautoresizingmasklayoutconstraint). This makes it possible to define its position and size without causing the constraint to be absent. The procedure for this implicit conversion is determined by the value of the Translatesautoresizingmaskintoconstraints property of the UIView. By default, this value is yes, indicating that an implicit conversion is required for the runtime to be automatic. This is certainly good for older code, but when we explicitly add a constraint to the view, we do not want to autoresizingmask the implicit conversion, otherwise it will cause a constraint conflict. Therefore, it is important to note that when we create a view using code, we need to set the value of the Translatesautoresizingmaskintoconstraints property to No

In this way, you can set the layout properties of the interface in code.

But the use of this method is more cumbersome, the next can be used in the VFL language layout management, the reference page for

http://blog.csdn.net/pucker/article/details/45093483

The VFL is a new form of creating constraints, actually creating a Nslayoutconstraint object, but the way it is built is simpler

The simple rules are as follows

The parameter format is a string that conforms to the VFL syntax. The H: In the code above indicates that this VFL string describes a horizontal constraint, in contrast to V: represents the vertical direction. If the VFL string does not indicate H: or V:, the default is the horizontal direction. | Represents the parent view. The VFL requires that the names of all views be placed within brackets, and [Logoimageview] refers to Logoimageview. -0- indicates that the spacing value is 0. So @ "H:|-0-[logoimageview]-0-|" Indicates that in the horizontal direction, the space between the left side of Logoimageview and its parent view is 0,logoimageview to the right of the right side of the parent view to 0. @ "v:|-0-[Logoimageview]" means that in the vertical direction, the spacing between the top of the Logoimageview and the top of its parent view is 0. In addition,0-Can not write, that is, if the spacing is 0 do not explicitly write, so @ "h:|-0-[logoimageview]-0-|" can be reduced to @ "h:|[logoimageview]|", @ "v:|-0-[logoimageview]" can be reduced to @ "V:|[logoimageview]"

In addition, this approach is not omnipotent, with the following points of attention

Well, most of the constraints of the class is these, I believe that the three pages of the basic layout is not very difficult. The key is still in that formula Y=ax+b, grasp the specific meaning of the formula, you can know the parameters of the setting, layout is the physical life.

IOS8 Study Notes 2--autolayout