Autolayout and VFL experience sharing, autolayoutvfl

Autolayout and VFL experience sharing, autolayoutvfl

As the iPhone 6 and iOS8 approaches, the adaptation issues become more complex. I recently learned how to use Auto Layout and shared it with you.

What is Auto Layout?

Auto Layout is a brand new Layout feature introduced after iOS6 release. Its purpose is to make up for the Layout shortcomings of Autoresizing in the past, in the future, the interface layout can be better adapted when more sizes are available.

Why Auto Layout?

Autolayout can adapt to different screens (iPhone 4, iPhone 5, iPad.

In the iPhone 4 era, developers only need to adapt to one screen size. Compared with the relative layout of the Android camp, iOS developers use absolute layout for the longest time, as long as the coordinates and sizes are written to death, it is OK. Then the iPhone 5 came out. For the two screen sizes, we need to consider a new problem, screen adaptation. In fact, Apple has long considered this Autoresizing technology. It is true that Autoresizing is insufficient. After iOS6 was released, Apple introduced the Autolayout feature to meet the layout requirements in a wider range of scenarios. Of course, because the iPhone 5 is the same as the iPhone 4 in the screen width, it is not difficult to adapt to these technologies (I used Autoresizing before), but it will be available soon in iPhone 6, when we are about to face more complex screen adaptation, Auto Layout can help us solve this problem well. In addition, it can also solve horizontal screen switching and iPad adaptation problems.

How to use Auto Layout?

Basic concepts of Auto Layout

The core of Auto Layout is a constraint. by limiting the view Size (the relationship between view and view), the view can calculate its own size and coordinates.

Visual Format Language, a Language rule that specifies the image description constraints used in AutoLayout.

The use of Auto Layout is still relatively complicated. It may feel confused at the beginning. It will be convenient after VFL is used.

Basic Theory of Auto Layout:

The core starting point of al is:

1. view has the ability of self-calculation size and layout. The size can be obtained through its own content.

2. The layout of the view is determined by its relationship with superview and other views.

3. Compared with the traditional autoresizingmask adaptive method, al is more precise and can definitely determine the view layout.

4. view does not necessarily require an initial rect. In al, if the view has enough constraint, you can determine your own size and position and know the relationship between yourself and other views. To determine the layout of a view, add a constraint to it.

Visual Format Language (should not be a Language)

Apple's engineers are very fond of inventing this kind of dumplike text. It seems to be a parsing method.

Use Visual Format Language to define horizontal and vertical constraints. Visual Format Language is a Visual Format Language used to describe constraints. This Language is an abstraction of Visual description, and the approximate process looks like this:

[NSLayoutConstraint constraintsWithVisualFormat:

Options: metrics:

Views:

];

ConstraintsWithVisualFormat: Specifies the attributes of Contsraint in the NSString type. The Parameter definition is generally as follows:

V: |-(> = XXX): indicates that the vertical direction is greater than, equal to, or less than a certain distance from SuperView.

To define the horizontal direction, change V: to h :.

In the following-[] brackets, set the height and width of the current View/control;

Options: the value of the dictionary type. The value here is generally selected in an enum defined by the system.

Metrics: nil; generally nil. The parameter type is NSDictionary, which is passed in from outside. // measurement standard

Views: View bound to the NSDictionary

Note the differences between AddConstraints and AddConstraint. One added parameter is NSArray and the other NSLayoutConstraint.

Rules

|: Indicates the parent view.

-: Distance

V: vertical

H: indicates the level.

>=: The view spacing, width, and height must be greater than or equal to a value.

<=: Indicates that the view spacing, width, and height must be Xiaoyu or equal to a value.

==: The view spacing, width, or height must be equal to a value.

@: >=, <=, == Maximum limit: 1000

 

1. |-[view]-|: The view is on the left and right edges of the parent view.

2. |-[view]: The view is on the left edge of the parent view.

3. | [view]: alignment on the left of the view and parent view

4.-[view]-: Set the width and height of the view.

5. |-30.0-[view]-30.0-|: the distance between the left and right sides of the parent view is 30.

6. [view (200.0)]: indicates that the view width is 200.0.

7. |-[view (view1)]-[view1]-|: indicates that the view width is the same and is in the left and right edges of the parent view.

8. V: [view (50.0)]: The view height is 50.

9: V: |-(= padding)-[imageView]-> = 0-[button]-(= padding)-|: indicates the distance from the parent view.

The distance between the two views must be greater than or equal to 0 and the distance from the parent view at the bottom must be Padding.

10: [wideView (>=60 @ 700)]: The view width must be at least 60 and cannot exceed 700. The maximum value is 1000.

11: If no direction is declared, the default direction is horizontal H: