Укладка огней UIViews в строке с автоопределением Язык визуального отображения

Question

Итак, я хочу использовать Autolayout Visual Format Language для размещения 4 UIViews в горизонтальных рядах (сверху вниз, как строки в клавиатуре) ... но по какой-то причине он не работает похоже, работает так, как ожидалось, поскольку мои взгляды, кажется, заканчиваются в стеке друг на друга ... Возможно, из-за ошибки в визуальном формате ...

Итак, у меня есть 4 UIViews как например:

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]; 

добавить их в словарь:

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

создать ограничение:

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]; 

и добавить ограничения к виду:

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

Поведение, которое я ожидал бы, что бы взгляды изложены рядом друг вертикально и вытянуты горизонтально, но они, похоже, накладываются друг на друга ...

Любая идея, что мне нужно изменить?

Answer 1

Примечание: при использовании автоматической раскладки, initWithFrame не имеют компактный

Ваше расположение ограничений не имеют высоту constraints.You может установить 4 точки зрения имеют одинаковую высоту

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

Тогда скриншот

Кроме того, вы можете установить ширину, чтобы быть 150, высота 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)]"; 

Затем скриншот