CODEWITHSUNDEEP
iosobjective-c
armnotstrong
armnotstrong

Reputation: 9065

Make a tab switched layout with Objective-C iOS

It is common design pattern that most mobile app use

+-------------------------+
|         title           |
+-------------------------+
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
|        content          |
|                         |
|                         |
|                         |
|                         |
|                         |
+-------------------------+
| |tab1|   |tab2|  |tab3| |
+-------------------------+

The main idea is when user press tab1 or tab2 or tab3 the content will change accordingly.

What I am doing that now(with code not storyboard) is that make a ViewController to show the content and the bottom panel and make a UINavigationController to display the title 

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];        
    ViewController *viewController = [[ViewController alloc] init];   
    UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:viewController];
    self.window.rootViewController = nav;
    [self.window makeKeyAndVisible];
}

and when user press bottom tab change the content view while changing the content with subviews, but I found that when changing the content I found that:

How to implement such a layout?

Upvotes: 1

Views: 161

Answers (3)

ColeX
ColeX

Reputation: 14475

We often use UITabbarController as rootVC of Window.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    ViewController1 *vc1 = [ViewController1 new];
    vc1.tabBarItem.title = @"VC1";
    vc1.tabBarItem.image = [UIImage imageNamed:@"1.png"];

    ViewController2 *vc2 = [ViewController2 new];
    vc2.tabBarItem.title = @"VC2";
    vc2.tabBarItem.image = [UIImage imageNamed:@"2.png"];

    ViewController3 *vc3 = [ViewController3 new];
    vc3.tabBarItem.title = @"VC3";
    vc3.tabBarItem.image = [UIImage imageNamed:@"3.png"];

    UINavigationController *nav1 = [[UINavigationController alloc]initWithRootViewController:vc1];
    UINavigationController *nav2 = [[UINavigationController alloc]initWithRootViewController:vc2];
    UINavigationController *nav3 = [[UINavigationController alloc]initWithRootViewController:vc3];

    UITabBarController *tab = [UITabBarController new];
    tab.viewControllers = @[nav1,nav2,nav3];

    self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
    self.window.rootViewController = tab;
    [self.window makeKeyAndVisible];

    return YES;
}

RelationShip between them:

enter image description here

When you click the tabbarItem, the view on windows changes between the viewController.View in the navation. They don't affect each other.

Upvotes: 1

Vikas Rajput
Vikas Rajput

Reputation: 1874

You can use Container View For Change the view on button Press without Tab bar controller ,See the url Below

How to use a 'Container View' in iOS?

Upvotes: -2

Marco Boschi
Marco Boschi

Reputation: 2333

Take a look at UITabBarController, a default component that takes care of displaying the tabs icon in the bottom part of the screen and automatically manages the transition between the tabs. Each tab is also an independent view controller so your code is more organized. For the title then you can use a UINavigationController as the root controller for every tab you want to have the title bar

Take a look at this answer for a step by step guide.

Upvotes: 2

Related Questions