UIScrollView 的 contentView 的高度基于使用 Storyboard 的内部内容 [英] 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%，并且它们的高度由使用约束添加的 ratio 定义.这些模块彼此相邻显示，就像新闻源中的新闻一样.

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) ?

也就是说我想实现:

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

为了做到这一点，我遵循了一些在互联网上找到的教程.以下是我遵循的步骤:

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

1. 设置 UIScrollView 约束来定义其位置和位置.
2. 将UIScrollView top、bottom、left和right间距设置为最近0的邻居.
3. 设置模块之间的约束，将它们堆叠"在一个其他.
4. (I'M BLOCKED HERE) 将 contentView 的底部设置为模块 3 的底部允许 UIScrollview 滚动到最后内容.

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 个模块.将第一个模块的顶部边缘约束到容器视图的顶部，将最后一个模块的底部边缘约束到容器视图的底部，并将所有中间模块约束到链中的前一个模块.这应该会在容器视图中为您提供完整的垂直约束链.您还需要为每个模块添加任何适当的 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.

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