Setting PureLayout constraints correctly?

Question

Im using PureLayout for my programatic view constraints. I thought I had them setup correctly, size, X and Y addressed. However when I run my code on an SE vs a 7 Plus, the view doesn't align correctly.

Here is a snippet of the code:

 if (shouldSetupConstraints) {
        // bg
        backgroundView.autoPinEdgesToSuperviewEdges()
        // positions
        emailTextField.autoPinEdge(toSuperviewEdge: .top, withInset: 170)
        emailTextField.autoPinEdge(toSuperviewEdge: .left, withInset: 60)
        passwordTextField.autoPinEdge(toSuperviewEdge: .top, withInset: 250)
        passwordTextField.autoPinEdge(toSuperviewEdge: .left, withInset: 60)
        loginButton.autoPinEdge(toSuperviewEdge: .top, withInset: 350)
        loginButton.autoPinEdge(toSuperviewEdge: .left, withInset: 75)
        recoverButton.autoPinEdge(toSuperviewEdge: .top, withInset: 410)
        recoverButton.autoPinEdge(toSuperviewEdge: .left, withInset: 60)
        // confirms setup is done
        shouldSetupConstraints = false
    }

I thought the screen points were the same on retina screens, so why would there be variance with these figures?

score 0 · Answer 1 · answered Sep 01 '17 at 12:20

0

The logical resolution is not the same for an iPhone SE (320x568) and a 7 Plus (414x736).

Instead of positioning every constraint from the top or the left, try using every side of the given superview.

answered Sep 01 '17 at 12:20

Tamás Sengel

55,884
29
169
223

so using all 4 directions but the same values should translate rather than positioning from 1 ? – jackdm Sep 01 '17 at 12:22
Don't use the same values like you do now, calculate the correct value according to the layout. – Tamás Sengel Sep 01 '17 at 12:23
im not sure I get how you mean, like an if else depending on the device being used? – jackdm Sep 01 '17 at 13:43

score 0 · Answer 2 · answered Jun 04 '18 at 11:04

You are just giving the constraints for the super-view edges. You should be using constraints relatively to each other. I am not %100 sure, but this should resolve the screen issue as well.

Here's how you should do:

if (shouldSetupConstraints) {
    // bg
    backgroundView.autoPinEdgesToSuperviewEdges()
    // positions

    emailTextField.autoPinEdge(toSuperviewEdge: .top, withInset: 170)
    emailTextField.autoPinEdge(toSuperviewEdge: .left, withInset: 60)

    passwordTextField.autoPinEdge(.top, to: .bottom, of:  emailTextField, withOffset: 80.0, relation: .equal)
    passwordTextField.autoAlignAxis(.vertical, toSameAxisOf:  emailTextField)

    loginButton.autoPinEdge(.top, to: .bottom, of:  passwordTextField, withOffset: 100.0, relation: .equal)
    loginButton.autoPinEdge(toSuperviewEdge: .left, withInset: 75)

    recoverButton.autoPinEdge(.top, to: .bottom, of:  loginButton, withOffset: 60.0, relation: .equal)
    recoverButton.autoAlignAxis(.vertical, toSameAxisOf:  emailTextField)

    // confirms setup is done
    shouldSetupConstraints = false
}

Setting PureLayout constraints correctly?

2 Answers2