ios NSLayoutConstraints 和动态设置视图的宽度/高度

NSLayoutConstraints and setting the width/height of a view dynamically

提问by Sean Danzeiser

I have a question about setting the size of a view to which i'm applying some layout constraints.
How can I define the size of the view without defining its frame?

我有一个关于设置视图大小的问题，我正在对其应用一些布局约束。
如何在不定义框架的情况下定义视图的大小？

I'm trying to create a view that has its height fixed and has an origin at the screen origin. It fills the width of the view, so that when the device rotates the view extends to the width of the screen. This is what I've got so far...

我正在尝试创建一个高度固定且原点位于屏幕原点的视图。它填充视图的宽度，因此当设备旋转时，视图会扩展到屏幕的宽度。这是我到目前为止所得到的......

self.containerView = [[HitTestContainerView alloc] init];
[self.containerView setBackgroundColor:[UIColor redColor]];
[self.view addSubview:self.containerView];

NSDictionary *viewsDictionary = @{@"view":self.containerView};
NSArray *verticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-50-[view]-250-|" options:0 metrics:nil views:viewsDictionary];
NSArray *horizontalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[view]|" options:0 metrics:nil views:viewsDictionary];
[self.view addConstraints:verticalConstraints];
[self.view addConstraints:horizontalConstraints];

The problem is I can't get anything to show up on the screen unless I set the frame of that containerView. What is the correct way to do this without using Interface Builder?

问题是我无法在屏幕上显示任何内容，除非我设置了那个框架containerView。在不使用 Interface Builder 的情况下执行此操作的正确方法是什么？

回答by Chad Scira

I wrote a little tool that will assist you with this:

我写了一个小工具来帮助你解决这个问题：

http://autolayoutconstraints.com

http://autolayoutconstraints.com

Here is the answer to your question autogenerated by the tool

这是该工具自动生成的问题的答案

Objective-C

目标-C

// align view from the left and right
[self.containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[view]-10-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(view)]];

// width constraint
[self.containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[view(==250)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(view)]];

// height constraint
[self.containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view(==50)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(view)]];

Swift

迅速

// align view from the left and right
self.containerView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-10-[view]-10-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: ["view": view]));

// width constraint
self.containerView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:[view(==250)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: ["view": view]));

// height constraint
self.containerView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[view(==50)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: ["view": view]));

回答by matt

To define the height and width of a view using layout constraints, you, uh, define the height and width of the view using layout constraints. For example, you are already saying:

要使用布局约束定义视图的高度和宽度，您，呃，使用布局约束定义视图的高度和宽度。例如，您已经在说：

NSArray *verticalConstraints = 
[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-50-[view]-250-|" 
    options:0 metrics:nil views:viewsDictionary];

So you could just change that to:

所以你可以把它改成：

NSArray *verticalConstraints = 
[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(50)-[view(40)]" 
    options:0 metrics:nil views:viewsDictionary];

Now the view will be 50 pixels from the top of its superview, and 40 pixels tall.

现在视图将距离其父视图顶部 50 像素，高 40 像素。

Alternatively you can use constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:to set the height constraint; the toItemwill be nil, of course, since there is no relationship to another view.

或者，您可以使用constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:来设置高度约束；toItem当然，the将为零，因为与另一个视图没有关系。

回答by Luismi

Better later than never...

迟到总比不到好...

For Storyboard, IB and Swift:

对于故事板、IB 和 Swift：

Just control-drag your constraint like any other control to your viewController

只需像任何其他控件一样控制拖动您的约束到您的 viewController

@IBOutlet weak var spaceToTopThatIDecided: NSLayoutConstraint!

then change it simply:

然后简单地改变它：

spaceToTopThatIDecided.constant = 44

That's all!

就这样！

回答by ERbittuu

you don't have to use addConstraints:() methods

您不必使用 addConstraints:() 方法

- (void)addConstraint:(NSLayoutConstraint *)constraint NS_AVAILABLE_MAC(10_7);

// This method is deprecated and should be avoided.? Instead, set NSLayoutConstraint's active property to YES.

// 此方法已弃用，应避免使用。？相反，将 NSLayoutConstraint 的 active 属性设置为 YES。

- (void)addConstraints:(NSArray *)constraints NS_AVAILABLE_MAC(10_7);   

// This method is deprecated and should be avoided.? Instead use

// 此方法已弃用，应避免使用。？而是使用

+[NSLayoutConstraint activateConstraints:].

// are so need to use

// 非常需要使用

+ (void)activateConstraints:(NSArray *)constraints NS_AVAILABLE(10_10, 8_0);

// then set like

// 然后设置为

NSView *view,*containerView;
view =//superview
containerView=//subview
[view addSubview:containerView];

// adding constraints

// 添加约束

[containerView setTranslatesAutoresizingMaskIntoConstraints:NO];

// about it read from Apple documentation

// 关于它从 Apple 文档中读取

// then add constraints like

// 然后添加约束，如

[NSLayoutConstraint activateConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-50-[view]-50-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(containerView)]];
[NSLayoutConstraint activateConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[view]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(containerView)]];

// thats it.

// 就是这样。

回答by Naishta

Swift 4:You can manage the width and height, in addition to leading, trailing and top and bottom space just with the below 2 options

Swift 4：您可以使用以下 2 个选项管理宽度和高度，以及前导、尾随和顶部和底部空间

 //1 . left and right spacing
    theContentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-16-[view]-16-|", options:NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: ["view":nibView]))

 //2. top and bottom spacing
    theContentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-16-[view]-16-|", options:NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: ["view":nibView]))

OR To be more specific , and to have separate constraints for W,H,left spacing, Top spacing, you can do as below

或者 更具体地说，要对 W、H、左侧间距、顶部间距有单独的约束，您可以执行以下操作

 //left only spacing
        theContentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-16-[view]", options:NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: ["view":nibView]))

//top only spacing
        theContentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-16-[view]", options:NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: ["view":nibView]))

//width
        theContentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[view(==130)]", options:NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: ["view":nibView]))

//height
        theContentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[view(==100)]", options:NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: ["view":nibView]))