Reprinted: AutoLayout of the VFL description

This article is not a tutorial. Cocoa AutoLayout came out quite a long time. Many times in the past want to go into a thorough study, each time is a very painful disorder. This thing is in a bit of a mess. Especially accustomed to the code write layout. When you see visual format language, you simply lift the table. Search tutorials, all over the the all over the, no one speaks thoroughly. Example empty. You will only have 3 controls for the horizontal layout of the method? I read many articles in a muddle. With a little summary. The groove doesn't vomit much. Simply speaking.

AutoLayout, started at iOS6.0 first, when to use AutoLayout more suitable1. Irresponsible fence: Apple has a growing number of devices and your app should use AL. (And with SB) 2. To see the application content decision. If your content is informative, there are a lot of categories to show, and the dimensions are dynamic and even these are in the list. (such as social apps). Al can give a lot of help. Application of 3.Mac OS. Now it's all done with iOS. Mac app's window, there will be size changes. Al is more appropriate. 4. Support multi-turn screen ipad app. (Is there a need to support multiple iphone scenarios?) So long, brain-crippled? 5. Other business is not complex, the page less application, in fact, cocoa programmers have written for many years code has their own UI programming habits, these habits for them is very efficient. Even the first one says that the coordinates of the layout are relative. If you are accustomed to code writing layouts, it is recommended that you continue to follow and also learn al. Self-feeling Al and traditional layout, the workload will not vary too much. But the VFL will have a great improvement after being skilled. two. The basic theory of AutoLayoutAl's core starting point is that 1.view has the ability to self-calculate size, layout. The size can be obtained through its own content. The layout position of the 2.view is determined by its relationship to Superview and other view. 3. Compared to the traditional Autoresizingmask adaptive, Al is more precise and can definitely determine the layout of the view. The 4.view does not necessarily require an initial rect. In AL, if the view has enough constraint, it can determine its size and location, and know its relationship to other view. That is, to determine the layout of the view, add constraint to it. three. AutoLayout under the XibIt seems that the AL and Xib layout patterns were born to be together. Using Xib plus Al,view layout is easy and easy. Programming work immediately became the art of online jigsaw puzzles. After you turn on Xib or SB, choose View (s). Select the Editor for menu and select PIN. The submenu item is the available constraints.Width : fixed self widthHeight: ... h-spacing: Fixed two view horizontal pitch v-spacing: ... The following 4 respectively are the left, right, upper, and lower spacing of the view relative to Superview Widths equally: Two view remains the same width Heights equally: ... The bottom right corner of the Xib interface also has a way to edit constraint: Each constraint can be edited after it is added. After selecting a constraint, open the right column and select Inspector. You can modify the values. (This value is the offset between the view) and the priority level. Slowly dragged himself to play. This is not a fool tutorial. Point in place and study for yourself. Al is more intuitive under xib. You can basically see the effects and error values. There are also incorrect hints for constraint. Less constraint compiler will fill, more will prompt an error. (but will cause the interface layout is not correct, oneself slowly adjust, elder brother now still is full article alert, did not let the compiler feel contradictory puzzling constraint, all can work. There are resolve ways to solve the problem of constraint, sorry, I will not. four. Use the AutoLayout encoding methodFor common applications where there are not many pages. Xib/sb and Al. Drag and drop. The UI work can be done in entertainment. Al did give a lot of convenience. But for years of obsessive-compulsive disorder, apes have endured this lame way. (Tow blocks?) Don't hit the code? It seems like a day without work. 1.Visual format language (should not be a language) Apple's engineers are very loving and invent this kind of hieroglyphs. Feel it is an analytic way. Apple's official documentation gives a few examples of documents and pits. (video I did not see, do not know how) on-line students have also written a little bit of a few words of code. Are you learning the rhythm of calculus? It is better not to write or write clearly than to write. From the kind of foreigner that saw a few. I have experienced some, share to everyone. Just a basic level, it will be, the code to write Al should be no problem. In-depth I also do not want to meet more love of the cattle to share. The VFL is supported in the program by:

1 + (Nsarray *) Constraintswithvisualformat: (NSString *) format options: (nslayoutformatoptions) OPTs metrics: ( Nsdictionary *) Metrics Views: (Nsdictionary *) views;   

-it returns a set of constraint. -Format is your VFL string, and so on. -OPTs yourself point to the head file to see. Some cases will be used, wait for an example. -Metrics is a wonderful dictionary that you define yourself. The key in this dictionary can be written in the format string. When the compiler resolves, it is automatically replaced with value in the Metrics dictionary. Wait for an example. -Views are all views that require a constraint relationship.  (can also be a) 2.VFL example write the VFL string, mind to imagine the rationality of the picture. Unreasonable constraint can cause the program to run the Times wrong or crash directly. Write a few.

