create - UIView cambios animados con restricciones de diseño automático

uikit ios

Question

Digamos que tengo un proyecto que se parece a lo siguiente:

Hay dos UIView s: una llamada yellowBox y la otra llamada redBox . Las restricciones de diseño automático dictan que el yellowBox está a 60 puntos desde la parte superior de la vista de supervisión con 350 puntos en los espacios al principio y al final (es decir, a la izquierda y a la derecha de la vista). El redBox tiene las mismas restricciones de espacio redBox y final. Hay una restricción de espacio vertical entre las dos casillas de 0 para indicar que la parte inferior de la yellowBox siempre debe estar directamente encima de la redBox .

Cuando el usuario toca el botón Expandir cuadro amarillo, me gustaría que aumentara la altura del yellowBox y, como resultado, el redBox mueve hacia abajo para continuar satisfaciendo la restricción de espacio vertical (que el yellowBox siempre está en la parte superior del redBox ). Aquí está el código de animación:

- (IBAction)expandYellowBox:(id)sender {

    [UIView animateWithDuration:0.5
                     animations:^{
                         CGRect newFrame = self.yellowBox.frame;
                         newFrame.size.height += 50;
                         self.yellowBox.frame = newFrame;
                     }];

}

Sin embargo, no he podido hacer que esto funcione correctamente. Como puede ver con el icono rojo, hay un problema con las restricciones en este momento:

lo cual es justo, ya que no hay forma de que el diseño automático sepa la altura de las cajas. Sin embargo, no sé cómo resolver este problema de tal manera que permita que las cajas cambien de tamaño y se muevan. Por ejemplo, si especifico una restricción de altura en el yellowBox , eso evitará que se redimensione. Si configuro la restricción de altura para que sea mayor o igual (para permitir que yellowBox altura de yellowBox ), obtengo un error de restricción diferente:

Todas las restricciones se han establecido utilizando Xcode en el guión gráfico, ninguna se ha escrito en código.

Cualquier ayuda muy apreciada.

EDITAR: Al yellowBox , el yellowBox está creciendo cuando se hace clic en el botón; es solo que no pude ver porque aparece detrás del redBox . Solo lo noté después de hacer clic alrededor de cuatro veces y comenzó a aparecer en la parte inferior de la redBox . Sin embargo, la misma pregunta sigue siendo: cómo hacer que el redBox se adhiera siempre al fondo del yellowBox .

Answer 1

1. Añadir restricción de altura a ambas vistas
2. Crear un IBOutlet para la restricción de altura de yellowbox
3. Ahora, en lugar de cambiar la altura de yellowbox en el evento de botón presionado, cambie el valor de la restricción de altura. es decir, suponga que su nombre de restricción IBOutlet es yellowBoxHeightConstraint, luego yellowBoxHeightConstraint.constant += 50;

Espero que esto funcione para usted.

Answer 2

Inténtelo como lo menciona shwet-solanki , pero agregue la siguiente línea después de cambiar la restricción:

[self.view layoutIfNeeded];

La acción de IBA sería:

- (IBAction)expandYellowBox:(id)sender {

[UIView animateWithDuration:0.5
                 animations:^{
                     self.yellowBoxHeightConstraint.constant += 50;
                     [self.view layoutIfNeeded];
                 }];
}

Donde yellowBoxHeightConstraint es el IBOutlet para la restricción de altura de yellowBox . Espero que esto ayude.

Answer 3

//
//  WPViewController.h
//  AutoLayoutTEst
//
//  Created by VASANTH K on 09/01/14.
//  
//

#import <UIKit/UIKit.h>

@interface WPViewController : UIViewController
@property (strong, nonatomic) IBOutlet UIButton *button1;
- (IBAction)buttClicked:(id)sender;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *heightConstrain;

@property (strong, nonatomic) IBOutlet UIButton *button2;
@end

haga clic en evento

- (IBAction)buttClicked:(id)sender {


    self.heightConstrain.constant=100;


}

aquí, debe configurar el heightConstrain de heightConstrain para el botón amarillo y luego crear una salida de referencia para ese botón, luego actualizar el heightConstrain de heightConstrain para actualizar el tamaño de ese botón, que moverá automáticamente el botón rojo hacia abajo.

https://github.com/vasanth3008/AutoLayoutHeighDemo

refiera mi muestra de proyecto de demostración