iOS Programmatically: Exploring Navigation Controller and Tab Bar Controller

Sekarang kita akan belajar mengenai Navigation Controller dan TabBar Controller dengan contoh aplikasi simple. Selain itu kita juga  belajar membuat aplikasi secara programmatic atau membuat dari awal dengan template kosong (Empty Application), Ini benar-benar membuat dari nol. Kenapa tidak menggunakan template yang sudah disediakan seperti Master Detail Application atau Single Application? Supaya kita tahu apa yang “mereka” lakukan; dengan coding from scratch pula kita lebih memahami.

Download Source code | GitHub

Mari kita mulai:

1. Buka Xcode lalu pilih file new project

1

2. Pilih Empty Application

2

3.  Buat nama produknya, nama organisasi dan company identifier. Pilih device yang akan digunakan (Contohnya iPhone) lalu yang di centang hanya Use Automatic Reference Counting (ARC). Disini kita belum membutuhkan Core Data dan Unit Testing, jadi abaikan saja.

3

4. Klik create, jika tidak diperlukan souce control (git repo local) tidak usah di centang.

4

5.  Drag-drop images yang dibutuhkan untuk TabBar nanti, ke Supporting Files:

5

Isi file asset:

assets

6.  Klik kanan di project navigator, buat new file Coca Touch->Objective-C Class->Next

6

Lakukan hal yang sama pada langkah ini dengan menambahkan nama class yang berbeda, Dengan subclass UIViewController.

Berikut nama class yang harus dibuat:

  • FavoriteViewController
  • AboutViewController
  • SettingViewController
  • SearchViewController

Sehingga hasilnya seperti di Project Navigator berikut:

project nav

7.  Buat sebuah interface dengan cara pada project navigator; klik kanan->new file->pilih menu bagian iOS->User interface->Empty

9

Klik Next -> Pilih Device iPhone -> Next Save user interfacenya dengan nama MainWindow->Create

10

8. Sekarang kita akan memulai coding untuk membuat aplikasi iOS (iPhone, iPad atau iPod) yang simple karena emang saya sendiri masih amatir. Mari kita mulai.

Buka file AppDelegate.h (header)

Ubah jadi seperti berikut:

#import <UIKit/UIKit.h>

@interface AppDelegate : UIResponder <UIApplicationDelegate>
@property (strong, nonatomic) UINavigationController *homeNav;
@property (strong, nonatomic) UINavigationController *favNav;
@property (strong, nonatomic) UINavigationController *searchNav;
@property (strong, nonatomic) UINavigationController *settingNav;
@property (strong, nonatomic) UINavigationController *aboutNav;
@property (strong, nonatomic) UITabBarController *mainTabBar;
@property (strong, nonatomic) UIWindow *window;

@end

9. Buka file AppDelegate.m (Implementasi)

Lakukan import file-file yang telah dibuat sebelumnya

#import "AppDelegate.h"
#import "HomeViewController.h"
#import "FavoriteViewController.h"
#import "SearchViewController.h"
#import "SettingViewController.h"
#import "AboutViewController.h"

Synthesize dari masing-masing property yang telah di buat di AppDelegate.h ke AppDelegate.m tepat dibawah @implementation AppDelegate 

@synthesize homeNav, favNav, searchNav, settingNav, aboutNav, mainTabBar;

Pada didFinishLaunchingWithOptions tambahkan sehingga seperti berikut:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
/*Override point for customization after application launch.*/

self.window.backgroundColor = [UIColor whiteColor]; [self.window makeKeyAndVisible];

HomeViewController *homeView = [[HomeViewController alloc] init]; [homeView setTitle:@"HOME"];'

FavoriteViewController *favView = [[FavoriteViewController alloc] init];
[favView setTitle:@"FAVORITE"];

SearchViewController *searchView = [[SearchViewController alloc] init];
[searchView setTitle:@"SEARCH"];

SettingViewController *settingView = [[SettingViewController alloc] init];
[settingView setTitle:@"SETTING"];

AboutViewController *aboutView = [[AboutViewController alloc] init];[aboutView setTitle:@"ABOUT US"];

homeNav = [[UINavigationController alloc] initWithRootViewController: homeView];
favNav = [[UINavigationController alloc]

initWithRootViewController: favView];

searchNav = [[UINavigationController alloc] initWithRootViewController: searchView];

settingNav = [[UINavigationController alloc]
initWithRootViewController: settingView];

aboutNav = [[UINavigationController alloc] initWithRootViewController: aboutView]; NSArray *menus = [NSArray arrayWithObjects:homeNav,favNav,searchNav,settingNav,aboutNav,nil]; mainTabBar = [[UITabBarController alloc] init];

[mainTabBar setViewControllers:menus];
self.window.rootViewController = mainTabBar;

UITabBarItem *item0Home = [mainTabBar.tabBar.items objectAtIndex:0];[item0Home setTitle:@"Home"];
[item0Home setImage:[UIImage imageNamed:@"home.png"]];

UITabBarItem *item1Fav = [mainTabBar.tabBar.items objectAtIndex:1];[item1Fav setTitle:@"Favorite"];
[item1Fav setImage:[UIImage imageNamed:@"fav.png"]];

