ios - Autolayout Visual Format Language を使用して火の UIView を一列にレイアウトする

Question

したがって、を使用しAutolayout Visual Format Languageて 4UIViewsを水平方向の行 (キーボードの行のように上から下へ) に配置したいのですが、何らかの理由で、ビューが互いの上にスタック...おそらくビジュアルフォーマットの間違いが原因です...

だから私は私の4UIViewsをそのまま持っています：

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

私が期待する動作は、ビューが垂直に並べて配置され、水平に引き伸ばされることですが、それらは互いに重なっているように見えます...

何を変更する必要があるか考えていますか？