ios - son - que formato de video tiene iphone

Centrar una vista en su superview utilizando el lenguaje de formato visual

Question

Empecé a aprender AutoLayout para iOS y eché un vistazo al lenguaje de formato visual.

Todo funciona bien, excepto por una cosa: simplemente no puedo obtener una vista para centrarme en su supervista.
¿Es esto posible con VFL o necesito crear una restricción manualmente?

Answer 1

Absolutamente posible fue capaz de hacerlo así:

[NSLayoutConstraint constraintsWithVisualFormat:@"H:[view]-(<=1)-[subview]"
                                        options:NSLayoutFormatAlignAllCenterY
                                        metrics:nil
                                          views:NSDictionaryOfVariableBindings(view, subview)];

Aprendí esto desde https://github.com/evgenyneu/center-vfl Código arriba de la sub-vista de centros a la vista por Y obviamente.

Swift3:

        NSLayoutConstraint.constraints(withVisualFormat: "H:[view]-(<=1)-[subview]",
                                       options: .alignAllCenterY,
                                                       metrics: nil,
                                                       views: ["view":self, "subview":_spinnerView])

Answer 2

Actualmente, no, no parece que sea posible centrar una vista en la supervista utilizando solo VFL. Sin embargo, no es tan difícil hacerlo con una sola cadena VFL y una única restricción adicional (por eje):

VFL: "|-(>=20)-[view]-(>=20)-|"

[NSLayoutConstraint constraintWithItem:view
                             attribute:NSLayoutAttributeCenterX
                             relatedBy:NSLayoutRelationEqual
                                toItem:view.superview
                             attribute:NSLayoutAttributeCenterX
                            multiplier:1.f constant:0.f];

Uno podría pensar que simplemente sería capaz de hacer esto (que es lo que inicialmente pensé y probé cuando vi esta pregunta):

[NSLayoutConstraint constraintsWithVisualFormat:@"|-(>=20)-[view(==200)]-(>=20)-|"
                                 options: NSLayoutFormatAlignAllCenterX | NSLayoutFormatAlignAllCenterY
                                 metrics:nil
                                   views:@{@"view" : view}];

Intenté muchas variaciones diferentes de lo anterior tratando de doblarlo a mi voluntad, pero esto no parece aplicarse a la supervista incluso cuando explícitamente tiene dos cadenas VFL separadas para ambos ejes ( H:|V: :). Luego comencé a tratar de aislar exactamente cuando las opciones se aplican al VFL. Aparentemente no se aplican a la supervista en el VFL y solo se aplicarán a las vistas explícitas que se mencionan en la cadena VFL (lo cual es decepcionante en ciertos casos).

Espero que en el futuro, Apple agregue algún tipo de nueva opción para que las opciones de VFL tengan en cuenta la supervista, incluso si solo lo hace cuando hay una única vista explícita además de la supervista en el VFL. Otra solución podría ser otra opción aprobada en el VFL que diga algo así como: NSLayoutFormatOptionIncludeSuperview .

Huelga decir que aprendí mucho sobre VFL tratando de responder esta pregunta.

Answer 3

Agregue el código siguiente y tenga su botón en el centro de la pantalla. Absolutamente posible.

[self.view addConstraints:[NSLayoutConstraint
                           constraintsWithVisualFormat:@"H:|-[button]-|"
                           options:NSLayoutFormatAlignAllCenterY
                           metrics:0
                           views:views]];

[self.view addConstraints:[NSLayoutConstraint
                           constraintsWithVisualFormat:@"V:|-[button]-|"
                           options:NSLayoutFormatAlignAllCenterX
                           metrics:0
                           views:views]];

Answer 4

Creo que es mejor crear restricciones manualmente.

[superview addConstraint:
 [NSLayoutConstraint constraintWithItem:view
                              attribute:NSLayoutAttributeCenterX
                              relatedBy:NSLayoutRelationEqual
                                 toItem:superview
                              attribute:NSLayoutAttributeCenterX
                             multiplier:1
                               constant:0]];
