Simplificando Auto Layout via código

Uma abordagem simples utilizando formato visual (VFL)

Alécio Gomes

25 anosDesenvolvedor desde 2006Fundador da Sparta Labs

frame nunca mais!

translatesAutoresizingMaskIntoConstraints

UIView *view = [UIView new]; view.translatesAutoresizingMaskIntoConstraints = NO; view...

@implementation UIView (Autolayout)

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

@end

A maneira difícil

- (void)loadView { self.view = [UIView new];

UIView *myView = [UIView autolayoutView]; [self.view addSubview:myView];

...

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:

cê ta de brinks né?

Visual Format Language

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

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};

metrics

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

options

NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom

Em um layout horizontal:

NSLayoutFormatAlignAllLeft | NSLayoutFormatAlignAllRight

Em um layout vertical:

NSLayoutFormatAlignAllCenterY

Em um layout horizontal:

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:

format (spacing)

|-30.0-[button]-30.0-|

Espaçamento pode ser explícito:

NSDictionary *metrics = @{@“spacing”: @30}; |-spacing-[button]-spacing-|

E constantizado:

format (size)

[label(200)] [label(labelWidth)]

O size pode ser explícito:

|-[button1(button2)]-[button2]-|

Ou referenciado:

DemoDisponível em: https://github.com/CocoaHeadsBNU/VFL-sample

Conclusão

• Conceito simples de aprender

• Flexível

• Porém limitado (constantes, ratio e center)

Dúvidas?

Obrigado!

aleciogomes

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)