Lala's Program Note 實作記錄: 2.標籤列架構

since: 2011/08/18
update: 2011/09/16

參考: Creating an iOS 4 iPhone Multiview Application using the Tab Bar (Xcode 4) - Techotopia

A. 專案目錄規劃:
   專案目錄 > New Group:

   新增 3 個群組資料夾: images、MyClasses、XIB, 並可將相關檔案移至資料夾內.

B. 新增 root controller 程式碼: (改成用 coding 的方式)
1. 在 Lala_s_Program_NoteAppDelegate.h 新增 UITabBarController
(當作 root controller)的相關程式碼:

@interface Lala_s_Program_NoteAppDelegate : NSObject
{
UIWindow *window;

UITabBarController *tabBarController; 

}

@property (nonatomic, retain) IBOutlet UIWindow *window;

@property (nonatomic, retain) IBOutlet UITabBarController *tabBarController;

2. 在 Lala_s_Program_NoteAppDelegate.h 新增相關程式碼:

@synthesize window = _window;

@synthesize tabBarController;

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

{
// Override point for customization after application launch.

tabBarController = [[UITabBarController alloc] init];

[self.window addSubview:tabBarController.view];
[self.window makeKeyAndVisible];

return YES;

}

- (void)dealloc

{

[tabBarController release];
[_window release];

[__managedObjectContext release];

[__managedObjectModel release];

[__persistentStoreCoordinator release];

[super dealloc];

}

(由於已改成用 coding 的方式, 因此這段不用做, 僅留參考用)

C. 編輯 MainWindow.xib 檔案:

1. (重要)點選 MainWindow.xib 後, 再點最下方的 right facing arrow (朝右方的箭頭), 以顯示 Placeholder 跟 Objects 的 panel .

2. (重要)從 Object library panel (View -> Utilities -> Object Library) 點選 Tab Bar Controller , 並拖拉至 Objects panel 內的 Window icon 下方, 並將新增加的 Tab Bar Controller Object 左邊的箭頭點開. 接著, 依次選取展開的 View Controller - Item 1 與 View Controller - Item 2, 並按 delete 刪除, 結果如下:

3. 連接接口:
   先點選左方 Objects 下的 Lala's Program NoteAppDelegate,
   接著點住右上方 Outlets 下的 Tab Bar Controller 拖拉至 UI 上.

D. 製作給 Categories, Buy 與 Info 頁籤使用的圖檔:
說明: 在 Mac App Store 買了一個 icon 的製作軟體:
Icon Maker , 先用 Icon Maker 製作 icon,
後來發現無法將背景設為透明, 因此再用 Photoshop 處理,

並輸出成適當的 size.

1. 圖檔規格:
   (a). PNG 檔
   (b). 建議 size: 30 * 30 ~ 40 * 40(pixel)
   (c). 不能為彩色的圖片(一般使用灰色)
   (d). 透明背景

2. 圖檔內容:
categories-35.png (35 * 35)

categories-35@2x.png (70 * 70)

buy-45.png (45 * 45)

buy-45@2x.png (90 * 90)

info-35.png (35 * 35)

info-35@2x.png (70 * 70)

3. 加入圖檔到 images 群組.

記得勾選: Copy items into destination group's folder

E. 增加 Categories(筆記本分類) 頁籤:
   1. 專案目錄 > New File: 

   2. iOS > Cocoa Touch > UIViewController subclass > Next

   3. Subclass 選擇: UITableViewController,
      並勾選(預設): With XIB for user interface > Next

   4. Save As: NoteBookViewController.m

   5. 開啟 NoteBookViewController.m 檔案, 修改三個 method:
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    // Return the number of sections.
    //return 0;
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    //return 0;
    return 1;
}

