Question

I dont know how clear can i be or god if it is possible but i’ll try to ask anyway.

I am trying to make an app and it looks like a web page and i’ll refer the interfaces as pages.

Main window has 7 links to 7 pages and each page has links to 2-3 pages. Am using the navigation controller everything is perfect but there is a little thing that bugs me.

All those pages have the same background image. When i navigate from page to page i can see the background image changes which is normal. But seeing the sharp edges of the background image while navigating is annoying. I want the background image to stay still and the other stuffs to appear on it while navigating.

Is there a trick to solve my problem ? Using storyboard is pretty simple so do you think its worth to try an alternative solution which in this case handling so many views can be painful.(I know this sounds silly, if i want it to be perfect i should do the hard work. i jus want to know what wud you guys do)

Thanks,

Alperen.

Answer 1

What I do is this:

Make everything on every view controller have an outlet in your code. When you dismiss a VC, then animate all these things to have an alpha of 0. Then push the new VC, with all items starting with an alpha of 0 and animate them back to 1. If you make your calls to dismiss and push the VC’s NOT ANIMATED, then the background image wont change, and it will appear that the last screen fades out and the new one fades in, all the while keeping a consistent background.

Is that what you’re looking for?

Here’s a more concrete example:

Lets say we have 2 View Controllers, VC1 and VC2. VC1 has a large button in the center of the frame (button1), which brings up VC2 when it is pushed. VC2 has just a back button (button2), which will return us to VC1.

We start in the Interface Builder, where we set the background image of the view to be the same image in both VC1 and VC2. Then we add a button to each VC and connect them to the proper outlets in the headers and synthesize the properties in our .m files. In interface builder, set the alpha of each button to zero. It will disappear, but it’s still there, just invisible.

We also create a method for when the user presses each button, which I will call firstButton in VC1, and backButton in VC2. Hook these up to button1 and button2.

Until we code it otherwise, our buttons are invisible. So when the app loads and we see VC1 on the screen, we need to animate the button’s opacity back in as follows. If you arent familiar with the animation syntax dont worry, its pretty easy.

- (void) viewDidAppear:(BOOL)animated {
    // Animations
    [UIView animateWithDuration:0.2     // How long the animation takes
                          delay:0       // Any once we hit this line of code before the animation takes place
                        options:UIViewAnimationCurveEaseInOut  // Play around with this one to see what style of animation you want
                     animations:^{      // This is where we actually say what we want to animate. Make sure you use block syntax like I have here.
                         self.button1.alpha = 1; 
                     } 
                     completion:^ (BOOL finished){}    // If you want to do something else after the animations are complete you can call that here.
     ];
}

And that’s it! Notice I’m doing this in the viewDidAppear method and not the viewDidLoad or viewWillAppear, since those happen before anything is presented on the screen, and no animations are possible at that point.

When the user taps the button in VC1, we need to animate the opacity back down to zero, and then push VC2 onto the stack. We do this almost exactly the same as our last animation, but this time we need to change to VC2 in the completion block. If we do this with the animated:NO call, then we dont see the first view sliding out. Since the background images are the same, it looks like we’re still in the same VC.

- (void) firstButton {
   VC2 *secondVC = [[VC2 alloc] initWithNibName:@"VC2"];
   [UIView animateWithDuration:0.2
                      delay:0
                    options:UIViewAnimationCurveEaseInOut
                 animations:^{ 
                     self.button1.alpha = 0; 
                 } 
                 completion:^ (BOOL finished){ // Presenting the instance of VC2
                     [self.navigationController pushViewController:secondVC animated:NO];
                 }
 ];
}

Now we have finished all the animations for VC1. We need to copy the fade-in effect to the viewDidAppear method of VC2 (which I’m not going to copy out again but its literally the same), and the code the backButton method, which is almost exactly the same as the firstButton method, except that we are popping the view controller instead of pushing a new one:

- (void) backButton {
       [UIView animateWithDuration:0.2
                          delay:0
                        options:UIViewAnimationCurveEaseInOut
                     animations:^{ 
                         self.button2.alpha = 0; 
                     } 
                     completion:^ (BOOL finished){ // Removing the instance of VC2
                         [self.navigationController popViewControllerAnimated:NO];
                     }
     ];
}

Does that clear things up?