UIView reloaded after clicking a textfield?

Question

I'm trying to make a very simple login page. Everything is fine, until I started doing some animations.

When I click login button, I move the logo 100px to the top, then I show the inputs.

That worked correctly, but when I click the textfield to edit it, the image (logo) returns to its original position!

My code:

  @IBAction func LoginClick(sender: AnyObject) {

    UIView.animateWithDuration(2, animations: {
        var center = self.logoImage.center
        center.y -= 100
        self.logoImage.center = center
        self.usernameInput.hidden=false
        self.passwordInput.hidden=false
        self.usernameLine.hidden=false
        self.passwordLine.hidden=false
        self.slidesImg.hidden=true
    })
}

Answer 1

Auto Layout is running and placing your logo back to where the constraints say it should be. Instead of modifying the frame by changing the center, you should create an IBOutlet to the vertical space constraint and then update the constant property to move your logo up.

To create the IBOutlet , first click on the vertical bar that represents the vertical constraint in the Storyboard. Then control -click on the constraint and drag to your viewController code. Give it a name like topSpace .

---

---

You'll need to call layoutIfNeeded() to animate the constraint change:

@IBOutlet weak var topSpace: NSLayoutConstraint!

@IBAction func LoginClick(sender: AnyObject) {

    topSpace.constant -= 100
    UIView.animateWithDuration(2, animations: {
        self.logoImage.layoutIfNeeded()
        self.usernameInput.hidden=false
        self.passwordInput.hidden=false
        self.usernameLine.hidden=false
        self.passwordLine.hidden=false
        self.slidesImg.hidden=true
    })
}