CODEWITHSUNDEEP
iosswiftuiscrollviewconstraints
Chris
Chris

Reputation: 2284

Swift - auto constrain items in ScrollView

I am having problems to constrain my items inside my UIScrollView, to be more specific trailing - anchors are behaving weird:

enter image description here

As you can see trailing-anchors are not the same as leading-anchors..

These are my constrains:

    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

What am I doing wrong? Do I have to constraint differently inside a UIScrollView? And if so, how and why?

Upvotes: 0

Views: 148

Answers (2)

Reza Khonsari
Reza Khonsari

Reputation: 466

uiview needed to be subview of scrollview, after that you can embed you're elements into uiview

Upvotes: 1

hessam
hessam

Reputation: 432

create sample code for you. Hope it will be useful

and read this link for better sene below code: 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

Upvotes: 1

Related Questions