使用带有 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 作为 Scroll View 的子视图.固定顶部、左侧、右侧和底部约束.

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 作为 Scroll View 的子视图.将此视图命名为内容视图"

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.

接下来从 Content View 到 Main View 添加等宽和等高约束.

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.

添加到Content View里面的item的约束非常重要，尤其是最后一个item添加的bottom约束.它们有助于确定滚动视图的内容大小.如我所述，添加底部约束将使视图在内容太大而无法放入屏幕时滚动，如果内容适合屏幕则禁用滚动.

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.

这篇关于使用带有 Autolayout Swift 的滚动视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！