將autoayout生成的子視圖添加到父視圖

Question

這是我在自動布局中的第一個程序。

基本問題：我不能將子視圖（一個uibutton和uilabel）添加到一個超級視圖（一個容器視圖）。子視圖只是脫離了超級視圖的約束，或者說沒有被裁剪。

我添加了詳細注釋，以更好地理解代碼。

我想要的是：無論容器視圖在哪里，我都不在乎，但是我希望兩個子視圖都被添加到容器視圖中，各方面的填充為0。

- (void)viewDidLoad {
[super viewDidLoad];

**//create a uibutton with dynamic text(MAX_WIDTH=500, height = 60) and uilabel of fixed size(60, 60).Done
//create pin of fixed 2 pixes between UIButton and UILabel.Done
//put above created views in container view, it will max to 562 width and fix 60 height, so UIButton and UIlabel should fill container view with no top, bottom, left and right.Fail**

//this will be containing my button and my label
UIView *superview = self.view;

UIView *containerView = [UIView new];
[containerView setBackgroundColor:[UIColor blackColor]];
[containerView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [superview addSubview:containerView];
//this will be containing my button and my label

UILabel *mylabel = [[UILabel alloc]init];
[mylabel setBackgroundColor:[UIColor redColor]];
[mylabel setTranslatesAutoresizingMaskIntoConstraints:NO];
mylabel.text = @"MyLabel";

UIButton *mybutton = [UIButton
                      buttonWithType:UIButtonTypeRoundedRect];
[mybutton setTitle:@"My Button ye ye yey yeyeyye yeyey"
          forState:UIControlStateNormal];
[mybutton setTranslatesAutoresizingMaskIntoConstraints:NO];
[mybutton setBackgroundColor:[UIColor greenColor]];

[containerView addSubview:mylabel];
[containerView addSubview:mybutton];


NSDictionary * views = NSDictionaryOfVariableBindings(mybutton,mylabel);
//create pin of fixed 2 pixes between UIButton and UILabel.Done
NSArray * horizontalConstraintsforbuttons = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[mybutton(<=500)]-2-[mylabel(60)]" options:0 metrics:nil views:views];
NSArray * heightConstraintforbutton = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[mybutton(==60)]" options:0 metrics:nil views:views];
NSArray * heightConstraintforLabel = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[mylabel(==60)]" options:0 metrics:nil views:views];

[containerView addConstraints:horizontalConstraintsforbuttons];
[containerView addConstraints:heightConstraintforbutton];
[containerView addConstraints:heightConstraintforLabel];


//container view specific constraints//**it must be ideally <=562, but then this container view disappears, please hep to fix** 
NSArray *widthConstraintForConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[containerView(==560)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(containerView)];

NSArray *heightConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[containerView(==60)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(containerView)];

[superview addConstraints:widthConstraintForConstraint];
[superview addConstraints:heightConstraint];


[superview addConstraint:[NSLayoutConstraint constraintWithItem:containerView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeCenterX multiplier:1.0f constant:0.0]];

[superview addConstraint:[NSLayoutConstraint constraintWithItem:containerView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeCenterY multiplier:1.0f constant:0.0]];

}

有什么建議嗎？ :)

Answer 1

您的每個子視圖的VFL都缺少與父視圖的關系。 自動布局假設您的約束應與頂級視圖（即您定義為self.view 。

這是您的問題所在。

NSDictionary * views = NSDictionaryOfVariableBindings(mybutton,mylabel);
//create pin of fixed 2 pixes between UIButton and UILabel.Done
NSArray * horizontalConstraintsforbuttons = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[mybutton(<=500)]-2-[mylabel(60)]" options:0 metrics:nil views:views];
NSArray * heightConstraintforbutton = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[mybutton(==60)]" options:0 metrics:nil views:views];
NSArray * heightConstraintforLabel = [NSLayoutConstraint constraintsWithVisualFormat

首先，將containerView添加到該字典中，以便可以在VFL中引用它：

NSDictionary *views = NSDictionaryOfVariableBindings(mybutton,
                                                         mylabel,
                                                         containerView);

然后在您的VFL中，使用管道運算符（ | ）告訴自動布局將子視圖相對於其直接父級放置。

NSArray * horizontalConstraintsforbuttons = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[mybutton(<=500)]-2-[mylabel(60)]" options:0 metrics:nil views:views];
NSArray * heightConstraintforbutton = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[mybutton(==60)]|" options:0 metrics:nil views:views];
NSArray * heightConstraintforLabel = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[mylabel(==60)]|" options:0 metrics:nil views:views];

我不確定要在這些視圖的水平位置上做什么，但是這應該能讓您重回正軌。 我也建議您閱讀有關VFL的文章 。

---

編輯

我有點了解您現在要做什么。 首先，在使用VFL和自動布局時，您的值應為1倍。 例如，寬度560大於可能的最大iPhone屏幕：

NSArray *widthConstraintForConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[containerView(==560)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(containerView)];

假設您只是想讓containerView匹配設備的寬度。 看起來像這樣：

@"H:|[containerView]|"

在containerView之外的管道運營商說，你想領先的（左側）和后（右）的空間containerView是與上海華齊平。

或者，假設您希望視圖略小於設備的寬度（ 560/2 ）。

@"H:[containerView(==280)]"

您已經將containerView在其他位置水平居中，因此它將顯示在其superview的中心。

然后，讓我們假設您希望紅色標簽的寬度（實際上）為60，綠色按鈕的寬度小於或等於250（ 500/2 ）。 看起來像這樣：

@"H:|[mybutton(<=250)]-2-[mylabel(==60)]|"

由於這些是containerView子視圖（我們告訴過要進行自動布局），因此管道操作員說您要

1. mybutton要與containerView齊平的前導空間（左側）。
2. mylabel的尾部空間（右側）與containerView齊平。

由於mylabel具有60的寬度， mybutton會變狹（感謝<=以滿足約束條件，這取決於寬度containerView 。