将滚动视图与自动布局Swift一起使用 [英] Using Scroll View with Autolayout Swift

问题描述

我知道这个问题已经问过很多次了，但这是我长期以来一直在苦苦挣扎的问题，而且即使现在有最新的答案和教程，我也相信其他人也是这样.

I know this question has been asked many times but this is a problem I have been struggling with for a long time and I'm sure others are too, even with the current answers and tutorials out there.

添加滚动视图时，请执行以下步骤:

When adding a Scroll View I go through the following steps:

1. 在视图控制器中将滚动视图添加为原始视图的子视图.固定顶部，左侧，右侧和底部.确保未选中限制到边距".

1. Add a Scroll View as a subview of the original view in the view controller. Pin top, left, right, and bottom. Ensuring that "Constrain to margins" is unchecked.

添加一个UIView作为滚动视图的子视图.固定顶部，左侧，右侧和底部约束.

Add a UIView as a subview of the Scroll View. Pin top, left, right, and bottom constraints.

在内容视图和视图控制器视图之间添加相等的宽度约束.

Add an equal widths constraint between the content view and the view controllers view.

此时，我运行该应用程序时，不会出现内容视图，并且滚动视图会占据整个屏幕.

At this point of I run the app the content view does not appear and the scroll View takes up the entire screen.

1. 接下来，我向内容视图添加仅包含4个UIView的元素以测试所有内容.我给每个UIView上下左右约束.最后一个UIView是一个底部约束.

此时，当我运行该应用程序时，内容视图"和滚动视图"分别占据大约一半的屏幕，并且可以滚动内容视图".见下面的照片.

Not at this point when I run the app the Content View and Scroll View each take up about half of the screen and I can scroll the Content View around. See below photo.

我遵循了我能找到的所有教程，并尝试实现我发现的所有SO答案，但是我似乎无法使其正常工作.如果有人遇到或知道解决方案，将非常感谢您的帮助！

I have followed every tutorial I can find and tried implementing all SO answers I have found but I can't seem to get it to work. If anybody has come across this or knows a solution your help would be very much appreciated!

绿色是内容视图"，蓝色是滚动视图"

The green is the Content View and the blue is the Scroll View

滚动视图和子视图约束

推荐答案

我在其他答案的帮助下解决了这个问题，但是我必须进行一些调整以使其按我想要的方式工作.这是我采取的步骤:

I figured this out with the help of the other answers but I had to make some adjustments to get it work the way I wanted. Here are the steps I took:

1. 将滚动视图添加为主视图的子视图.

1. Add a Scroll View as a Sub View of the Main View.

选择滚动视图，然后取消选中约束到边距"，然后固定上，左，右，下，约束

Select the Scroll View and uncheck "Constrain to margins" and pin top, left, right, bottom, constraints

添加一个UIView作为滚动视图的子视图.将此视图命名为内容视图"

Add a UIView as a subview of the Scroll View. Name this view "Content View"

选择内容视图"，然后固定顶部，左侧，右侧和底部约束.然后添加中心水平约束.

Select the Content View and pin top, left, right, and bottom constraints. Then add a center horizontally constraint.

从内容视图到主视图的下一个添加相等的宽度和相等的高度约束.

Next from the Content View to the Main View add equal width and equal height constraints.

在内容视图"中添加所需的任何元素.将顶部，左侧，右侧和高度约束固定到刚添加的元素上.

Add whatever elements you need inside the Content View. Pin top, left, right, and height constraints to the elements that were just added.

在内容视图"图钉中最底部的一项上，有一个底部约束.选择此约束，然后更改为大于或等于".将常量更改为20.

On the bottom most item inside the Content View pin a bottom constraint. Select this constraint and change to "Greater Than or Equal". Change the constant to 20.

添加到内容视图"内部项目的约束非常重要，尤其是添加到最后一项的底部约束.它们有助于确定滚动视图的内容大小.如我所述，添加底部约束将使视图在内容太大而无法容纳在屏幕中时滚动，而在内容确实适合在屏幕中时禁用滚动.

The constraints added to the items inside the Content View are very important, especially the bottom constraint added to the last item. They help to determine the content size of the scroll view. Adding the bottom constrain as I described will enable the view to scroll if the content is too large to fit in the screen, and disable scrolling if the content does fit in the screen.

这篇关于将滚动视图与自动布局Swift一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！