- (id)initWithStyle:(UITableViewStyle)style
{    
    self = [super initWithStyle:style];
    if (self) {
        // Custom initialization
        self.title = @"Categories";
    }
    return self;
}

   6. 開啟 Lala_s_Program_NoteAppDelegate.m 檔案, 修改如下:
      a. import NoteBookViewController.h
         #import "NoteBookViewController.h"

      b. 修改: application: didFinishLaunchingWithOptions: 方法如下:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.
    tabBarController = [[UITabBarController alloc] init];
   
    /* Detect retina screen */
    BOOL hasHighResScreen = NO;
    if ([UIScreen instancesRespondToSelector:@selector(scale)]) {
        CGFloat scale = [[UIScreen mainScreen] scale];
        if (scale > 1.0) {
            hasHighResScreen = YES;
        }
    }
   
    /* ImageName */
    NSString *categoriesImageName = nil;
    NSString *purchaseImageName = nil;
    NSString *infoImageName = nil;
    if (hasHighResScreen) {
        categoriesImageName = @"categories-35@2x";
        purchaseImageName = @"buy-45@2x";
        infoImageName = @"info-35@2x";
    }
    else {
        categoriesImageName = @"categories-35";
        purchaseImageName = @"buy-45";
        infoImageName = @"info-35";
    } 

    /* A. for NoteBookViewController */
    // 1. Create a instance of NoteBookViewController
    NoteBookViewController *noteBookViewController = [[NoteBookViewController alloc] initWithStyle:UITableViewStylePlain];
    
    // 2. Create a instance of UITabBarItem
    UITabBarItem *noteBookItem = [[UITabBarItem alloc] initWithTitle:@"Categories" image:[UIImage imageNamed:categoriesImageName] tag:0];
    noteBookViewController.tabBarItem = noteBookItem;
    categoriesImageName = nil;
    [noteBookItem release];

    // 3. Wrap it in an instance of UINavigationController
    UINavigationController *navNoteController = [[[UINavigationController alloc] initWithRootViewController:noteBookViewController] autorelease];
   
    // 4. Release it
    [noteBookViewController release];
   
    // 5. Add it to the tab abr controller
    [tabBarController setViewControllers:[NSArray arrayWithObjects:navNoteController, nil]];
   
    [self.window addSubview:tabBarController.view];
   
    [self.window makeKeyAndVisible];
    return YES;
}


   7. 結果如下:

F. 增加 Favorite(我的最愛 ) 頁籤:
   1. 同 E. 1 ~ 4 之步驟, 檔名取為: FavoriteViewController.m 

   2. 開啟 FavoriteViewController.m 檔案, 修改三個 method:
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    // Return the number of sections.
    //return 0;
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    //return 0;
    return 1;
}

- (id)initWithStyle:(UITableViewStyle)style
{   
    self = [super initWithStyle:style];
    if (self) {
        // Custom initialization
        self.title = @"Favorite";
    }
    return self; 
 }


   3. 開啟 Lala_s_Program_NoteAppDelegate.m 檔案, 修改如下:
     a. import FavoriteViewController.h
         #import "FavoriteViewController.h"

      b. 修改: application: didFinishLaunchingWithOptions: 方法如下:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.
    /*B. for FavoriteViewController */
    // 1. Create a instance of NoteBookViewController
    FavoriteViewController *favoriteViewController = [[FavoriteViewController alloc] initWithStyle:UITableViewStylePlain];
   
    // 2. Create a instance of UITabBarItem
    UITabBarItem *favoriteItem = [[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemFavorites tag:1];
    favoriteViewController.tabBarItem = favoriteItem;
    [favoriteItem release]; 

    // 3. Wrap it in an instance of UINavigationController
    UINavigationController *navFavoriteController = [[[UINavigationController alloc] initWithRootViewController:favoriteViewController] autorelease];
   
    // 4. Release it
    [favoriteViewController release];
   
    // 5. Add it to the tab abr controller
    [tabBarController setViewControllers:[NSArray arrayWithObjects:navNoteController, navFavoriteController, nil]];
   
    [self.window addSubview:tabBarController.view];
   
    [self.window makeKeyAndVisible];
    return YES;
}
   4. 結果如下:

G. 增加 Search(搜尋) 頁籤:
   1. 同 E. 1 ~ 4 之步驟(Subclass 選擇: UIViewController),
      檔名取為: SearchViewController.m 

   2. 開啟 SearchViewController.m 檔案, 修改如下:
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
        //@add
        self.title = @"Search";
    }
    return self;
}


   3. 開啟 Lala_s_Program_NoteAppDelegate.m 檔案, 修改如下:
     a. import SearchViewController.h
         #import "SearchViewController.h"

      b. 修改: application: didFinishLaunchingWithOptions: 方法如下:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.
    /* C. for SearchViewController */
    // 1. Create a instance of SearchViewController
    SearchViewController *searchViewController = [[SearchViewController alloc] init];
   
    // 2. Create a instance of UITabBarItem
    UITabBarItem *searchItem = [[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemSearch tag:2];
    searchViewController.tabBarItem = searchItem;
    [searchItem release];

    // 3. Wrap it in an instance of UINavigationController
    UINavigationController *navSearchController = [[[UINavigationController alloc] initWithRootViewController:searchViewController] autorelease];

    // 4. Release it
    [searchViewController release];


    // 5. Add it to the tab abr controller
    [tabBarController setViewControllers:[NSArray arrayWithObjects:navNoteController, navFavoriteController, navSearchController, nil]];
   
    ....


    [self.window addSubview:tabBarController.view];
   
    [self.window makeKeyAndVisible];
    return YES;
}


   4. 結果如下:

