ios - example - nslayoutconstraint swift 4

iOS: ¿Cómo se anima una nueva restricción de autodiseño(altura)

Question

Nunca he trabajado con restricciones de autodiseño antes. Tengo una pequeña aplicación nueva en la que estoy trabajando y me di cuenta de que las vistas de NIB están predeterminadas para el diseño automático. Entonces, pensé que aprovecharía la oportunidad para trabajar con él y tratar de descubrir a dónde iría Apple con esto.

Primer desafío:

Necesito cambiar el tamaño de un MKMapView y me gustaría animarlo a la nueva posición. Si hago esto de la manera en que estoy acostumbrado:

[UIView animateWithDuration:1.2f
     animations:^{
         CGRect theFrame = worldView.frame;
         CGRect newFrame = CGRectMake(theFrame.origin.x, theFrame.origin.y, theFrame.size.width, theFrame.size.height - 170);
         worldView.frame = newFrame;
}];

... entonces el MKMapView ''volverá'' a su altura original siempre que se actualice una vista de hermanos (en mi caso, se actualiza un título de [myUISegmentedControl setTitle:newTitle forSegmentAtIndex:0] ).

Entonces, lo que creo que quiero hacer es cambiar las restricciones de MKMapView de ser igual a la vista de la vista principal a ser relativa a la parte superior del UISegmentedControl que estaba cubriendo: V:[MKMapView]-(16)-[UISegmentedControl]

Lo que quiero es que la altura de MKMapView se acorte para que se muestren algunos controles debajo de la vista del mapa. Para hacerlo, creo que necesito cambiar la restricción de una vista fija de tamaño completo a una donde la parte inferior está restringida a la parte superior de un UISegmentedControl ... y me gustaría animarla a medida que la vista se reduce a un nuevo tamaño.

¿Cómo se puede hacer esto?

Editar - esta animación no está animando aunque la parte inferior de la vista se mueve hacia arriba 170 al instante:

    [UIView animateWithDuration:1.2f
         animations:^{
             self.nibMapViewConstraint.constant = -170;

    }];

y el nibMapViewConstraint está conectado en IB a la restricción de espacio vertical inferior.

Answer 1

Esto funciona para mí (iOS7 e iOS8 +). Haga clic en la restricción de diseño automático que le gustaría ajustar (en el constructor de la interfaz, por ejemplo, restricción superior). Luego haga de esto un IBOutlet;

@property (strong, nonatomic) IBOutlet NSLayoutConstraint *topConstraint;

Animar hacia arriba;

    self.topConstraint.constant = -100;    
    [self.viewToAnimate setNeedsUpdateConstraints]; 
    [UIView animateWithDuration:1.5 animations:^{
        [self.viewToAnimate layoutIfNeeded]; 
    }];

Animar a volver al lugar original

    self.topConstraint.constant = 0;    
    [self.viewToAnimate setNeedsUpdateConstraints];  
    [UIView animateWithDuration:1.5 animations:^{
        [self.viewToAnimate layoutIfNeeded];
    }];

Answer 2

Hay un muy buen tutorial de la propia manzana que explica cómo usar la animación con el autolayout. Siga este link y luego encuentre el video llamado "Diseño automático por ejemplo". Ofrece algunas cosas interesantes sobre el diseño automático y la última parte trata sobre cómo usar la animación.

Answer 3

He hecho esta pequeña demostración disponible . Muestra cómo las restricciones de diseño automático se pueden cambiar y animar en un ejemplo muy simple. Simplemente eche un vistazo a DemoViewController.m .

Answer 4

La mayoría de las personas usa el diseño automático para diseñar elementos en sus vistas y modificar las restricciones de diseño para crear animaciones.

Una forma fácil de hacerlo sin tener que codificar mucho es crear el UIView que desee animar en Storyboard y luego crear un UIView oculto donde desee que termine el UIView. Puede usar la vista previa en xcode para asegurarse de que ambas UIViews estén donde desea que estén. Después de eso, oculte el final UIView e intercambie las restricciones de diseño.

Hay un archivo pod para intercambiar restricciones de diseño llamado SBP si no desea escribirlo usted mismo.

Aquí hay un tutorial .

Answer 5

No es necesario utilizar más IBOutlet reference de IBOutlet reference de la restricción en lugar de esto, puede access directamente o update la restricción ya aplicada, ya sea mediante Programmatically o desde el Interface Builder en cualquier vista utilizando la biblioteca KVConstraintExtensionsMaster . Esta biblioteca también está gestionando el comportamiento Cumulative de NSLayoutConstraint .

Para agregar restricción de altura en containerView

 CGFloat height = 200;
 [self.containerView applyHeightConstrain:height];

Para actualizar la Restricción de altura de containerView con animación

[self.containerView accessAppliedConstraintByAttribute:NSLayoutAttributeHeight completion:^(NSLayoutConstraint *expectedConstraint){
        if (expectedConstraint) {
            expectedConstraint.constant = 100;

            /* for the animation */ 
            [self.containerView  updateModifyConstraintsWithAnimation:NULL];
      }
    }];

Answer 6

Después de actualizar su restricción:

[UIView animateWithDuration:0.5 animations:^{[self.view layoutIfNeeded];}];

Reemplace self.view con una referencia a la vista que contiene.