将autoayout生成的子视图添加到父视图

Question

这是我在autolayout中的第一个程序。

基本问题：我无法将子视图（uibutton和uilabel）添加到superview（容器视图）.Subviews只是超级视图的绑定或说没有剪切。

我已经添加了详细评论，以便更好地理解代码。

我想要的是什么： 我不关心容器视图，但我希望两个子视图都添加到containerview中，所有方面都有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都缺少与父视图的关系。 Autolayout假设您的约束应该与顶级视图相关 - 您定义为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中，使用管道运算符（|）告诉autolayout将您的子视图与其直接父级相关联。

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

我不完全确定你要对这些视图的水平位置做些什么，但这应该让你回到正轨。我也建议您阅读this post on VFL。

修改

我有点想知道你现在要做什么。首先，在使用VFL和自动布局时，将您的值基于 1x 。例如，宽度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水平居中，所以它会出现在它的超级视图的中心。

然后我们假设您希望红色标签（实际上）宽度为60，绿色按钮的宽度小于或等于250（500/2）。这看起来像这样：

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

由于这些是containerView的子视图（我们之前告诉他们要自动布局），管道运营商说你想要

1. mybutton的前导空格（左侧）与containerView齐平。
2. mylabel的尾随空格（右侧）与containerView齐平。

由于mylabel的宽度为60，mybutton将更窄（感谢<=）以满足约束，具体取决于containerView的宽度。