問題描述

我實際上面臨著僅使用 故事板約束 使我的 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).

提前感謝您的幫助！

推薦答案

我已經能夠完全從情節(jié)提要中獲得動態(tài)滾動視圖，無需代碼，步驟如下:

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

1) 在情節(jié)提要中，添加一個滾動視圖并將其邊緣約束到主視圖的邊緣或以任何合適的方式

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) 非常重要:為等高約束設置低優(yōu)先級，例如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) 構建并運行！您的滾動視圖內容大小應自動等于所有模塊的總高度加上它們之間的間距，并且動態(tài)更改模塊內容將通過自動布局更新滾動視圖內容大小，而不需要顯式代碼來計算和更新.

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 的內部內容的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！