Animating a UIButton to fullscreen

Question

so I have a very simple button that when clicked goes to fullscreen and when clicked again goes back to the same position it was initially in. For some reason it works perfectly without the animation. When I uncomment the animation part when I initially click the button it does nothing, the second time I click it slightly enlarges. The third time I click it animates slowly but back to it's smaller original size... Why is it animating the opposite way?

- (IBAction)viewImage1:(id)sender {
    UIButton *btn = (UIButton*) sender;
    if (btn.tag == 0)
    {
        CGRect r = [[UIScreen mainScreen] bounds];
        /*[UIView animateWithDuration:0.5f delay:0.0f options:0 animations:^{*/
        [sender setFrame: r];
        /*}completion:nil];*/
        btn.tag = 1;
    }
    else
    {
        btn.tag = 0;

        [sender setFrame:CGRectMake(0,0,370,200)];
    }
}

I'm assuming that to animate the sender button to the mainScreen bounds I set the animations:^{ [sender setFrame: r];} right? — Josh Reed, Jan 05 '16 at 21:53
it won't animate to fullscreen; it stretches slightly. did you uncomment the part I was having issues with? — Josh Reed, Jan 05 '16 at 22:00
I think animation works only when u change a frame prior to the animation, hence in your case animation works when u click second time — Teja Nandamuri, Jan 05 '16 at 22:53

score 2 · Accepted Answer · edited May 23 '17 at 12:33

There are two solutions to your problem either of which will work:

Disable Autolayout. (discouraged)
You can do that in Interface Builder by opening the File Inspector

in the right pane and unchecking the respective check box.

However, if you want to use Autolayout for constraining other UI elements in your view (which is quite a good idea in most cases) this approach won't work which is why I would recommend the second solution:
Keep Autolayout enabled, create an outlet for your button in your view controller and set
```
self.myButton.translatesAutoresizingMaskIntoConstraints = YES;
```
in your view controller's viewDidLoad method.

You could also add layout constraints to your button and animate those. (This excellent Stackoverflow post explains how it's done.)

The reason for this tricky behavior is that once you enable Autolayout a view's frame is no longer relevant to the actual layout that appears on screen, only the view's layout constraints matter. Setting its translatesAutoresizingMaskIntoConstraints property to YES causes the system to automatically create layout constraints for your view that will "emulate" the frame you set, in a manner of speaking.

Glad it worked. You might want to consider accepting the correct answer and upvoting any answers that helped you so that other users with a similar problem can immediately find a working solution. And it's kind of like saying thanks to those people who wrote the answers as well. :) — Mischa, Jan 12 '16 at 23:16

score 0 · Answer 2 · answered Jan 05 '16 at 23:26

It is easier to do this with auto layout and constraints. Create an IBOutlet for the height constraint of your button call it something like btnHeight. Do the same for the width constraint call it something like btnWidth. Then create an IBAction like so:

- (IBAction)buttonPress:(UIButton *)sender {
    UIButton *btn = (UIButton *) sender;
    CGRect r = [[UIScreen mainScreen] bounds];
    if (CGRectEqualToRect(btn.frame, CGRectMake(0.0, 0.0, 370, 200))) {
        [UIView animateWithDuration:0.5 delay:0.0 options:0 animations:^{
            self.btnHeight.constant = r.size.height;
            self.btnWidth.constant = r.size.width;
            [self.view layoutIfNeeded];
        } completion:^(BOOL finished){
        }];
    }else{
        [UIView animateWithDuration:0.5 delay:0.0 options:0 animations:^{
            self.btnHeight.constant = 200.0;
            self.btnWidth.constant = 370.0;
            [self.view layoutIfNeeded];
        } completion:^(BOOL finished){
        }];
    }

}

In my experience animating the frame of a UIButton does not work well, a, the only method, I'm aware of, is to use CGAffineTransformScale which will rasterize the title of the button and scale it as well.

Animating a UIButton to fullscreen

2 Answers2