Autolayout and VFL, AutolayoutVFL

Source: Internet
Author: User

Autolayout and VFL, AutolayoutVFL
Autolayout, started at iOS6.0 I. When is autolayout suitable?1. Irresponsible wall riding statement: as more and more apple devices are available, your applications should all use al. (And use sb) 2. Depending 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 ). Al can be of great help. 3. Mac OS applications. Now all are iOS. The size of the mac app window varies. Al is more appropriate. 4. iPad applications supporting multi-screen conversion. (Is there a need to support multi-direction iphone scenarios? So long ?) 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 the code writing layout, we recommend that you continue to use it and also learn al. I feel that there is no difference in workload between al and traditional layout. However, VFL will be greatly improved if you are familiar with it.Ii. Basic Theory of autolayoutThe 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.3. autolayout under xibIt seems that al and xib layout models are born together. With xib and al, the view layout is very simple and easy. Programming immediately becomes a connected jigsaw puzzle game by the artist. After xib OR sb is enabled, select view (s ). Select menu Editor and Pin. Sub-menu items are available constraints. Width: fixed its own Width Height :... H-Spacing: the horizontal Spacing between two views is fixed :... The four following are respectively the left, right, top, and bottom distance Widths Equally between views and superviews: the two views are kept in the same width Heights Equally :... You can edit a constraint in the toolbar in the lower-right corner of the xib interface. Select a constraint and enable inspector on the right bar. You can modify the value. (This value is the offset between views) and priority. Slowly dragging your hands. This is not a dummies tutorial. Point in place, research by yourself. The al 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. (However, the interface layout may be incorrect. you can adjust it slowly. Now, the editor is still full of alert and can work without confusing constraint .) There is also a resolve method to solve the constraint problem, sorry, I won't.Iv. Use autolayout for encodingCommon applications with few pages. Xib/sb plus al. Drag and Drop. You can complete the UI work in entertainment. Al does offer a lot of convenience. But how can the obsessive-compulsive disorder programmers endure this very bad way for many years. (Drag blocks? Without coding? It seems that I haven't done anything in a day .) 1. Visual format language (should not be a language) Apple engineers are very fond of, and have invented this kind of dummies. It seems to be a parsing method. Apple's official documents provide few documents and examples of pitfalls. (I didn't see the video, but I don't know how it works.) Some online students also wrote a few cool-hearted codes. Did you learn the rhythm of calculus after learning 1 + 1? Do not write clearly. I read a few articles from the honest foreigners. I have learned something and shared it with you. It's just a basic level. With this, code writing should be fine. I don't want to go deep. I hope to share it with more loving cool people. In the program, VFL is supported:

 
 
  1. + (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;   
-It returns a constraint.-format, which is your VFL string. -Opts click the header file to view it. In some cases, it will be used. -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. And so on. -Views are all views that require a constraint relationship. (This can also be one) 2. When the VFL example is used to write a vfl string, you have to imagine the rationality of the picture. Unreasonable constraint may cause the program to run an error or crash. Just write a few
 
 
  1. NSDictionary *dict1 = NSDictionaryOfVariableBindings(_boxV,_headerL,_imageV,_backBtn,_doneBtn);   
  2. NSDictionary *metrics = @{@"hPadding":@5,@"vPadding":@5,@"imageEdge":@150.0};   
  3. NSString *vfl = @"|-hPadding-[_boxV]-hPadding-|";   
  4. NSString *vfl0 = @"V:|-25-[_boxV]";   
  5. 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] Do not write H/V to indicate horizontal orientation. spacing can be fixed or writable>/<. 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. (The Ghost knows what it needs, let's look at it by yourself) 5) after writing it, add the constraint to the superview:
 
 
  1. NSString *vfl1 = @"|-hPadding-[_headerL]-hPadding-|";   
  2. [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl1 options:0 metrics:metrics views:dict1]];   
6) Another api is used to generate 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 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. 5. Problems in actual operationsThe above are all theories, and attention should be paid to some strange problems in world operations. This section is the focus. In the xib mode, there is nothing to note about. In the xib mode, report the warning message. I don't know how to do it. Everything works. In the encoding mode, before 1. addConstraint (s), the view should be uploaded to the addSubView. 2. Do not write frame3. disable AutoresizeingMask for necessary views. [_ AView layout: NO]; 4. Write linebreakMode for UILabel line feed and numberOfLines (iOS7.0 seems to be 1 by default). 5. Add preferredMaxLayoutWidth for UILabel to line feed. 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 al. Therefore, you don't need to write this:
 
 
  1. [objc] view plaincopy 
  2. /*  
  3.     if([[UIDevice currentDevice].systemVersion floatValue]<7.0){  
  4.         CGSize titleS = [title sizeWithFont:[_headerL font]  
  5.                            constrainedToSize:CGSizeMake(270.0, CGFLOAT_MAX)  
  6.                                lineBreakMode:NSLineBreakByWordWrapping];  
  7.           
  8.         _headerL.frame = CGRectMake(_headerL.frame.origin.x, _headerL.frame.origin.y,  
  9.                                     _headerL.frame.size.width, titleS.height);  
  10.     }else{  
  11.         CGRect titleR = [title boundingRectWithSize:CGSizeMake(270.0, CGFLOAT_MAX)  
  12.                                             options:NSStringDrawingUsesLineFragmentOrigin  
  13.                                          attributes:nil  
  14.                                             context:nil];  
  15.         headerL.frame = CGRectMake(_headerL.frame.origin.x, _headerL.frame.origin.y,  
  16.                                    _headerL.frame.size.width, titleR.size.height);  
  17.     }  
  18.     */   
 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.