使用Storyboard基于内部内容的UIScrollView的contentView的高度 [英] Height of contentView of UIScrollView based on inside content using Storyboard

问题描述

我实际上遇到了使用故事板限制使我的 UIScrollView 完全响应的困难。

I'm actually facing difficulties to make my UIScrollView fully responsive using only storyboard constraints.

这是我的层次结构：

> - UIViewController
>  - UIView
>   - UIScrollView
>    - contentView
>     - module1View
>     - module2View
>     - module3View

所有模块都用于显示图表。 我希望他们能够做出回应。我希望它们的宽度为屏幕的100％，并且它们的高度由使用约束添加的比率定义。这些模块像新闻源中的新闻一样显示在彼此旁边。

All the modules are used to display charts. I want them to be responsive. I want their width to be 100% of the screen and their height is defined by a ratio added using constraint. The modules are displayed next to each other like news in a newsfeed.

我的问题是：如何设置 contentView 高度等于所有模块的总和（模块1 + 2 + 3）？

My question is : How do you set the contentView height equal to the sum of all the modules (module 1 + 2 + 3) ?

换句话说我想实现：

• top of contentView =模块1的顶部


• 模块顶部2 =模块1的底部


• 模块顶部2 =模块2底部


• 内容底部视图=模块3底部

• Top of contentView = top of module 1
• Top of module 2 = bottom of module 1
• Top of module 2 = bottom of module 2
• Bottom of contentView = bottom of module 3

为了做到这一点，我按照互联网上的一些教程进行操作。以下是我遵循的步骤：

To managed to do that I follow some tutorial found on internet. Here are the steps I followed :

1. 设置 UIScrollView 约束以定义其地点和位置。


2. 设置 UIScrollView 顶部，底部，左和右间距与 0 的最近邻居。


3. 设置模块之间的约束将它们堆叠在一个
   其他的上面。


4. （我在这里阻止了）设置底部 contentView 到模块3的
   底部，允许 UIScrollview 滚动到结束
   content。

1. Setting UIScrollView contraints to define its place and position.
2. Setting UIScrollView top, bottom, left and right spacing to nearest neighbour to 0.
3. Setting the constraint between modules to "stack" them one on an other.
4. (I'M BLOCKED HERE) Setting the bottom of the contentView to the bottom of module 3 to allow the UIScrollview to scroll until the end content.

我试图强制 UIScrollView 的高度：它有效但它没有响应。由于模块的高度是通过比率计算的，取决于设备，更改时的高度模块1 + 2 + 3。

I tried to force the height of UIScrollView : It works but it's not responsive. As the height of the module is calculated through a ratio, depending on the device, the height "module 1 + 2 + 3" while change.

我试图添加一个从模块3到 contentView 的约束来设置模块3的底部= contentView 的底部。所有约束都变成红色，并且随处可见警告。

I tried to add a constraint from module 3 to contentView to set the bottom of module 3 = bottom of contentView. All the constraints turn red with warning everywhere.

您是否知道如何设置基于 contentView 的高度在响应式内容？ （比如在某种程度上包装内容。）

Do you have any idea to how to set height of contentView based on a responsive content ? (Like "wrap-content in a way).

在此先感谢您的帮助！

推荐答案

我已经能够完全从故事板中获取动态滚动视图，没有代码，具有以下步骤：

I've been able to get dynamic scroll views working entirely from storyboards, no code, with the following steps:

1）在故事板，添加滚动视图并将其边缘约束到主视图的边缘或以任何合适的方式

1) In the storyboard, add a scroll view and constrain its edges to the edges of the main view or in whatever way is appropriate

2）在滚动视图中，添加一个普通的旧UIView作为一个容器。将它约束到滚动视图的所有4个边缘，但是相对于滚动视图添加等宽约束，并且向滚动视图添加相等高度约束

2) Inside the scroll view, add a plain old UIView as a container. Constrain it to all 4 edges of the scroll view, BUT ALSO add an equal width constraint relative to scroll view, and an equal height constraint to the scroll view

3）非常重要：为等高约束设置低优先级，例如250。

3) Very important: set a low priority for the equal height constraint, e.g. 250.

4）在步骤2中添加的容器视图中，添加3个模块。将第一个模块的上边缘限制在容器视图的顶部，将最后一个模块的下边缘约束到容器的底部v iew，并将所有中间模块约束到链中的前一个模块。这应该会在容器视图中为您提供完整的垂直约束链。您还需要为每个模块添加任何适当的x定位/宽度设置约束。

4) inside the container view you added in step 2, add your 3 modules. Constrain the top edge of the first module to the top of the container view, constrain the bottom edge of the last module to the bottom of the container view, and constrain all the in-between modules to the preceding module in the chain. This should give you your chain of unbroken vertical constraints inside the container view. You will also need to add whatever appropriate x positioning / width setting constraints to each module.

5）构建并运行！您的滚动视图内容大小应自动等于所有模块的总高度加上它们之间的间距，并且动态更改模块内容将通过自动布局更新滚动视图内容大小，而不是需要显式代码来计算和更新。

5) Build and run! Your scroll view content size should automatically be equal to the total height of all modules plus the spacing between them, and changing the module contents dynamically will update the scroll view content size via auto layout rather than requiring explicit code to calculate and update.

这篇关于使用Storyboard基于内部内容的UIScrollView的contentView的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！