Containers UITabBarController example

Containers - UITabBarController-like container example

In this example, we show how HLSPlaceholderViewController can be used to implement a UITabBarController-like container. The final result will look as follows:

The transition between pages is achieved using one of the built-in CoconutKit 3D-flip transitions:

1. Create a new Xcode project and add CoconutKit to it
2. Create an HLSPlaceholderViewController subclass called MyTabBarController. We will manage the view layout using Interface Builder, you should therefore add a xib file bearing the class name at the same time (simply check the With XIB for user interface checkbox when creating the class files)

3. Similarly, create two view controller classes called `FirstViewController` and `SecondViewController`, which will be the two view controllers our custom tab bar controller will display. 4. We must set where the container will draw its child view controllers. We also need a way to change the view controller which is displayed. Open the `xib` file and add two subviews to `MyTabBarController`'s view:

* A simple `UIView`, filling most of the view controller's view, and which you must bind to the view controller's `placeholderViews` outlet collection. Views in `placeholderViews` are where child view controller's views will be displayed. In this example, we only need one placeholder view since we want to display one child view controller at a time. I here set the background color of the view to blue so that it can be seen in Interface Builder, but you should set it to a more appropriate color in `-[MyTabBarController viewDidLoad]` (otherwise, this is the background color which will be seen during transition animations):

    ```objective-c
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        
        UIView *placeholderView = [self placeholderViewAtIndex:0];
        placeholderView.backgroundColor = self.view.backgroundColor;
    }
    ```
* A segmented control to change which view controller is displayed by the container

5. We need to implement a method which will be responsible of setting the view controller to be displayed in the placeholder view. This is achieved by calling one of the -[HLSPlaceholderViewController setInsetViewController...] methods, using a flip transition animation class:

   - (void)displayPage:(NSInteger)page animated:(BOOL)animated
   {
       Class transitionClass = animated ? [HLSTransitionFlipHorizontally class] : [HLSTransitionNone class];
       
       UIViewController *viewController = nil;
       if (page == 0) {
           viewController = [[FirstViewController alloc] init];
       }
       else if (page == 1) {
           viewController = [[SecondViewController alloc] init];
       }
       else {
           return;
       }
       
       [self setInsetViewController:viewController
                            atIndex:0
                withTransitionClass:transitionClass];
   }

   We call this method in the -viewDidLoad method to initially install the first view controller (without animation), as well as in a -changePage: action method we bind to the segmented control:

   - (void)viewDidLoad
   {
       [super viewDidLoad];
           
       UIView *placeholderView = [self placeholderViewAtIndex:0];
       placeholderView.backgroundColor = self.view.backgroundColor;
       
       [self displayPage:0 animated:NO];
   }
   
   - (IBAction)changePage:(id)sender
   {
       UISegmentedControl *segmentedControl = sender;
       [self displayPage:segmentedControl.selectedSegmentIndex animated:YES];
   }

6. Edit both FirstViewController and SecondViewController xib files so that their view sizes match the one of MyTabBarController placeholder view. Even if HLSPlaceholderViewController resizes the frame of its child view controllers to match the placeholder view bounds, it is better to design at the proper scale. Also add two different labels 1 and 2 in the middle of those views, with proper autoresizing mask (flexible height and width)

7. Finally, display a `MyTabBarController` instance as root view controller of your application:

```objective-c
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    
    self.window.rootViewController = [[MyTabBarController alloc] init];
    
    return YES;
}
```

8. Build and run the application. Try to rotate the view and to switch between pages. If your autoresizing masks were set up properly, the labels should behave properly when rotating. Congratulations! You have implemented your own UITabBarController-like container!