Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visual Formatting Language in iOS

67 views

Published on

Visual Format Language for Autolayout in iOS Apps.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Visual Formatting Language in iOS

  1. 1. VFL For Auto layout Gagan Vishal Mishra
  2. 2. Apple provides VFL for handling the auto layout of the views added in a super view. VFL stands for “Visual Format Language”. VFS allows the concise building of the app layout using ASCII type art in string format. Writing a single line code, VFL can specify multiple constraints. This tutorial will be using a single below method Objective-C: + (NSArray *) constraintsWithVisualFormat:(NSString *) format options:(NSLayoutFormatOptions) opts metrics:(NSDictionary *) metrics views:(NSDictionary *) views Swift: NSLayoutConstraint.constraints(withVisualFormat: String, options: NSLayoutFormatOptions, metrics: [String: Any]? views: [String: Any])
  3. 3. We will be working on below method NSLayoutConstraint.constraints(withVisualFormat: String, options: NSLayoutFormatOptions, metrics: [String: Any]? views: [String: Any]) 1. Views: This dictionary argument contains each view referred in layout string. This dictionary contains a mapping of view to its name as below let dicotionaryOfView = [“view1”: view1, “view2”, view2,.,...] where view1, view2 are a subclass of UIView (label, image view etc.) In English ‘It creates a dictionary where the name of your variable is the key and variable is the object’. 2. Metrics: This is also a dictionary mapping between constants and their corresponding keys. It can be used to centralized numbers that can be used in layout operations. For example let metricsDict = [“width”: 200, “height”:230,” padding”: 20,…..]
  4. 4. 3. Options: It provides symmetricity & relation between views Added on super view. For example, in a horizontal layout, it would be common to align the tops and bottoms of all of the views in the VFL statement. For instance, we can pass [. AlignAllTop |. AlignAllBottom] in the argument label. Apple provides following option • AlignAllCenterX • AlignAllCenterY • AlignAllLeading • AlignAllTraining • AlignAllLeft • AlignAllRight • AlignAllTop • AlignAllBottom • AlignAllBaseline For more please go on Apple Documentation
  5. 5. 4. Format: This is the focus point of the topic. Before explaining we must be aware about the symbols in VFL a) H : For horizontal layout. It is optional b) V : For vertical Layout c) | : Represent super view by a pipe d) - : Standard spacing. Usually 8 points from super view. e) -C- : Non-standard spacing by C (constant) points f) == : Represents equality. Can be omitted. g) >+ :Greater than or equal to option. h) <= : Less than or equal to. i) [] : Views are enclosed within square brackets. j) @ : Use to represent priority of the added constraint. It has following three options i. 250 - Low ii. 750 – High iii. 1000 – Required
  6. 6. Don’t try to fit every facet of your layout into a single VFL string. All the method does is parse the VFL, make individual constraints and return them as an array. We have to be expressing at least one constraint though, otherwise the string is meaningless. Below are some samples 1. |-[yourView]-| : yourView must have standard spacing from left & right. 2. |-[yourView] : yourView has standard spacing from left. 3. | [ yourView] : yourView must be align to the left. 4. |-20.0- [ yourView]-20-| : YourView must be 20 points spacing from left & right edge of super view. 5. |- padding - [ yourView]- padding -| : YourView must be padding constant points spacing from left & right edge of super view. 6. [ yourView(width)] : View must be 200.0 wide (width taken from metricsDict). As we know ‘H’ optional so we cam omit. If we add H then expression will be H:|[ yourView(width)] 7. V:|-[ yourView (50.0)] : yourView must have height of 50.0 points and standard spacing from left edge of super view.
  7. 7. 8. |- [ yourViewFirst(yourViewSecond)]-[yourViewSecond]-| : yourViewFirst must be of width as yourViewSecond. yourViewFirst has standard spacing from left edge of super-view. yourViewSecond has standard spacing from left edge of super-view. yourViewFirst & yourViewSecond has standard spacing between them. 9. -[yourView]- : ?? Nothing. Meaningless but why? Do you have answer 
  8. 8. Let’s have examples format string H:|-[imageView(==viewInfo)]-20-[nameLabel(120)]-10@750-[viewInfo(>=50)]-| In above example 1. H: Represents horizontal spacing. 2. |-[imageView Represents standard spacing i.e. should be of 8 points from the left edge of super view. 3. (==viewInfo) Represents that imageView width must be equal to width of viewInfo. 4. ]-20-[ nameLabel Represents imageView trailing edge must be of 20 points from nameLabel. 5. (120) Represents nameLabel must be of width 120. 6. - 10@750- Represents nameLable should have trailing space of 20 from viewInfo with priority High (i.e. 750) 7. viewInfo(>=50) Represents viewInfo must have width greater than or equal to 50 points. 8. -| Represents standard spacing from right edge of super view.
  9. 9. Consider below example V:|-(==padding)-[imageView]->=0-[button]-(==padding)-| In above example padding is constant which is being passed as metrics 1. The top of the image view must be padding points from the top of the super view 2. The bottom of the image view must be greater than or equal to 0 points from the top of the button 3. The bottom of the button must be padding points from the bottom of the super view.

×