基于子视图的自动布局高度

Posted 2023-03-16

【中文标题】基于子视图的自动布局高度

【英文标题】：AutoLayout height based on subviews

【发布时间】：2013-12-30 14:54:01

【问题描述】：

我尝试了很多解决方案，但无法让 UIScrollView 通过它的子视图调整大小。

错误：

(
    "<NSLayoutConstraint:0x16e71240 V:[RouteView:0x16d76fd0]-(10)-[RouteView:0x16e6fbb0]>",
    "<NSLayoutConstraint:0x16e71270 V:[RouteView:0x16e6fbb0(150)]>",
    "<NSLayoutConstraint:0x16d78710 V:[RouteView:0x16e6fbb0]-(10)-[RouteView:0x16e702c0]>",
    "<NSLayoutConstraint:0x16e71190 V:[RouteView:0x16e702c0(150)]>",
    "<NSLayoutConstraint:0x16d78810 V:[RouteView:0x16e702c0]-(10)-[RouteView:0x16e70700]>",
    "<NSLayoutConstraint:0x16e713e0 V:[RouteView:0x16e70700(150)]>",
    "<NSLayoutConstraint:0x16d78900 V:[RouteView:0x16e70700]-(0)-|   (Names: '|':UIView:0x16e6da80 )>",
    "<NSLayoutConstraint:0x16e71030 V:[UIView:0x16e6da80]-(10)-[RouteView:0x16d76fd0]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x16d78810 V:[RouteView:0x16e702c0]-(10)-[RouteView:0x16e70700]>

我的层次结构：

Class UIView contains
--UIScrollView
  --mainViewOfScroller
  ----10-----------10
  ----|------------|
  ----UIView-10-UIView
  ----|------------|
  ----10-----------10
  ----|------------|
  ----UIView-10-UIView
  ……… 

我做了什么：

1.对于 scroller(UIScrollView) 的所有子视图，我设置 translatesAutoresizingMaskIntoConstraints=NO

2.通过self的宽度和高度将滚动条高度设置为最大值（self是类UIView，它是主UIView）

[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[scroller]|" options:0 metrics: 0 views:views]];
  [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[scroller]|" options:0 metrics: 0 views:views]];

3.将 mainViewOfScroller 设置为最大宽度（而不是高度可调整大小）

[scroller addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|     [mainViewOfScroller(==scroller)]|" options:0 metrics:0 views:views]];

4.然后我想将 mainViewOfScroller 的底部固定到 mainViewOfScroller.subviews.lastObject 的底部

[scroller addConstraint:[NSLayoutConstraint constraintWithItem:mainViewOfScroller attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:mainViewOfScroller.subviews.lastObject attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0]];

【参考方案1】：

在这样的滚动视图中使用自动布局时，您需要对其进行设置，以便其中的每个视图都扩展它的父视图。由于 contentSize 的不同，滚动视图的工作方式略有不同。这是不久前在苹果开发者论坛上提出的，我制作了一个示例项目来展示所使用的约束。它使用故事板，但我认为它可以帮助你。

https://github.com/ketzusaka/ScrollingWithConstraints

这里的目标是让一级子视图能够扩展滚动视图。例如，如果您的滚动视图中有两个子视图，您希望最上面的子视图对其父视图的左侧、顶部和右侧有一个约束。底部应该对其父视图的左侧、底部和右侧有约束。然后它们应该相互关联，以便它们“堆叠”在彼此之上。最后，您需要确保它们每个都具有一定的大小以使它们扩展，可能是内在的内容大小或更多限制。我不会让任何子视图说它们的宽度与滚动视图有关；只需将它们固定到边缘并让子视图驱动滚动视图的大小。

Apple 在这里也有一份技术文档：

https://developer.apple.com/library/ios/technotes/tn2154/_index.html

最后，这是苹果开发者论坛的帖子：

https://devforums.apple.com/message/917077#917077

祝你好运！

【讨论】：

谢谢！我将检查您的代码，并尝试找出差异。我会尽快回复你。

您在 IB 中进行设置，但我在代码中进行，这就是为什么我不明白我错在哪里。

是的，我知道这有点不同，但概念是一样的。我认为您的主要问题是尝试调整滚动视图子视图的大小以匹配滚动视图本身。相反，滚动视图子视图应该是其子视图的大小。我注意到您没有为子视图添加任何有关约束的代码。确保它们的大小合适，并且具有可以扩展第一级滚动视图子视图的约束。

我的主要问题是“如何通过它的最后一个子视图调整 mainViewOfScroller 的大小”和“如何通过 mainViewOfScroller 的高度调整滚动条的大小”，我才开始教自动布局，我不知道如何编码。

我做了一个类似于你在你的问题中所做的项目。希望它比 IB 版本更有帮助：github.com/ketzusaka/ScrollviewWithProgrammaticConstraints