UITabBarItem *item2Search = [mainTabBar.tabBar.items objectAtIndex:2];[item2Search setTitle:@"Search"];
[item2Search setImage:[UIImage imageNamed:@"search.png"]];

UITabBarItem *item3setting = [mainTabBar.tabBar.items objectAtIndex:3];
[item3setting setTitle:@"Setting"];
[item3setting setImage:[UIImage imageNamed:@"setting.png"]];

UITabBarItem *item4About = [mainTabBar.tabBar.items objectAtIndex:4];[item4About setTitle:@"About Us"];
[item4About setImage:[UIImage imageNamed:@"about.png"]];

return YES;
}

Berikut file lengkap dari AppDelegate.m 

#import "AppDelegate.h"
#import "HomeViewController.h"
#import "FavoriteViewController.h"
#import "SearchViewController.h"
#import "SettingViewController.h"
#import "AboutViewController.h"

@implementation AppDelegate
@synthesize homeNav, favNav, searchNav, settingNav, aboutNav, mainTabBar;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

/* Override point for customization after application launch.*/
self.window.backgroundColor = [UIColor whiteColor]; [self.window makeKeyAndVisible];

HomeViewController *homeView = [[HomeViewController alloc] init];[homeView setTitle:@"HOME"];

FavoriteViewController *favView = [[FavoriteViewController alloc] init];
[favView setTitle:@"FAVORITE"];

SearchViewController *searchView = [[SearchViewController alloc] init];
[searchView setTitle:@"SEARCH"];

SettingViewController *settingView = [[SettingViewController alloc] init];
[settingView setTitle:@"SETTING"];

AboutViewController *aboutView = [[AboutViewController alloc] init];
[aboutView setTitle:@"ABOUT US"];

homeNav = [[UINavigationController alloc] initWithRootViewController: homeView];
favNav = [[UINavigationController alloc] initWithRootViewController: favView];
searchNav = [[UINavigationController alloc] initWithRootViewController: searchView];
settingNav = [[UINavigationController alloc] initWithRootViewController: settingView];
aboutNav = [[UINavigationController alloc] initWithRootViewController: aboutView];

NSArray *menus = [NSArray  arrayWithObjects:homeNav,favNav,searchNav,settingNav,aboutNav,nil];

mainTabBar = [[UITabBarController alloc] init]; [mainTabBar setViewControllers:menus];
self.window.rootViewController = mainTabBar;
UITabBarItem *item0Home = [mainTabBar.tabBar.items objectAtIndex:0];

[item0Home setTitle:@"Home"];
[item0Home setImage:[UIImage imageNamed:@"home.png"]];

UITabBarItem *item1Fav = [mainTabBar.tabBar.items objectAtIndex:1];
[item1Fav setTitle:@"Favorite"];
[item1Fav setImage:[UIImage imageNamed:@"fav.png"]];

UITabBarItem *item2Search = [mainTabBar.tabBar.items objectAtIndex:2];[item2Search setTitle:@"Search"];
[item2Search setImage:[UIImage imageNamed:@"search.png"]];

UITabBarItem *item3setting = [mainTabBar.tabBar.items objectAtIndex:3];
[item3setting setTitle:@"Setting"];
[item3setting setImage:[UIImage imageNamed:@"setting.png"]];

UITabBarItem *item4About = [mainTabBar.tabBar.items objectAtIndex:4];
[item4About setTitle:@"About Us"];
[item4About setImage:[UIImage imageNamed:@"about.png"]];

return YES;
}

- (void)applicationWillResignActive:(UIApplication *)application
{
/* Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.*/
/*Use this method to pause ongoing tasks, disable timers, and throttle down OpenGL ES frame rates. Games should use this method to pause the game.*/
}

- (void)applicationDidEnterBackground:(UIApplication *)application
{
/* Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later. */
/*If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.*/
}

- (void)applicationWillEnterForeground:(UIApplication *)application
{
/* Called as part of the inactive state; here entering the background.
the transition from the background to you can undo many of the changes made on*/
}

- (void)applicationDidBecomeActive:(UIApplication *)application
{
/* Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.*/
}

- (void)applicationWillTerminate:(UIApplication *)application
{
/* Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.*/
}

@end

Buka file HomeViewController.m tambahkan pada viewDidLoad

- (void)viewDidLoad
{
[super viewDidLoad];
/* Do any additional setup after loading the view.*/
self.view.backgroundColor = [UIColor greenColor];
}

Lakukan hal yang sama pada AboutViewController.m 

- (void)viewDidLoad
{
[super viewDidLoad];
 // Do any additional setup after loading the view.
self.view.backgroundColor = [UIColor greenColor];
}

Lalu file FavoriteViewController.m 

- (void)viewDidLoad
{
[super viewDidLoad];
 // Do any additional setup after loading the view.
self.view.backgroundColor = [UIColor yellowColor];
}

Lalu file SearchViewController.m 

- (void)viewDidLoad
{
[super viewDidLoad];
/* Do any additional setup after loading the view.*/
self.view.backgroundColor = [UIColor blueColor];
}

Finally, Run it! (Command+R)

12