Swift - 在 ScrollView 中自动约束项目

Question

我无法将我的项目限制在我的 UIScrollView 中，更具体地说，trailing - anchors 的行为很奇怪：

如您所见，trailing-anchors 与 leading-anchors 不同..

这些是我的限制：

    scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 130).isActive = true
    scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30).isActive = true
    scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -30).isActive = true
    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

    emailTextField.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
    emailTextField.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
    emailTextField.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
    emailTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true

    anzeigeNameTextField.topAnchor.constraint(equalTo: emailTextField.topAnchor, constant: 80).isActive = true
    anzeigeNameTextField.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
    anzeigeNameTextField.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
    anzeigeNameTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true

    wishlistHandleTextField.topAnchor.constraint(equalTo: anzeigeNameTextField.topAnchor, constant: 80).isActive = true
    wishlistHandleTextField.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
    wishlistHandleTextField.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
    wishlistHandleTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true

    passwordTextField.topAnchor.constraint(equalTo: wishlistHandleTextField.topAnchor, constant: 80).isActive = true
    passwordTextField.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
    passwordTextField.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
    passwordTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true

    eyeButtonOne.centerYAnchor.constraint(equalTo: passwordTextField.centerYAnchor, constant: 10).isActive = true
    eyeButtonOne.trailingAnchor.constraint(equalTo: passwordTextField.trailingAnchor).isActive = true

    passwordWiederholenTextField.topAnchor.constraint(equalTo: passwordTextField.topAnchor, constant: 80).isActive = true
    passwordWiederholenTextField.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
    passwordWiederholenTextField.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
    passwordWiederholenTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true

    eyeButtonTwo.centerYAnchor.constraint(equalTo: passwordWiederholenTextField.centerYAnchor, constant: 10).isActive = true
    eyeButtonTwo.trailingAnchor.constraint(equalTo: passwordWiederholenTextField.trailingAnchor).isActive = true

    documentsLabel.topAnchor.constraint(equalTo: passwordWiederholenTextField.topAnchor, constant: 80).isActive = true
    documentsLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    documentsLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    documentsLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true

    signUpButton.topAnchor.constraint(equalTo: documentsLabel.topAnchor, constant: 80).isActive = true
    signUpButton.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
    signUpButton.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
    signUpButton.heightAnchor.constraint(equalToConstant: 50).isActive = true

我做错了什么？我是否必须在 UIScrollView 内进行不同的约束？如果是这样，如何以及为什么？

Answer 1

为您创建示例代码。希望有用

并阅读此链接以获得更好的代码：scrollView with auto layout

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        self.view.backgroundColor = UIColor.red.withAlphaComponent(0.5)


        // create scrollView
        let scrollView = UIScrollView.init()
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.backgroundColor = UIColor.blue.withAlphaComponent(0.5)
        self.view.addSubview(scrollView)

        scrollView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
        scrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
        scrollView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true

        // create tempView inside scrollView for use autolayout with scrollView
        let tempView = UIView.init()
        tempView.translatesAutoresizingMaskIntoConstraints = false

        scrollView.addSubview(tempView)
        tempView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
        tempView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
        tempView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
        tempView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true

        // is important, just for use autolayout inside scrollView with scroll if content large screen
        tempView.widthAnchor.constraint(equalTo: self.view.widthAnchor).isActive = true
        let heightConstraint = tempView.heightAnchor.constraint(equalTo: self.view.heightAnchor)
        heightConstraint.priority = .init(250)
        heightConstraint.isActive = true

        // create sample UI inside tempView
        let emailTextField = UITextField.init()
        emailTextField.translatesAutoresizingMaskIntoConstraints = false
        emailTextField.backgroundColor = .white

        tempView.addSubview(emailTextField)
        emailTextField.topAnchor.constraint(equalTo: tempView.topAnchor, constant: 200).isActive = true
        emailTextField.leadingAnchor.constraint(equalTo: tempView.leadingAnchor, constant: 50).isActive = true
        emailTextField.trailingAnchor.constraint(equalTo: tempView.trailingAnchor, constant: -50).isActive = true
        emailTextField.heightAnchor.constraint(equalToConstant: 100).isActive = true
    }

screenShot

Answer 2

uiview 需要是 scrollview 的子视图，然后你可以将你的元素嵌入到 uiview 中