Move text in UITextField with animation

Question

I need to move text in UITextField (from right to left, and then back) with animation like in Safari App in iOS 7 (see the screenshots below). Is there any way to do it? I know that I can set textAlignment, but it won't be animated.

Maybe I should change leftView size in UITextField? But I'm not sure how to calculate size, when text should be aligned on the center. Please, help.~

_{(source: cs424818.vk.me)}

If i would venture a guess I would say its a sub class of UITextField with a lot of behavior (code) built around it that's not available with regular UITextField — Sam B, Jan 02 '14 at 21:56
that is a simple transition effect (moving + fading) between a `UITextField` and a `UILabel`. that is quite primitive concept. — holex, Jan 02 '14 at 22:01

Mike S · Accepted Answer · 2014-01-03T04:18:17.343

1

You can achieve this behavior by doing this:

- (void)viewDidLoad
{
    // add this to viewDidLoad
    // keep the alignment left justified
    [self.yourTextField setTextAlignment:NSTextAlignmentLeft];
    [self.yourTextField addTarget:self action:@selector(textFieldDidChange)forControlEvents:UIControlEventEditingChanged];
}

-(void)textFieldDidChange
{
    // this will cause your textfield to grow and shrink as text is added or removed
    // note: this will always grow to the right, the lefthand side will stay anchored
    [self.yourTextField sizeToFit];
}

Then when you want to move your UITextField from the center to the left you can simply do:

// 1 second animation
[UIView animateWithDuration:1.0 animations:^{
    // move to the left side of some containing view
    self.yourTextField.center = CGPointMake(containingView.frame.origin.x + self.yourTextField.frame.size.width/2, self.yourTextField.center.y);
}];

Likewise to move from the lefthand side to the center you can do:

[UIView animateWithDuration:1.0 animations:^{
    // move to the center of containing view
    self.yourTextField.center = CGPointMake(containingView.frame.size.width/2, self.yourTextField.center.y);
}];

Hope this helps!

edited Jan 03 '14 at 04:18

answered Jan 02 '14 at 22:15

Mike S

11,329
6
41
76

I have the urge to put self.yourTextField instead of your_textfield the viewDidLoad and textFieldDidChange (ex. [self.yourTextField sizeToFit]). Correct me if I'm wrong :) – Nate Lee Jan 03 '14 at 03:50
Thanks for answer! But I have a question: how to be, when text width in `UITextField` more, than view size? So if I use `sizeToFit`, `UITextfield` becomes beyond the view. @MikeSlutsky – Maxim Irbe Jan 03 '14 at 11:17
You should try using this: [Growing Text View](https://github.com/HansPinckaers/GrowingTextView) – Nate Lee Jan 03 '14 at 14:47
But why? I don't see any text moving from center to side/from side to center. @nlee918 – Maxim Irbe Jan 03 '14 at 20:59
Sorry I'm not sure I understand what you mean. Do you want the UITextField to be a specific width, and allow the text to overflow? (sizeToFit does indeed completely make the textField bigger to fit all the text) – Nate Lee Jan 03 '14 at 21:56
Out of curiosity, are you trying to clone the URL bar from the safari app itself? – Nate Lee Jan 03 '14 at 21:58
Yes, actually i was trying to do it and finally did. @nlee918 Answer of Mike Slutsky has the same construction as my code, so I mark this answer as accepted answer. Thanks everybody! – Maxim Irbe Jan 06 '14 at 08:42

Move text in UITextField with animation

1 Answers1