Autolayout and VFL experience sharing [update ing] And autolayoutvfl

Autolayout and VFL experience sharing [update ing] And autolayoutvfl

Master haomeng is devoted to his contribution and respects the author's Labor achievements. Do not repost them.

If the article is helpful to you, you are welcome to donate to the author, support haomeng master, the amount of donation is free, focusing on your mind ^_^

I want to donate: Click to donate

Cocos2d-X source code download: point I send

Autolayout, started at iOS6.0

I. When is autolayout suitable?

1. There are more and more Apple devices. Your applications should use Autolayout and StoryBoard.

2. It depends on the application content. If you have a large amount of information, you need to display a large number of categories, the size is dynamic, and even these are in the list. (Such as social applications ). Autolayout can be of great help.

3. Mac OS applications. Now all are iOS. The size of the mac app window varies. Autolayout is suitable.

4. iPad applications supporting multi-screen conversion.

5. other businesses are not complex and there are few pages. In fact, cocoa programmers who have been writing code for many years have their own ui programming habits. These habits are very efficient for them. Even in the first clause, the coordinates of the layout are relative.

If you are used to code writing layout, we recommend that you continue to use it and learn Autolayout.

The workload of Autolayout is not much different from that of traditional layout. However, VFL will be greatly improved if you are familiar with it.

Ii. Basic Theory of Autolayout

The core starting point of Autolayout 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, Autolayout is more precise and can definitely determine the view layout.

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

3. autolayout under xib

It seems that the Autolayout and xib layout models are born together.

With xib and Autolayout, the view layout is very simple and easy. Programming immediately becomes a connected jigsaw puzzle game by the artist.

After enabling xib or StoryBoard, select view (s ). Select menu Editor and Pin. Sub-menu items are available constraints.

Width: fixed its own Width

Height :...

H-Spacing: sets the horizontal Spacing between two views.

V-Spacing :...

The following four are the left, right, top, and bottom spacing between views and superviews.

Widths Equally: the two views are kept in the same width.

Heights Equally :...

You can edit the constraint in the toolbar in the lower right corner of the xib interface.

Each constraint can be edited after being added. Select a constraint and enable inspector on the right bar. You can modify the value. (This value is the offset between views) and priority.

Autolayout in xib is more intuitive. You can see the effect and error value. There are also incorrect constraint prompts. If the constraint compiler is missing, an error is returned.

Iv. Use autolayout for encoding

For common applications with few pages. Xib/storyboard and Autolayout. Drag and Drop to complete the UI work in entertainment.

Autolayout does provide a lot of convenience.

But how can the obsessive-compulsive disorder programmers endure this very bad way for many years.

1. 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.

Apple's official documents provide few documents and examples of pitfalls.

I have learned something and shared it with you. It's just a basic level. With this, code writing should be fine.

I will not go deep into it, so I will continue to learn it later.

In the program, VFL is supported:

+ (NSArray *) constraintsWithVisualFormat :( NSString *) format options :( NSLayoutFormatOptions) opts metrics :( NSDictionary *) metrics views :( NSDictionary *) views;

-It returns a group of constraint;

-Format is your VFL string;

-Opts: Check the header file. It will be used in some cases;

-Metrics is a wonderful Dictionary defined by you. The keys in this dictionary can be written in the format string. The value is automatically replaced by the value in the metrics dictionary during compiler parsing;

-Views are all views that require a constraint relationship. (This can also be one ).

2. VFL example

When writing a VFL string, you need to imagine the rationality of the picture. Unreasonable constraint may cause the program to run an error or crash.

Just write a few

NSDictionary * dict1 = NSDictionaryOfVariableBindings (_ boxV, _ headerL, _ imageV, _ backBtn, _ doneBtn );

NSDictionary * metrics =@ {@ "hPadding": @ 5, @ "vPadding": @ 5, @ "imageEdge": @ 150.0 };

NSString * vfl = @ "|-hPadding-[_ boxV]-hPadding-| ";

NSString * vfl0 = @ "V: |-25-[_ boxV]";

NSString * vfl3 = @ "V: |-vPadding-[_ headerL]-vPadding-[_ imageV (imageEdge)]-vPadding-[_ backBtn]-vPadding-| ";

Dict1 is the last parameter called views in the api. It is done by the above macro.

Metrics defines parameters used in VFL.

Here are some VFL strings, so you can see how to use metrics.

See:

1) "|" indicates superview.

|-Spacing-[view1 object name]-(> = 20)-[view2 object name]

If H/V is not written, it indicates the horizontal direction. The spacing can be fixed or written>/<.

Visualized understanding: "|" is used to determine the relationship between the top, bottom, left, and right of the view.

To determine the relationship from top to bottom, add V: |. The vfl string can describe the relationship between the view members from top to bottom.

