Adding a TabBarController as the Subview of a View

Question

I am loading a splash screen when my app starts. Then I want to load a TabBarController and it's ViewControllers. However, my TabBarController window does not scale to the screen size.

Probably 3/4 of the TabBar at the bottom is getting cut off and There is a slim aprox 20 pixel gap at the top of the screen below the status bar. How do I resize the TabBarController properly?

Here is the code in my SplashViewController loading the splash view, and the TabBarController:

 -(void)loadView{
// Init the view
CGRect appFrame = [[UIScreen mainScreen] applicationFrame];
UIView *view = [[UIView alloc] initWithFrame:appFrame];
view.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
self.view = view;
[view release];

splashImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Splash.png"]];
splashImageView.frame = CGRectMake(0,0,320,458);
[self.view addSubview:splashImageView];

viewController = [[FlashCardViewController alloc] initWithNibName:@"FlashCardViewController"  bundle:[NSBundle mainBundle]];
//viewController.view.bounds = [[UIScreen mainScreen]bounds];
viewController.title = @"Quiz";
viewController.tabBarItem.image = [UIImage imageNamed:@"puzzle.png"];

UIViewController *viewController2 = [[UIViewController alloc] initWithNibName:nil  bundle:nil];
viewController2.title = @"Nada";
viewController2.tabBarItem.image = [UIImage imageNamed:@"magnifying-glass.png"];
//viewController.view.alpha = 0.0;
//[self.view addSubview:viewController.view];

tabBarController = [[UITabBarController alloc] init];
tabBarController.viewControllers = [NSArray arrayWithObjects:viewController, viewController2, nil];
[viewController2 release];
tabBarController.view.alpha = 0.0;
//tabBarController.tabBarItem.image = [UIImage imageNamed:@"State_California.png"];
//tabBarController.tabBarItem.title = @"State_California.png";
tabBarController.view.bounds = [[self view] bounds];
//tabBarController.view.frame = [[UIScreen mainScreen] applicationFrame];
[self.view addSubview:tabBarController.view];

timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(fadeScreen) userInfo:nil repeats:NO]; 
}
-(void) fadeScreen
{
[UIView beginAnimations:nil context:nil]; // begin animation block
[UIView setAnimationDuration:0.75]; // sets animation duration
[UIView setAnimationDelegate:self]; // sets the delegate for this block
[UIView setAnimationDidStopSelector:@selector(finishedFading)]; // Calls finishFading
self.view.alpha = 0.0; //  // Fades the alpha to 0 over animation
[UIView commitAnimations]; // Commits this block, done
}

-(void) finishedFading
{
[UIView beginAnimations:nil context:nil]; // Begin animation block
[UIView setAnimationDuration:0.75]; // set duration
self.view.alpha = 1.0; // fades the view to 1.0 alpha over .75 seconds
//viewController.view.alpha = 1.0;
tabBarController.view.alpha = 1.0;
[UIView commitAnimations];
[splashImageView removeFromSuperview];
}

Solution 1

I finally found someting that works. Instead of:

tabBarController.view.frame = [[UIScreen mainScreen] applicationFrame];

or

tabBarController.view.bounds = [[self view] bounds];

Because I couldn't find and automatic or named settings for this size, I had to create my own rectangle that is the size of the screen minus the statusBar.

 tabBarController.view.frame = CGRectMake(0,0,320,460);

Solution 2

I've just completed pretty much the same and ran into the same problems but eventually I got it working.

1. Create a View Controller class in Xcode called Test1ViewController and add the following:

   @interface Test1ViewController : UIViewController {
       IBOutlet UITabBarController *tbc;
   }
   
   @property (nonatomic,retain) IBOutlet UITabBarController *tbc;
   @end
   

2. Create a View XIB called Test1View

3. Add a TabBarViewController to the XIB

4. Set the File's Owner in the XIB to be the Test1ViewController.

5. Connect the tbc IBOutlet in the File's Owner to the Tab Bar Controller in the XIB.

6. Connect the view IBOutlet in the File's Owner to the View in the XIB.

7. In your SplashViewController.h add the property

   Test1ViewController *tabBarViewController;
   

8. Synthesize the tabBarViewController in your SplashViewController.m.

9. Replace your TabBarController creation code in your loadView method in SplashViewController with the following:

   tabBarViewController = [[Test1ViewController alloc] initWithNibName:
           @"Test1View" bundle:[NSBundle mainBundle]];
   tabBarViewController.view.alpha = 0.0;
   [self.view addSubview:[tabBarViewController view]];
   

10. Here's the bit that was missing for me. In Test1ViewController.m, you need to add the following line to the viewDidLoad method:

    self.view = tbc.view;
    

11. Finally, I also had to change the finishedFading method in SplashViewController.m to set the alpha to 1.0 on the tabBarViewController view.

    -(void) finishedFading
    {
        [UIView beginAnimations:nil context:nil];
        [UIView setAnimationDuration:0.75];
        self.view.alpha = 1.0;
        tabBarViewController.view.alpha = 1.0;
        [UIView commitAnimations];
        [splashImageView removeFromSuperview];
    }
    

I hope this helps.

Comments

[Wim Haanstra]

Thanks, I was looking for something similar. Rated the thing up.

[dnatoli]

Thanks! I could not for the life of me get it working, turns out I was missing step 10.

[pulkitsinghal]

Almost everything in this answer was dead-on other than step 10. For some reason that just doesn't work now, perhaps its an iOS5 thing? Instead placing self.tabBarController.view.frame = [[self view] frame] in viewWillAppear did the trick for me.

[pulkitsinghal]

If you run self.tabBarController.view.frame = [[self view] frame] in viewWillAppear it will work without you having to work out the numbers yourself because at that point the bounds and frame have been properly/fully calculated.

[lakshmen]

would this be better answer: tabBarController.view.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height); since the width and height vary accordingly to each device the user is using?