Introdução ao layout automático

Instalação ou configuração

Para usar o layout automático, precisamos habilitar um sinalizador booleano no storyboard. É mostrado na imagem abaixo. Depois disso, podemos usar o layout automático em nosso storyboard. Existe outra opção se queremos usar classes de tamanho ou não. A classe de tamanho também é uma opção útil no layout automático, que nos ajuda a projetar diferentes tamanhos de tela de dispositivos com elementos iguais ou diferentes. A imagem para a configuração vai aqui. É do painel do inspetor de arquivos do editor de propriedades no Xcode.

digite a descrição da imagem aqui

Adicionando um UIImageView ao centro da tela

Se você deseja adicionar um UIImageView ao centro da tela com largura e altura de 100 pixels, você precisa definir a restrição center x e center y constraint para o superview do UIImageView e largura, restrição de altura para o UIIMageView. Aqui está o código. Existe uma maneira de fazer isso no storyboard, mas eu escrevi em código porque é compreensível para essa situação na documentação.

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100.0, 100.0);
imageView.self.translatesAutoresizingMaskIntoConstraints = NO;

[imageView addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:100.0]];
[imageView addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:100.0]];
[superview addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0]];
[superview addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0]];

Usando a linguagem de formato visual

Existe uma maneira de simplificar a definição de layout automático para visualizações usando VFL. Pode parecer difícil no começo, mas na verdade é muito fácil de usar. Algumas definições primeiro:

  • | representa a supervisão
  • H: ou V: representam a orientação atual - horizontal ou vertical
  • os nomes das visualizações devem ser colocados entre colchetes
  • a altura e a largura da vista devem ser colocadas entre parênteses
  • as margens são especificadas entre as visualizações e cercadas por hífens
  • a prioridade para uma margem ou tamanho de visualização pode ser especificada com @

Exemplos de sintaxe de formato visual

  1. someView é anexado às bordas esquerda e direita de sua supervisão sem margens:

    H:|[someView]|
    
  2. someView é anexado ao topo com uma margem de 10 pontos e tem uma altura igual a value:

    V:|-(10)-[someView(value)]
    
  3. someView1 e someView2 têm duas margens definidas entre eles - value1 com prioridade de 900 e value2 com prioridade de 800:

    H:[someView1]-([email protected], [email protected])-[someView2]
    
  4. A altura de someView1 é igual à altura de someView2:

    V:[someView1(==someView2)]
    

Exemplo de código

Exemplo de visualização personalizada

Vamos definir uma nova visualização, que possui um campo de texto e dois botões com alturas iguais com margens entre eles e um rótulo abaixo. Os botões devem ter larguras iguais e o rótulo deve transbordar para a próxima linha se o conteúdo for longo o suficiente. Essa visualização deve ser dimensionada automaticamente de acordo com seu conteúdo nos eixos horizontal e vertical e centralizada no meio de sua supervisualização.

- (void)addView {

    // first lets define a container for our views
    UIView *container = [UIView new];
    // do not forget to disable autoresizing masks for autolayout views
    container.translatesAutoresizingMaskIntoConstraints = NO;
    container.backgroundColor = [UIColor grayColor];
    
    // now to the subviews. this is mostly boilerplate code:
    UITextField *textField = [UITextField new];
    textField.translatesAutoresizingMaskIntoConstraints = NO;
    textField.borderStyle = UITextBorderStyleRoundedRect;

    UIButton *button1 = [UIButton buttonWithType:UIButtonTypeSystem];
    button1.translatesAutoresizingMaskIntoConstraints = NO;
    [button1 setTitle:@"Send" forState:UIControlStateNormal];

    UIButton *button2 = [UIButton buttonWithType:UIButtonTypeSystem];
    button2.translatesAutoresizingMaskIntoConstraints = NO;
    [button2 setTitle:@"Cancel" forState:UIControlStateNormal];

    UILabel *label = [UILabel new];
    label.translatesAutoresizingMaskIntoConstraints = NO;
    // this line tells the label to let the text overflow to the next line if needed
    label.numberOfLines = 0;
    label.text = @"This label has relatively long text, that should take two lines.";
    
    // before adding any constraints the views should be present in the hierarchy
    [container addSubview:textField];
    [container addSubview:button1];
    [container addSubview:button2];
    [container addSubview:label];
    
    // now lets define two helper dictionaries, one for metrics of our view:
    NSDictionary *metrics = @{@"margin": @10, @"textFieldWidth": @160, @"buttonWidth": @44};
    // and the other for view bindings using a handy macro, which effectively creates a dictionary with variables of the same name:
    NSDictionary *bindings = NSDictionaryOfVariableBindings(textField, button1, button2, label);
    // lets define a horizontal format for the first row of views in a variable:
    NSString *horizontalFormat = @"H:|-(margin)-[textField(textFieldWidth)]-(margin)-[button1(==button2)]-(margin)-[button2]-(margin)-|";
    // this format defines margins of equal size between all views, fixed width for the textField and sets both buttons to have equal widths
    // lets add these constraints to our container:
    [container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:horizontalFormat options:0 metrics:metrics views:bindings]];
    // now lets define horizontal constraints for the second row, where we have the label:
    [container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(margin)-[label]-(margin)-|" options:0 metrics:metrics views:bindings]];
    // another relatively long visual format string:
    NSString *verticalFormat = @"V:|-(margin)-[textField]-(margin)-[label]-(margin)-|";
    // this format string defines vertical constraints for textField and label, and should also define the height of the container
    // adding these constraints to the container view:
    [container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:verticalFormat options:0 metrics:metrics views:bindings]];
    // what we have left are constraints for vertical positions of the buttons
    // lets attach them to the top of the container with a margin:
    [container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(margin)-[button1]" options:0 metrics:metrics views:bindings]];
    [container addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(margin)-[button2]" options:0 metrics:metrics views:bindings]];
    
    // the container is all set up, adding it to the superview:
    [self.view addSubview:container];
    
    // now lets position our container in its superview
    // you can not use dot notation in the bindings macro, so lets define a temp variable for the superview:
    UIView *superview = self.view;
    
    // positioning a view in the center of its superview is not so straightforward
    // we will use a trick from this answer: http://stackoverflow.com/a/14917695/934710
    NSDictionary *containerBindings = NSDictionaryOfVariableBindings(superview, container);
    // width constraint from horizontal format is not part of the trick, but is necessary to constrain container width
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[superview]-(<=1)-[container(<=superview)]" options:NSLayoutFormatAlignAllCenterY metrics:nil views:containerBindings]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[superview]-(<=1)-[container]" options:NSLayoutFormatAlignAllCenterX metrics:nil views:containerBindings]];

}