Dynamically Moving (Animating) a UITextField

Question

I have been trying to animate a UITextField so that its y position increases by 50px. Basically, it moves up by fifty pixels. This is my code:

@IBAction func textField(sender: AnyObject) {
    let x = self.pw.frame.origin.x
    let y = self.pw.frame.origin.y + 100
    UIView.animateWithDuration(0.5, delay: 0, options: nil, animations: {
        self.pw.frame = CGRectMake(x, y, self.pw.frame.size.width, self.pw.frame.size.height)
    }, completion: nil)

It is in a textField's delegate. This code is run when the UITextField is tapped.

This code, sadly, does not do what I want it to. When run, it moves the text field up by 50 pixels but then moves it right back down. It does not finish with it up in what is supposed to be its final position.

Do you have anything else that positions the text field in your code? Maybe in the super view's layoutSubViews? Any auto-sizing mask or autolayout constraints? — hennes, Aug 09 '15 at 14:45
@hennes - I have constraints. Should I manually set these in viewDidLoad()? — Daniel, Aug 09 '15 at 15:04
You should not manually manipulate frames when you have constraints installed. You need to perform your animation by changing your constraints. Could you share the constraints you applied to the text field? — hennes, Aug 09 '15 at 20:20
@hennes - Horizontally (in view) and Vertical Spacing to a UIButton — Daniel, Aug 09 '15 at 20:23

score 1 · Accepted Answer · answered Aug 10 '15 at 12:10

As mentioned in the comments, you should not manually modify frames when you have autolayout constraints installed. Instead you need to change your constraints to reflect the animation's end result.

The following is a minimal working example. It creates a button and a text field and initially positions the text field 58 points below the end of the button. When you tap the button, the constant on the text field's top spacing constraint is decreased from 58 to 8 to move the text field up.

class ViewController: UIViewController {

    var textFieldTopSpacingConstraint: NSLayoutConstraint?

    override func viewDidLoad() {
        super.viewDidLoad()

        // Create the button
        let button = UIButton.buttonWithType(.System) as! UIButton
        button.setTranslatesAutoresizingMaskIntoConstraints(false)
        button.setTitle("Tap me!", forState: .Normal)
        button.addTarget(self, action: "buttonTapped", forControlEvents: .TouchUpInside)
        view.addSubview(button)

        // Create the text field
        let textField = UITextField()
        textField.placeholder = "Enter text here"
        textField.setTranslatesAutoresizingMaskIntoConstraints(false)
        view.addSubview(textField)

        let views: [NSObject: AnyObject] = ["button": button, "textField": textField]

        // Layout the button
        view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-[button]-|", options: nil, metrics: nil, views: views))
        view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-20-[button(44)]", options: nil, metrics: nil, views: views))

        // Layout the text field and remember its top spacing constraint
        view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-[textField]-|", options: nil, metrics: nil, views: views))
        textFieldTopSpacingConstraint = NSLayoutConstraint(item: textField, attribute: .Top, relatedBy: .Equal,
            toItem: button, attribute: .Bottom, multiplier: 1, constant: 58) // The text field starts 58 points below the end of the button
        view.addConstraint(textFieldTopSpacingConstraint!)
    }

    func buttonTapped() {
        // Change to constant on the top spacing constraint to move the text field up
        UIView.animateWithDuration(0.5) {
            self.textFieldTopSpacingConstraint?.constant = 8 // The text field now starts 8 points below the end of the button
            self.view.layoutIfNeeded()
        }
    }

}

When you have your constraints set up through Interface Builder you can create an outlet for the top spacing constraint in your view controller and use that to modify the text field's top space.

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

You are expecting the pw frame to move by 100, but instead on the device/simulator it is only 50, that is due to the difference between pixels and points (have a look here). As for the frame going back to its original position, you should check the rest of your code.

edited May 23 '17 at 12:22

Community

1
1

answered Aug 09 '15 at 14:40

ielyamani

17,807
10
55
90

He doesn't say anything about 100 instead of 50 in his question, or am I mistaken? – hennes Aug 09 '15 at 14:47

Dynamically Moving (Animating) a UITextField

2 Answers2

Linked