Allumez le feu UIViews dans une rangée avec Autolayout Visual Format Language

Question

Ne semble pas fonctionner comme prévu, car mes vues semblent s'empiler en pile les unes sur les autres ... Probablement à cause d'une erreur dans le format visuel ...

Donc j'ai mes 4 UIViews tel:

UIView *rowOne = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)]; 
[rowOne setBackgroundColor:[UIColor blueColor]]; 
[rowOne setTranslatesAutoresizingMaskIntoConstraints:NO]; 
[self.view addSubview:rowOne]; 

UIView *rowTwo = [[UIView alloc] initWithFrame:CGRectMake(0, 50, 50, 50)]; 
[rowTwo setBackgroundColor:[UIColor greenColor]]; 
[rowTwo setTranslatesAutoresizingMaskIntoConstraints:NO]; 
[self.view addSubview:rowTwo]; 

UIView *rowThree = [[UIView alloc] initWithFrame:CGRectMake(0, 100, 50, 50)]; 
[rowThree setBackgroundColor:[UIColor redColor]]; 
[rowThree setTranslatesAutoresizingMaskIntoConstraints:NO]; 
[self.view addSubview:rowThree]; 

UIView *rowFour = [[UIView alloc] initWithFrame:CGRectMake(0, 150, 50, 50)]; 
[rowFour setBackgroundColor:[UIColor yellowColor]]; 
[rowFour setTranslatesAutoresizingMaskIntoConstraints:NO]; 
[self.view addSubview:rowFour]; 

je les ajoute à un dictionnaire:

NSDictionary *views = NSDictionaryOfVariableBindings(rowOne, rowTwo, rowThree, rowFour); 

Je crée les contraintes:

NSString *rowsVerticalConstraintsString = @"V:|-[rowOne][rowTwo][rowThree][rowFour]-|"; 
NSString *rowOneHorizontalConstraintString = @"H:|-[rowOne]-|"; 
NSString *rowTwoHorizontalConstraintString = @"H:|-[rowTwo]-|"; 
NSString *rowThreeHorizontalConstraintString = @"H:|-[rowThree]-|"; 
NSString *rowFourHorizontalConstraintString = @"H:|-[rowFour]-|"; 

NSArray *rowsVerticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:rowsVerticalConstraintsString 
                      options:NSLayoutFormatAlignAllLeft 
                      metrics:nil 
                      views:views]; 

NSArray *rowOneHorizontalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:rowTwoHorizontalConstraintString 
                       options:NSLayoutFormatAlignAllLeft 
                       metrics:nil 
                       views:views]; 

NSArray *rowTwoHorizontalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:rowOneHorizontalConstraintString 
                       options:NSLayoutFormatAlignAllLeft 
                       metrics:nil 
                       views:views]; 

NSArray *rowThreeHorizontalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:rowThreeHorizontalConstraintString 
                       options:NSLayoutFormatAlignAllLeft 
                       metrics:nil 
                       views:views]; 

NSArray *rowFourHorizontalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:rowFourHorizontalConstraintString 
                       options:NSLayoutFormatAlignAllLeft 
                       metrics:nil 
                       views:views]; 

et ajouter les contraintes à la vue:

[self.view addConstraints:rowsVerticalConstraints]; 
[self.view addConstraints:rowOneHorizontalConstraint]; 
[self.view addConstraints:rowTwoHorizontalConstraint]; 
[self.view addConstraints:rowThreeHorizontalConstraint]; 
[self.view addConstraints:rowFourHorizontalConstraint]; 

Le comportement que je pense serait que les vues sont disposées à côte côté verticalement et étiré horizontalement, mais ils semblent se recouvrir l'un l'autre ...

Une idée de ce que je dois changer?

Answer 1

Remarque: lors de l'utilisation mise en page automatique, initWithFrame ont pas compact

Vos contraintes de mise en page n'ont pas la hauteur constraints.You peut régler 4 vues ont la même hauteur

NSString *rowsVerticalConstraintsString = @"V:|-[rowOne(==rowTwo)][rowTwo][rowThree(==rowTwo)][rowFour(==rowTwo)]-|"; 

Puis capture d'écran

En outre, vous pouvez définir la largeur pour être 150, hauteur 50

NSString *rowsVerticalConstraintsString = @"V:|-[rowOne(50)][rowTwo(50)][rowThree(50)][rowFour(50)]"; 
NSString *rowOneHorizontalConstraintString = @"H:|-[rowOne(150)]"; 
NSString *rowTwoHorizontalConstraintString = @"H:|-[rowTwo(150)]"; 
NSString *rowThreeHorizontalConstraintString = @"H:|-[rowThree(150)]"; 
NSString *rowFourHorizontalConstraintString = @"H:|-[rowFour(150)]"; 

Puis capture d'écran