如何为不占据整个父视图的滚动视图设置约束
How do you set constraints for scrollview that doesn't occupy the whole parent view
我正在尝试构建类似于 ios 照片库的 UI :带有滚动视图的导航视图控制器占据父视图和集合视图的 80% 高度和 100% 宽度控制器占据其余的高度和 100% 的宽度。所以这是它的样子:
蓝色区域是滚动视图及其内容视图。底部是一个集合视图,其行为类似于旋转木马。您可以在以下屏幕截图中看到我设置的约束:
:
我想设置滚动视图的高度,使其仅占据父视图空间的 80%,集合视图占据其余部分。但是,我似乎无法解决滚动视图约束问题,例如自动布局无法解析滚动视图的 height/y 位置。如上图所示,我尝试将滚动视图的高度设置为父视图的 50%,但自动布局仍然抱怨无法解析高度。如果我让 Interface Builder 解决这个问题,它只会在 scrollview 内的内容视图中添加间距并将其向下推。您可以在以下屏幕截图中看到这一点。
正如我从上面看到的那样,请执行以下操作。
- 向滚动视图添加前导、尾随和顶部约束。
- 添加高度约束,即从滚动视图拖动到超级视图并添加等宽,在等宽约束中将倍数更改为 0.8。
- 添加关于超级视图的前导尾随、底部约束和关于滚动视图的垂直space约束。
您的视图层次结构已正确设置,这非常好,并且您在添加约束的正确轨道上。我将从第 1 步开始编写所有约束。
- 向您的
UIScrollView
添加顶部、前导和尾随约束到 superView
。还要在 UIScrollView
和 superView
之间添加一个等高约束,并将乘数设置为 0.8。
- 现在将您的
UICollectionView
添加到 UIScrollView
下方,并为 superView
设置前导、尾随和底部。还要在 UICollectionView
和 UIScrollView
之间添加一个垂直间距。
- 现在在
UIScrollView
中添加 contentView。将 contentView 的前导、顶部、底部和尾部添加到 UIScrollView
。一旦你这样做,约束就会被打破并且 Xcode 会抱怨。 现在您需要做的更多是在UIScrollView
和contentView 之间添加一个等高和等宽的约束。将这个等高约束(假设你想要垂直滚动)的优先级设置为 250,这样当 UIScrollView
中的内容变得太大而无法完全显示时它就会中断。
现在就额外间距问题而言。您需要做的是,select 有您的 UIScrollVIew
的 UIViewController
然后 select 这个 UIViewController
和 的属性检查器取消选中 调整滚动视图插入 选项。对于屏幕截图,请检查 。
我正在尝试构建类似于 ios 照片库的 UI :带有滚动视图的导航视图控制器占据父视图和集合视图的 80% 高度和 100% 宽度控制器占据其余的高度和 100% 的宽度。所以这是它的样子:
蓝色区域是滚动视图及其内容视图。底部是一个集合视图,其行为类似于旋转木马。您可以在以下屏幕截图中看到我设置的约束:
我想设置滚动视图的高度,使其仅占据父视图空间的 80%,集合视图占据其余部分。但是,我似乎无法解决滚动视图约束问题,例如自动布局无法解析滚动视图的 height/y 位置。如上图所示,我尝试将滚动视图的高度设置为父视图的 50%,但自动布局仍然抱怨无法解析高度。如果我让 Interface Builder 解决这个问题,它只会在 scrollview 内的内容视图中添加间距并将其向下推。您可以在以下屏幕截图中看到这一点。
正如我从上面看到的那样,请执行以下操作。
- 向滚动视图添加前导、尾随和顶部约束。
- 添加高度约束,即从滚动视图拖动到超级视图并添加等宽,在等宽约束中将倍数更改为 0.8。
- 添加关于超级视图的前导尾随、底部约束和关于滚动视图的垂直space约束。
您的视图层次结构已正确设置,这非常好,并且您在添加约束的正确轨道上。我将从第 1 步开始编写所有约束。
- 向您的
UIScrollView
添加顶部、前导和尾随约束到superView
。还要在UIScrollView
和superView
之间添加一个等高约束,并将乘数设置为 0.8。 - 现在将您的
UICollectionView
添加到UIScrollView
下方,并为superView
设置前导、尾随和底部。还要在UICollectionView
和UIScrollView
之间添加一个垂直间距。 - 现在在
UIScrollView
中添加 contentView。将 contentView 的前导、顶部、底部和尾部添加到UIScrollView
。一旦你这样做,约束就会被打破并且 Xcode 会抱怨。 现在您需要做的更多是在UIScrollView
和contentView 之间添加一个等高和等宽的约束。将这个等高约束(假设你想要垂直滚动)的优先级设置为 250,这样当UIScrollView
中的内容变得太大而无法完全显示时它就会中断。
现在就额外间距问题而言。您需要做的是,select 有您的 UIScrollVIew
的 UIViewController
然后 select 这个 UIViewController
和 的属性检查器取消选中 调整滚动视图插入 选项。对于屏幕截图,请检查