为什么包含标签的contentView在autolayout的scrollView中没有任何高度？

Question

我正在创建一个scrollView并使用autolayout向其添加一个contentView。我认为contentView的高度将取决于其内容的高度和约束。由于它有标签，因此contentView的高度不应该等于标签高度吗？只有高度存在的高度（快照中为蓝色）才是向contentView添加高度约束。我认为这是不必要的，因为自动布局应该知道标签的内在尺寸大小？

// Scrollview

_scrollView = [UIScrollView new];
_scrollView.translatesAutoresizingMaskIntoConstraints = NO;
_scrollView.backgroundColor = [UIColor yellowColor];
_scrollView.bounces = YES;
[self.view addSubview:_scrollView];

NSArray *horizontalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[_scrollView]|" options:0 metrics:0 views:@{ @"_scrollView" : _scrollView }];
NSArray *verticalConstraints   = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_scrollView]|" options:0 metrics:0 views:@{ @"_scrollView" : _scrollView }];
[self.view addConstraints:horizontalConstraints];
[self.view addConstraints:verticalConstraints];


// Content view

_contentView = [UIView new];
_contentView.translatesAutoresizingMaskIntoConstraints = NO;
_contentView.backgroundColor = [UIColor blueColor];
[_scrollView addSubview:_contentView];

NSArray *horizontalContentConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[_contentView]|" options:0 metrics:0 views:@{ @"_contentView" : _contentView }];
NSArray *verticalContentConstraints   = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_contentView]|" options:0 metrics:0 views:@{ @"_contentView" : _contentView }];
[_scrollView addConstraints:horizontalContentConstraints];
[_scrollView addConstraints:verticalContentConstraints];

// Why does height of content view need to be added to get the blue area to show?
NSLayoutConstraint *contentViewHeight = [NSLayoutConstraint constraintWithItem:_contentView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:NSLayoutAttributeNotAnAttribute attribute:NSLayoutAttributeHeight multiplier:1 constant:5];
[_contentView addConstraint:contentViewHeight];

NSLayoutConstraint *contentViewOuterLeading = [NSLayoutConstraint constraintWithItem:_contentView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:0];
NSLayoutConstraint *contentViewOuterTrailing = [NSLayoutConstraint constraintWithItem:_contentView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1 constant:0];

[self.view addConstraints:@[ contentViewOuterLeading, contentViewOuterTrailing ]];


  // Day label

_dayLabel = [UILabel new];
_dayLabel.translatesAutoresizingMaskIntoConstraints = NO;
_dayLabel.text = @"Monday";
_dayLabel.backgroundColor = [UIColor greenColor];
[_contentView addSubview:_dayLabel];

NSLayoutConstraint *dayLabelTop = [NSLayoutConstraint constraintWithItem:_dayLabel attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:_contentView attribute:NSLayoutAttributeTop multiplier:1 constant:0];

NSLayoutConstraint *dayLabelCenterX = [NSLayoutConstraint constraintWithItem:_dayLabel attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:_contentView attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];

[_contentView addConstraints: @[ dayLabelTop, dayLabelCenterX ]];

Answer 1

这是因为UIScrollView的内容大小为（0,0）。

你可以说它的界限应该与superview齐平，但实际上并没有改变它的contentSize。另外，你添加了contentView，但你再次说它应该与它的superview（scrollview）齐平，但由于滚动视图的大小仍然是（0,0），你隐含地说内容的视图大小将是0,0。只有在你添加一个特别说5px的约束之后，你才能真正看到一些视图。

滚动视图将从其内容中获取适当的大小，因此如果您将内容视图实例化为：

UIView * contentView = [[UIView alloc] initWithFrame:[UIScreen mainscreen].bounds]; 

滚动视图的内容大小将等于[UIScreen mainscreen] .bounds，您仍然可以满足您编写的布局限制。

当您向uiscrollview添加UI元素并通过布局约束排列时，scrollview将根据需要自动展开。

我写了一篇关于这个主题的博客文章，Programmatic ScrollViews w/ NSLayout ...你可能也看过旧的提交，但我遇到了同样的问题。

Answer 2

好的想通了。从contentView添加约束到其标签的底部使其工作。 contentView不需要高度约束。这是更新后的代码：

// Scrollview

_scrollView = [UIScrollView new];
_scrollView.translatesAutoresizingMaskIntoConstraints = NO;
_scrollView.backgroundColor = [UIColor yellowColor];
_scrollView.alwaysBounceVertical = YES;
[self.view addSubview:_scrollView];

NSArray *horizontalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[_scrollView]|" options:0 metrics:0 views:@{ @"_scrollView" : _scrollView }];
NSArray *verticalConstraints   = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_scrollView]|" options:0 metrics:0 views:@{ @"_scrollView" : _scrollView }];
[self.view addConstraints:horizontalConstraints];
[self.view addConstraints:verticalConstraints];


// Content view

_contentView = [UIView new];
_contentView.translatesAutoresizingMaskIntoConstraints = NO;
_contentView.backgroundColor = [UIColor blueColor];
[_scrollView addSubview:_contentView];

NSArray *horizontalContentConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[_contentView]|" options:0 metrics:0 views:@{ @"_contentView" : _contentView }];
NSArray *verticalContentConstraints   = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_contentView]|" options:0 metrics:0 views:@{ @"_contentView" : _contentView }];
[_scrollView addConstraints:horizontalContentConstraints];
[_scrollView addConstraints:verticalContentConstraints];

NSLayoutConstraint *contentViewOuterLeading = [NSLayoutConstraint constraintWithItem:_contentView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:0];
NSLayoutConstraint *contentViewOuterTrailing = [NSLayoutConstraint constraintWithItem:_contentView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1 constant:0];
[self.view addConstraints:@[ contentViewOuterLeading, contentViewOuterTrailing ]];


// Day label

_dayLabel = [UILabel new];
_dayLabel.translatesAutoresizingMaskIntoConstraints = NO;
_dayLabel.text = @"Monday";
_dayLabel.backgroundColor = [UIColor greenColor];
[_contentView addSubview:_dayLabel];

NSLayoutConstraint *dayLabelTop = [NSLayoutConstraint constraintWithItem:_dayLabel attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:_contentView attribute:NSLayoutAttributeTop multiplier:1 constant:0];
NSLayoutConstraint *dayLabelCenterX = [NSLayoutConstraint constraintWithItem:_dayLabel attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:_contentView attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
NSLayoutConstraint *dayLabelBottom = [NSLayoutConstraint constraintWithItem:_dayLabel attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:_contentView attribute:NSLayoutAttributeBottom multiplier:1 constant:0];
[_contentView addConstraints: @[ dayLabelTop, dayLabelCenterX, dayLabelBottom ]];