[superview addConstraint:
 [NSLayoutConstraint constraintWithItem:view
                              attribute:NSLayoutAttributeCenterY
                              relatedBy:NSLayoutRelationEqual
                                 toItem:superview
                              attribute:NSLayoutAttributeCenterY
                             multiplier:1
                               constant:0]];

Ahora podemos usar NSLayoutAnchor para definir programáticamente NSLayoutAnchor :

(Disponible en iOS 9.0 y posterior)

view.centerXAnchor.constraint(equalTo: superview.centerXAnchor).isActive = true
view.centerYAnchor.constraint(equalTo: superview.centerYAnchor).isActive = true

Recomiendo usar SnapKit , que es un DSL para hacer Auto Layout fácil en iOS y macOS.

view.snp.makeConstraints({ $0.center.equalToSuperview() })

Answer 5

En lugar de usar VFL, puede hacer esto fácilmente en el constructor de interfaz. En el guión gráfico principal, presione Ctrl + clic en la vista que desea centrar. Arrastre a la supervista (mientras mantiene presionado ctrl) y seleccione "Center X" o "Center Y". Sin código necesario.

Answer 6

Gracias a la respuesta de @Evgenii, creo un ejemplo completo en gist:

centre el cuadrado rojo verticalmente con altura personalizada

https://gist.github.com/yallenh/9fc2104b719742ae51384ed95dcaf626

Puede centrar una vista verticalmente usando VFL (que no es muy intuitivo) o usar restricciones manualmente. Por cierto, no puedo combinar tanto centerY como height en VFL como:

"H:[subView]-(<=1)-[followIcon(==customHeight)]"

En la solución actual, las restricciones VFL se agregan por separado.

Answer 7

Lo que se tiene que hacer es que la supervista se deba declarar en el diccionario. En lugar de usar | usted usa @{@"super": view.superview}; .

Y NSLayoutFormatAlignAllCenterX para vertical y NSLayoutFormatAlignAllCenterY para horizontal como opciones.

Answer 8

Para aquellos que vinieron aquí para una solución basada en Interface Builder (Google me guía aquí), simplemente agregue restricciones de ancho / altura const, y seleccione la subvista -> control de arrastre a su superview -> seleccione "center vertical / horizontally en superview".

Answer 9

Puede usar vistas adicionales.

NSDictionary *formats =
@{
  @"H:|[centerXView]|": @0,
  @"V:|[centerYView]|": @0,
  @"H:[centerYView(0)]-(>=0)-[yourView]": @(NSLayoutFormatAlignAllCenterY),
  @"V:[centerXView(0)]-(>=0)-[yourView]": @(NSLayoutFormatAlignAllCenterX),
};
NSDictionary *views = @{
  @"centerXView": centerXView, 
  @"centerYView": centerYView, 
  @"yourView": yourView,
};
 ^(NSString *format, NSNumber *options, BOOL *stop) {
     [superview addConstraints:
      [NSLayoutConstraint constraintsWithVisualFormat:format
                                              options:options.integerValue
                                              metrics:nil
                                                views:views]];
 }];

Si lo quieres ordenado, entonces centerXView.hidden = centerYView.hidden = YES; .

PD: No estoy seguro de poder llamar a las vistas adicionales "marcadores de posición", porque el inglés es mi segundo idioma. Se apreciará si alguien me puede decir eso.

Answer 10

Sé que no es lo que quieres, pero por supuesto puedes calcular los márgenes y usarlos para crear la cadena de formato visual;)

De todos modos, no. Desafortunadamente, no es posible hacer eso ''automáticamente'' con VFL, al menos no todavía.

Answer 11

Sí, es posible centrar una vista en su supervista con el lenguaje de formato visual. Tanto vertical como horizontalmente Aquí está la demostración:

https://github.com/evgenyneu/center-vfl

Answer 12

Sólo necesito decir que puedes usar esto en lugar de restricciones:

child.center = [parent convertPoint:parent.center fromView:parent.superview];

Answer 13

@ igor-muzyka respuesta en Swift :

NSLayoutConstraint.constraintsWithVisualFormat("H:[view]-(<=1)-[subview]", 
                                               options: .AlignAllCenterY,
                                               metrics: nil,
                                               views: ["view":view, "subview":subview])