O documento apresenta uma abordagem simples para layout de interfaces utilizando o Visual Format Language (VFL) no AutoLayout do iOS, permitindo definir ancoragens e espaçamentos de views via código de forma declarativa ao invés de usar constraints individuais. O VFL representa views e espaçamentos em strings e permite definir métricas e opções de alinhamento de forma flexível. Um exemplo demonstra como ancorar botões com espaçamentos explícitos ou referenciados a constantes utilizando o VFL.

1. Simplificando Auto
Layout via código
Uma abordagem simples utilizando formato visual (VFL)

2. Alécio Gomes
25 anos
Desenvolvedor desde 2006
Fundador da Sparta Labs

3. frame nunca mais!

4. translatesAutoresizingMaskIntoConstraints
UIView *view = [UIView new];
view.translatesAutoresizingMaskIntoConstraints = NO;
view...
@implementation UIView (Autolayout)
+ (id)autolayoutView
{
UIView *view = [self new];
view.translatesAutoresizingMaskIntoConstraints = NO;
return view;
}
@end

5. A maneira difícil
- (void)loadView {
self.view = [UIView new];
UIView *myView = [UIView autolayoutView];
[self.view addSubview:myView];
...

6. A maneira difícil
+ (NSLayoutConstraint *)
[NSLayoutConstraint constraintWithItem:myView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeft
multiplier:1
constant:10]];
Para ancorar a esquerda:

7. cê ta de
brinks né?

8. Visual Format Language
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format
options:(NSLayoutFormatOptions)opts
metrics:(NSDictionary *)metrics
views:(NSDictionary *)views

9. views
// São todos a mesma coisa
NSDictionaryOfVariableBindings(v1, v2, v3);
[NSDictionary dictionaryWithObjectsAndKeys:v1, @“v1”,
v2, @“v2”,
v3, @“v3”, nil];
@{@“v1”: v1, @“v2”: v2, @“v3": v3};

10. metrics
NSDictionary *metrics = @{@"buttonWidth":@200.0};

11. options
NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom
Em um layout horizontal:
NSLayoutFormatAlignAllLeft | NSLayoutFormatAlignAllRight
Em um layout vertical:
NSLayoutFormatAlignAllCenterY
Em um layout horizontal:

12. format
[label]
Views são representadas dentro de colchetes:
|A superview é representada por um pipe:
|-[label]-|
Espaçamento são representadas por um hífen:
V:|-[label]-|
Orientação:

13. format (spacing)
|-30.0-[button]-30.0-|
Espaçamento pode ser explícito:
NSDictionary *metrics = @{@“spacing”: @30};
|-spacing-[button]-spacing-|
E constantizado:

14. format (size)
[label(200)]
[label(labelWidth)]
O size pode ser explícito:
|-[button1(button2)]-[button2]-|
Ou referenciado:

15. Demo
Disponível em: https://github.com/CocoaHeadsBNU/VFL-sample

16. Conclusão
• Conceito simples de aprender
• Flexível
• Porém limitado (constantes, ratio e center)

17. Dúvidas?

18. Obrigado!
aleciogomes

19. Fontes/Further Reading
• https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/
AutolayoutPG/VisualFormatLanguage/VisualFormatLanguage.html
• http://commandshift.co.uk/blog/2013/01/31/visual-format-language-for-autolayout/
• http://code.tutsplus.com/tutorials/introduction-to-the-visual-format-language--cms-22715
(Swift)