web-dev-qa-db-fra.com

Modifications animées UIView avec contraintes de disposition automatique

Disons que j'ai un projet qui ressemble à ceci:

enter image description here

Il existe deux UIViews - l'un appelé yellowBox et l'autre appelé redBox. Les contraintes de disposition automatique imposent que le yellowBox soit à 60 points du haut de la vue d'ensemble avec 350 points d'espaces de début et de fin (c'est-à-dire à gauche et à droite de la vue). redBox a les mêmes contraintes d'espace de début et de fin. Il y a une contrainte d'espace vertical entre les deux cases de 0 pour indiquer que le bas du yellowBox doit toujours être directement au-dessus du redBox.

Lorsque l'utilisateur appuie sur le bouton Développer la boîte jaune, j'aimerais que la hauteur du yellowBox augmente et, par conséquent, le redBox se déplace vers le bas pour continuer à satisfaire la contrainte d'espace vertical (que le yellowBox est toujours au-dessus de redBox). Voici le code d'animation:

- (IBAction)expandYellowBox:(id)sender {

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

}

Cependant, je n'ai pas pu faire fonctionner cela correctement. Comme vous pouvez le voir par l'icône rouge, il y a un problème avec les contraintes pour le moment:

enter image description here

ce qui est assez juste, car la disposition automatique ne permet pas de connaître la hauteur des boîtes. Cependant, je ne sais pas comment résoudre ce problème de manière à permettre le redimensionnement et le déplacement des boîtes. Par exemple, si je spécifie une contrainte de hauteur sur le yellowBox, cela l'empêchera d'être redimensionné. Si je fixe la contrainte de hauteur à supérieure ou égale (pour permettre à la hauteur de yellowBox d'augmenter), alors j'obtiens une contrainte différente Erreur:

enter image description here

Toutes les contraintes ont été établies en utilisant Xcode dans le storyboard - aucune n'a été écrite en code.

Toute aide grandement appréciée.

EDIT: Il s'avère que le yellowBox grandit lorsque l'on clique sur le bouton - c'est juste que je ne pouvais pas le dire car il apparaît derrière le redBox. Je ne l'ai remarqué qu'après avoir cliqué dessus environ quatre fois et il a commencé à apparaître au bas du redBox. Cependant, la même question demeure: comment faire en sorte que le redBox reste toujours au bas du yellowBox.

ioscocoa-touchuiviewautolayout
27
Skoota

Essayez-le comme mentionné par shwet-solanki , mais ajoutez la ligne suivante après avoir changé la contrainte:

[self.view layoutIfNeeded];

l'IBAction ressemblerait à:

- (IBAction)expandYellowBox:(id)sender {

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

Où yellowBoxHeightConstraint est le IBOutlet pour la contrainte de hauteur de yellowBox. J'espère que cela t'aides.

82
GoGreen
  1. Ajouter une contrainte de hauteur aux deux vues
  2. Créer un IBOutlet pour la contrainte de hauteur de la boîte jaune
  3. Maintenant, au lieu de modifier la hauteur de la boîte jaune dans l'événement bouton enfoncé, modifiez plutôt la valeur de la contrainte de hauteur. c'est-à-dire que votre nom de contrainte IBOutlet est yellowBoxHeightConstraint, puis yellowBoxHeightConstraint.constant += 50;

J'espère que cela fonctionne pour toi.

4
Shwet Solanki
//
//  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

cliquez sur Événement 

- (IBAction)buttClicked:(id)sender {


    self.heightConstrain.constant=100;


}

ici, vous devez définir le heightConstrain pour le bouton jaune, puis créer une sortie de référence pour ce bouton, puis mettre à jour le heightConstrain pour mettre à jour la taille de ce bouton, il déplacera automatiquement votre bouton rouge vers le bas.

https://github.com/vasanth3008/AutoLayoutHeighDemo

référer mon exemple de projet de démonstration

1
CoolMonster