H. 增加 Purchase(購買) 頁籤:
   1. 同 E. 1 ~ 4 之步驟, 其中 Subclass 選擇: UIViewController, 檔名取為: PurchaseViewController.m 


   2. 開啟 Lala_s_Program_NoteAppDelegate.m 檔案, 修改如下:
     a. import PurchaseViewController.h
         #import "PurchaseViewController.h"

      b. 修改: application: didFinishLaunchingWithOptions: 方法如下:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.
    /* D. for PurchaseViewController */
    // 1. Create a instance of PurchaseViewController
    PurchaseViewController *purchaseViewController = [[PurchaseViewController alloc] init];    
   
    // 2. Create a instance of UITabBarItem
    UITabBarItem *purchaseItem = [[UITabBarItem alloc] initWithTitle:@"Buy" image:[UIImage imageNamed:purchaseImageName] tag:3];
    purchaseViewController.tabBarItem = purchaseItem;
    purchaseImageName = nil;
    [purchaseItem release];  

    // 3. Add it to the tab abr controller
    [tabBarController setViewControllers:[NSArray arrayWithObjects:navNoteController, navFavoriteController, navSearchController, purchaseViewController, nil]];
   
    // 4. Release it
    [purchaseViewController release];

    [self.window addSubview:tabBarController.view];
   
    [self.window makeKeyAndVisible];
    return YES;
}


   4. 結果如下:

I. 增加 Info(資訊) 頁籤:
   1. 同 E. 1 ~ 4 之步驟, 其中 Subclass 選擇: UIViewController, 檔名取為: InfoViewController.m 


   2. 開啟 Lala_s_Program_NoteAppDelegate.m 檔案, 修改如下:
     a. import InfoViewController.h
         #import "InfoViewController.h"

      b. 修改: application: didFinishLaunchingWithOptions: 方法如下:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.
    /* E. for InfoViewController */
    // 1. Create a instance of InfoViewController
    InfoViewController *infoViewController = [[InfoViewController alloc] init];    
   
    // 2. Create a instance of UITabBarItem
    UITabBarItem *infoItem = [[UITabBarItem alloc] initWithTitle:@"Info" image:[UIImage imageNamed:infoImageName] tag:4];
    infoViewController.tabBarItem = infoItem;
    infoImageName = nil;
    [infoItem release]; 

    // 3. Add it to the tab abr controller
    [tabBarController setViewControllers:[NSArray arrayWithObjects:navNoteController, navFavoriteController, navSearchController, purchaseViewController, infoViewController, nil]];
   
    // 4. Release it
    [infoViewController release];

    [self.window addSubview:tabBarController.view]; //@add
   
    [self.window makeKeyAndVisible];
    return YES;
}


   4. 結果如下:

=================================================================

使用 Interface Builder 的相關參考: (在這邊未使用到)

1. 修改 Tab Bar Item 屬性.

a. 屬性欄位說明:
(a). Badge (標記):可放置紅色圖示來顯示數目.
(b). Identifier:
- 選擇標準項目(Favorites, Search ....), 自動設定好Title 與 Image 欄位值.
- Custom: 可自定 Title 與 Image 欄位.
(c). Title: Tab Bar Item 的文字標題.
(d). Image: Tab Bar Item 的圖檔.

b. 在這裡, 除了 Favorites 與 Search 使用標準項目, 其餘的
Categories, Buy 與 Info 皆採用 Custom 的方式, 因此要自行提供圖檔.

2. 設定每個 Tab Bar 的 View Controller 屬性.

a. Title: 留白(Tab Bar Controller 不會用到)
b. Layout: Wants Full Screen(全螢幕), 不需勾選
c. NIB Name: 指定 NIB Name (不需加上 .xib 副檔名)
d. Resize View From NIB: 縮放 View (保留此設定)