当UIScrollView垂直滚动时,UIScrollView的子视图保持在相同位置

时间:2018-08-07 02:39:39

标签: ios swift autolayout swift4

谁能告诉我为什么我添加到UIScrollView中的子视图无法滚动?运行项目时,可以上下滚动UIScrollView,滚动时可以在屏幕的右侧看到滚动指示器。但是我添加到UIScrollView的子视图始终处于相同的位置,就好像它们根本不是UIScrollView的子视图一样。这很奇怪,因为我从正在使用的另一个视图复制了大部分代码,并且该视图完全按预期运行,只是该视图不起作用。感谢您的查看,这是我的代码

import UIKit

class EnterCredentialsVC2: UIViewController {

    private lazy var scrollView: UIScrollView = { [unowned self] in
        let view = UIScrollView()
        view.backgroundColor = UIColor.ricdBlue
        view.contentSize.height = self.view.frame.size.height + 300
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    private let emailTextField: UITextField = { 
        let field = UITextField()
        field.placeholder = "Email Address"
        field.translatesAutoresizingMaskIntoConstraints = false
        return field
    }()

    private let passwordTextField: UITextField = { 
        let field = UITextField()
        field.placeholder = "Password (6 characters minimum)"
        field.translatesAutoresizingMaskIntoConstraints = false
        return field
    }()

    private let enterButton: UIButton = {
        let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        return button
    }()

    private let errorLabel: UILabel = {
        let label = UILabel()
        label.numberOfLines = 0
        label.minimumScaleFactor = 0.1
        label.adjustsFontSizeToFitWidth = true
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
            layoutView()
    }
}


//view layout methods
extension EnterCredentialsVC2 {
    private func layoutView() {
        layoutScrollView()
        layoutEmailTextField()
        layoutPasswordTextField()
        layoutEnterButton()
        layoutErrorLabel()
    }

    private func layoutScrollView() {
        view.addSubview(scrollView)
        scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
        scrollView.leftAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leftAnchor).isActive = true
        scrollView.rightAnchor.constraint(equalTo: view.safeAreaLayoutGuide.rightAnchor).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
    }

    private func layoutEmailTextField() {
        scrollView.addSubview(emailTextField)
        emailTextField.heightAnchor.constraint(equalToConstant: 45).isActive = true
        emailTextField.widthAnchor.constraint(equalToConstant: view.bounds.width * 0.9).isActive = true
        emailTextField.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor).isActive = true
        emailTextField.topAnchor.constraint(equalTo: scrollView.safeAreaLayoutGuide.topAnchor, constant: 100).isActive = true
    }

    private func layoutPasswordTextField() {
        scrollView.addSubview(passwordTextField)
        passwordTextField.heightAnchor.constraint(equalToConstant: 45).isActive = true
        passwordTextField.widthAnchor.constraint(equalToConstant: view.bounds.width * 0.9).isActive = true
        passwordTextField.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor).isActive = true
        passwordTextField.topAnchor.constraint(equalTo: emailTextField.bottomAnchor, constant: 50).isActive = true
    }

    private func layoutEnterButton() {
        scrollView.addSubview(enterButton)
        enterButton.widthAnchor.constraint(equalToConstant: view.bounds.width * 0.5).isActive = true
        enterButton.heightAnchor.constraint(equalToConstant: 55).isActive = true
        enterButton.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor).isActive = true

        let top = enterButton.topAnchor.constraint(equalTo: passwordTextField.bottomAnchor, constant: 50)
        top.priority = .defaultHigh
        top.isActive = true
        let bottom = enterButton.bottomAnchor.constraint(greaterThanOrEqualTo: scrollView.safeAreaLayoutGuide.bottomAnchor, constant: 200)
        bottom.priority = .defaultLow
        bottom.isActive = true
    }

    private func layoutErrorLabel() {
        scrollView.addSubview(errorLabel)
        errorLabel.widthAnchor.constraint(equalToConstant: view.bounds.width-20).isActive = true
        errorLabel.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor).isActive = true

        let top = errorLabel.topAnchor.constraint(equalTo: enterButton.bottomAnchor, constant: 30)
        top.priority = .required
        top.isActive = true

        let bottom = errorLabel.bottomAnchor.constraint(equalTo: scrollView.safeAreaLayoutGuide.bottomAnchor, constant: -20)
        bottom.priority = .defaultLow
        bottom.isActive = true
    }
}

2 个答案:

答案 0 :(得分:2)

滚动视图内直接子视图的约束以特殊方式起作用。它们必须固定在滚动视图本身或其contentLayoutGuide上。这有一个特殊的含义:“我并没有真正固定在您的外部,我只是向您显示子视图的布局,而是告诉您您的内容大小。”

固定在安全区域布局指南上-永不动摇的事情-完全违反了这一规定。就像固定到滚动视图的frameLayoutGuide或完全固定到滚动视图之外。它特别指示滚动视图 not 在计算内容高度时要考虑这些视图。

您已明确为滚动视图提供了内容大小-在错误的时间以错误的方式,但这是另一回事-并且“幸运的是”使滚动视图可滚动。但是,如果您正确设置了内部约束,则contentSize的任何显式设置都会被忽略。

答案 1 :(得分:1)

找到了问题的根源,这是我更改的行:

private func layoutEmailTextField() {
    ...
    emailTextField.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 100).isActive = true
}

将文本字段topAnchor约束为等于scrollView.safeAreaLayoutGuide.topAnchor不同于将文本字段约束为scrollView.topAnchorHere is the relevant documentation以及Here。我的想法是,因为safeArea是设备不会遮挡的任何区域,所以子视图被迫停留在该区域内,因此不会滚动到该区域之外。尽管我不确定为什么他们即使在safeArea内也不会反弹,...对此有更多了解的人请发表评论,谢谢。