simplificando auto layout via código

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)