2) In vfl3, square brackets indicate view, and parentheses indicate dimension values. Supports equal size.

Or another view |-[view1 (view2)]. The width of v1 is equal to that of v2.

3) The priority is represented. For example, V: |-50 @ 750-[view (55)], or it is better to write it to metrics.

For more information, see UILayoutPriority. There are several fixed values. 1000 indicates that it must be supported.

4) options, which depends on the specific needs. For a vertical V layout, you can add NSLayoutFormatAlignAllLeft to align them.

You can also add bitwise OR NSLayoutFormatAlignAllLeft | NSLayoutFormatAlignAllRight as needed.

5) after writing the statement, add the constraint to the superview:

NSString * vfl1 = @ "|-hPadding-[_ headerL]-hPadding-| ";

[Self. view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat: vfl1 options: 0 metrics: metrics views: dict1];

6) Another api is used to generate a single constaint.

+ (Id) Comment :( id) view1 attribute :( NSLayoutAttribute) attr1 relatedBy :( partial) relation toItem :( id) view2 attribute :( NSLayoutAttribute) attr2 multiplier :( CGFloat) multiplier constant :( CGFloat) c;

First parameter: Specify view1 on the left of the constraint.

The second parameter: Specifies the attr1 attribute of view1. For details about the attributes, see the end of this document.

Third parameter: specify the relationship relation between the views on both sides. For the specific relationship, see the end of the article.

Fourth parameter: Specify view2 on the right of the constraint.

Fifth parameter: Specifies the attribute attr2 of view2. For details about the attributes, see the end of this document.

Sixth parameter: specify a multiplier that is multiplied by the view2 property.

Seventh parameter: specify a floating point number constant that is added to the view2 attribute.

For parameters, remember that view1.attr1 = view2.attr2 * multiplier + constant.

VFL is not needed. It is easy to understand, but inconvenient. If this is used. Work two will not be much less than the traditional layout.

Note:

1. If the constraint you want to set does not require a second view, set the fourth parameter to nil and the fifth parameter to NSLayoutAttributeNotAnAttribute.

Example:

[NSLayoutConstraint constraintWithItem: view1attribute: NSLayoutAttributeLeftrelatedBy: NSLayoutRelationEqualtoItem: view2attribute: NSLayoutAttributeRightmultiplier: 1 constant: 10]

The translation is: The left side of view1, on the right side of view2. there are 10 more points.

Attribute and link values of the attached View:

Typedef NS_ENUM (NSInteger, NSLayoutRelation ){

NSLayoutRelationLessThanOrEqual =-1, // less than or equal

NSLayoutRelationEqual = 0, // equal

NSLayoutRelationGreaterThanOrEqual = 1, // greater than or equal

};

Typedef NS_ENUM (NSInteger, NSLayoutAttribute ){

NSLayoutAttributeLeft = 1, // left

NSLayoutAttributeRight, // right side

NSLayoutAttributeTop, // above

NSLayoutAttributeBottom, // below

NSLayoutAttributeLeading, // Header

NSLayoutAttributeTrailing, // tail

NSLayoutAttributeWidth, // width

NSLayoutAttributeHeight, // height

NSLayoutAttributeCenterX, // X axis Center

NSLayoutAttributeCenterY, // y axis Center

NSLayoutAttributeBaseline, // text baseline

NSLayoutAttributeNotAnAttribute = 0 // No attribute

};

NSLayoutAttributeLeft/NSLayoutAttributeRight and

The difference between NSLayoutAttributeLeading and NSLayoutAttributeTrailing is that left/right always indicates left and right,

Leading/trailing may change from right to left, leading is on the right, and trailing is on the left.

5. Problems in actual operations

Xib mode. Nothing to pay attention to. Everything is normal.

Encoding mode,

1. Before addConstraint (s), the view should be uploaded by addSubView;

2. You do not need to write a frame for views;

3. Disable AutoresizeingMask for necessary views. [_ AViewsetTranslatesAutoresizingMaskIntoConstraints: NO];

4. The line feed of UILabel should be linebreakMode and numberOfLines;

5. to wrap a line in UILabel, you must add preferredMaxLayoutWidth. Otherwise, the width cannot be initialized.

The encoding mode is the most convenient. Label line breaks do not need to be written to line height calculation. Fully automatic. The superview where the label is located automatically calculates the rect.

This is the essence of Autolayout.

Now, the basic functions of Autolayout can serve you, which is indeed much more convenient.

We recommend that you use the VFL code mode to improve efficiency.

Master haomeng is devoted to his contribution and respects the author's Labor achievements. Do not repost them.

If the article is helpful to you, you are welcome to donate to the author, support haomeng master, the amount of donation is free, focusing on your mind ^_^

I want to donate: Click to donate

Cocos2d-X source code download: point I send