使用Scroll View和Autolayout Swift

Question

我知道这个问题已被多次询问,但这是我长期以来一直在努力的问题,我确信其他人也是如此,即使有当前的答案和教程.

添加滚动视图时,我将执行以下步骤:

1. 在视图控制器中添加滚动视图作为原始视图的子视图.顶部,左侧,右侧和底部.确保"限制利润率"不受限制.

2. 添加UIView作为Scroll View的子视图.引脚顶部,左侧,右侧和底部约束.

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

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

4. 接下来,我向内容视图添加元素,其中包含4个UIViews来测试所有内容.我给出了每个UIView的顶部,左侧和右侧约束.而最后一个UIView是一个底部约束.

此时,当我运行应用程序时,内容视图和滚动视图各占据屏幕的大约一半,我可以滚动内容视图.见下图.

我已经按照我可以找到的每个教程进行了操作,并尝试实现我找到的所有SO答案,但我似乎无法让它工作.如果有人遇到此问题或知道解决方案,我们将非常感谢您的帮助!

绿色是内容视图,蓝色是滚动视图

滚动视图和子视图约束

Answer 1

我在其他答案的帮助下想出了这个,但我不得不做一些调整,让它按照我想要的方式工作.以下是我采取的步骤:

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

2. 选择滚动视图并取消选中"约束到边距"并固定顶部,左侧,右侧,底部约束

3. 添加UIView作为Scroll View的子视图.将此视图命名为"内容视图"

4. 选择内容视图并固定顶部,左侧,右侧和底部约束.然后添加一个中心水平约束.

5. 接下来从内容视图到主视图添加相等宽度和相等高度约束.

6. 在内容视图中添加所需的任何元素.将顶部,左侧,右侧和高度限制固定到刚刚添加的元素上.

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

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

Answer 2

Xcode 11 斯威夫特 5

更多信息在这里

为了让滚动视图在自动布局中工作，滚动视图必须知道其可滚动内容（滚动视图内容）的宽度和高度，以及自身的框架（X、Y、宽度、高度），即。超级视图应该在哪里放置滚动视图以及大小。

在 Xcode 11中，Interface Builder 中引入了两个新内容：内容布局指南和框架布局指南。

现在要从故事板制作工作 scrollView，您应该：

• 将滚动视图放入视图控制器并设置约束（前导、顶部、尾部、底部 - 全部为 0）
• 在滚动视图中放置一个视图（contentView）并设置约束（前导、顶部、尾随、底部 - 全部为 0）
• 在视图层次结构中，将 ctrl 从 new View(contentView) 拖动到scrollView 的内容布局指南，并在出现的上下文菜单中选择所有约束（前导、顶部、尾随、底部 - 全部为 0）
• 如果我们想让scrollview 只垂直滚动，在view 和scrollview 的Frame Layout guide之间创建一个等宽约束（用于水平创建等高约束）
• 将所有内容视图元素放在其中，并以 contentView 的顶部和底部必须通过其中的约束连接的方式创建所有垂直约束。

就是这样

Answer 3

我在代码中做了一个简单的视图，应该是不言自明的，并且可能对您有所帮助。它概述了使滚动视图正常工作所需执行的所有步骤。

如果有不清楚的地方，请随时发表评论。

import UIKit

class TutorialView: UIView {

    lazy var sv: UIScrollView = {
        let object = UIScrollView()

        object.backgroundColor = UIColor.whiteColor()
        object.translatesAutoresizingMaskIntoConstraints = false
        return object
    }()

    lazy var tutorialPageOne: UIView = {
        let object = UIView(frame: UIScreen.mainScreen().bounds)
        object.translatesAutoresizingMaskIntoConstraints = false
        object.backgroundColor = UIColor.cyanColor()

        return object
    }()

    lazy var tutorialPageTwo: UIView = {
        let object = UIView(frame: UIScreen.mainScreen().bounds)
        object.translatesAutoresizingMaskIntoConstraints = false
        object.backgroundColor = UIColor.lightGrayColor()

        return object
    }()

    lazy var tutorialPageThree: UIView = {
        let object = UIView(frame: UIScreen.mainScreen().bounds)
        object.translatesAutoresizingMaskIntoConstraints = false
        object.backgroundColor = UIColor.redColor()

        return object
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)

        self.addSubview(self.sv)
        self.sv.addSubview(self.tutorialPageOne)
        self.sv.addSubview(self.tutorialPageTwo)
        self.sv.addSubview(self.tutorialPageThree)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        let vc = nextResponder() as? UIViewController
        let mainSreenWidth = UIScreen.mainScreen().bounds.size.width
        let mainScreenHeight = UIScreen.mainScreen().bounds.size.height

        NSLayoutConstraint.activateConstraints([
            self.sv.topAnchor.constraintEqualToAnchor(vc?.topLayoutGuide.bottomAnchor),
            self.sv.leadingAnchor.constraintEqualToAnchor(self.leadingAnchor),
            self.sv.bottomAnchor.constraintEqualToAnchor(vc?.bottomLayoutGuide.topAnchor),
            self.sv.trailingAnchor.constraintEqualToAnchor(self.trailingAnchor)
        ])

        NSLayoutConstraint.activateConstraints([
            self.tutorialPageOne.widthAnchor.constraintEqualToConstant(mainSreenWidth),
            self.tutorialPageOne.heightAnchor.constraintEqualToConstant(mainScreenHeight),
            self.tutorialPageOne.topAnchor.constraintEqualToAnchor(self.sv.topAnchor),
            self.tutorialPageOne.leadingAnchor.constraintEqualToAnchor(self.sv.leadingAnchor),
            self.tutorialPageOne.bottomAnchor.constraintEqualToAnchor(self.sv.bottomAnchor)
        ])


        NSLayoutConstraint.activateConstraints([
            self.tutorialPageTwo.widthAnchor.constraintEqualToConstant(mainSreenWidth),
            self.tutorialPageTwo.heightAnchor.constraintEqualToConstant(mainScreenHeight),
            self.tutorialPageTwo.topAnchor.constraintEqualToAnchor(self.sv.topAnchor),
            self.tutorialPageTwo.leadingAnchor.constraintEqualToAnchor(self.tutorialPageOne.trailingAnchor),
            self.tutorialPageTwo.bottomAnchor.constraintEqualToAnchor(self.sv.bottomAnchor)
        ])

        NSLayoutConstraint.activateConstraints([
            self.tutorialPageThree.widthAnchor.constraintEqualToConstant(mainSreenWidth),
            self.tutorialPageThree.heightAnchor.constraintEqualToConstant(mainScreenHeight),
            self.tutorialPageThree.topAnchor.constraintEqualToAnchor(self.sv.topAnchor),
            self.tutorialPageThree.leadingAnchor.constraintEqualToAnchor(self.tutorialPageTwo.trailingAnchor),
            self.tutorialPageThree.bottomAnchor.constraintEqualToAnchor(self.sv.bottomAnchor),
            self.tutorialPageThree.trailingAnchor.constraintEqualToAnchor(self.sv.trailingAnchor)
        ])

    }
}