1  2Nsdictionary *dict1 =nsdictionaryofvariablebindings (_BOXV,_HEADERL,_IMAGEV,_BACKBTN,_DONEBTN); 3 4Nsdictionary *metrics = @{@"hpadding":@5,@"vpadding":@5,@"Imageedge":@150.0}; 5 6NSString *VFL =@"|-hpadding-[_boxv]-hpadding-|"; 7 8NSString *vfl0 =@"V:|-25-[_BOXV]"; 9 TenNSString *VFL3 =@"V:|-vpadding-[_headerl]-vpadding-[_imagev (Imageedge)]-vpadding-[_backbtn]-vpadding-|";

Dict1 is the last parameter you need in the API. This is done by the macro above. Metrics defines some of the parameters to be used in the VFL. Below are some of the VFL strings, which let you know how to use metrics. See: 1) "|"      Represents Superview.     |-Spacing-[view1 Object Name--(>=20)-[view2 object name] Do not write h/v means landscape, spacing can write fixed value also can write >/<. Visualize the understanding, "|"     is used to determine the top, bottom, left, and right relationships of a view. To determine the relationship from top to bottom, add v:|. Then the VFL string can describe the relationship between the top and bottom view. 2) See vfl3 inside, square brackets represent view, parentheses denote dimension values. Support size equals. Or the width of another view |-[view1 (VIEW2)],V1 is equal to V2. 3) Priority is denoted by @.     such as V:|[email Protected][view (55)], or write to metrics inside better. See Uilayoutpriority for specific definitions. There are several fixed values. 1000 indicates that support is required. 4) Options, this depends on the specific needs.     If it's a vertical v-layout, you can add nslayoutformatalignallleft and let them align. You can also add a bitwise OR NSLAYOUTFORMATALIGNALLLEFT as needed | Nslayoutformatalignallright. (Ghosts know what needs, their own experience it) 5) After the general constraint added to Superview:

1 @" |-hpadding-[_headerl]-hpadding-| " ;    2 3 [Self.view addconstraints:[nslayoutconstraint constraintswithvisualformat:vfl1 options:0 Metrics:metrics Views:dict1]];   

6) There is also an API for generating a single constaint

1 + (ID) Constraintwithitem: (ID) view1 attribute: (nslayoutattribute) attr1 Relatedby :(nslayoutrelation) Relation Toitem: (ID) view2 attribute: (nslayoutattribute) attr2 multiplier: (cgfloat) Multiplier constant: (cgfloat) C;  

For parameters, remember, view1.attr1 = view2.attr2 * Multiplier + constant is good. This is not the VFL, good understanding, but inconvenient. If you write with this. Work two is no less than the traditional layout. Five. Problems in the actual operationThe above are all theories, the world operation will have some strange problems to pay attention to. This is the focus of the day. Xib mode, nothing to pay attention to, Xib in the newspaper warning, I do not know how to do, everything is fine. In the coding mode, the view should be addsubview up before 1.addConstraint (s). 2. Do not write frame3 to views. Turn off Autoresizeingmask for the necessary view. [_aview Settranslatesautoresizingmaskintoconstraints:no];4.uilabel to write Linebreakmode, to write NumberOfLines ( iOS7.0 default seems to be 1, Pit Daddy) 5.UILabel to change the line, be sure to add preferredmaxlayoutwidth. Otherwise, the width cannot be initialized. The maximum convenience that the coding mode feels. Label wrapping does not have to be calculated by line height. Fully automatic adaptation. The Superview that the label is in also automatically calculates the Rect. This is the essence of al. So, you don't have to write this:

1 [OBJC] View plaincopy2 /*  3 4 if ([[Uidevice currentdevice].systemversion floatvalue]<7.0) {5 6 cgsize TitleS = [title Sizewithfont:[_headerl font]7 8 Constrainedtosize:cgsizemake (270.0, Cgfloat_max)9 Ten linebreakmode:nslinebreakbywordwrapping];  One  A            -  - _headerl.frame = CGRectMake (_headerl.frame.origin.x, _HEADERL.FRAME.ORIGIN.Y, the  - _headerl.frame.size.width, titles.height);  -  - }else{ +  - cgrect titler = [title Boundingrectwithsize:cgsizemake (270.0, Cgfloat_max) +  A Options:nsstringdrawinguseslinefragmentorigin at  - Attributes:nil -  - Context:nil];  -  - headerl.frame = CGRectMake (_headerl.frame.origin.x, _HEADERL.FRAME.ORIGIN.Y, in  - _headerl.frame.size.width, titleR.size.height);  to  +     }   -  the     */ 

I have some problems that have not been resolved: The plain code-written Viewcontroller does not display the Al layout properly. With a blank xib VC, the rest of the code to write, it is normal. Doubts about the self.view you write, and what you need to do with AutoLayout. At this point, AL, the basic functions are already available for you.  Indeed, it is convenient to use the VFL code pattern, which makes it much more efficient to be proficient. Demo/cms/uploads/soft/131108/4196-13110q12116.zip
Source: Mozixiong's blog

Reprinted: AutoLayout of the VFL description