2.2 UITabController

UITabBarController Class Reference

iOS View Controllerプログラミングガイド

概要

UITabBarController Class Reference から引用

UITabBarController は TabBar インタフェースを用いて ViewController を管理するコンテナです。

View Controller Programming Guide for iOS から引用

UITabBarController における重要な property と method は以下の通りです。

• viewControllers - viewController が含まれている NSArray
• selectedViewController - 現在表示されている ViewController を取得、別のViewControllerに変更可能なプロパティ
• delegate - 表示変更などのイベントを取得できる delegate UITabBarControllerDelegate Protocol

tab の表示は ViewController の UITabBarItem を設定することで変更可能

実装

プロジェクト作成

moreViewControllers と tabBarItem

viewControllers に 5 つ以上の ViewController を管理させる場合、Tab では 4 つを管理し、それ以外の ViewController は more として管理されます。

iOS View Controllerプログラミングガイド から引用

MixiFirstViewController.h

#import <UIKit/UIKit.h>

@interface MixiFirstViewController : UIViewController

-(id)initWithImageName:(NSString *)imageNmae;

@end

MixiFirstViewController.m

-(id)initWithImageName:(NSString *)imageName;
{
    self = [super initWithNibName:@"MixiFirstViewController" bundle:nil];
    if (self) {
        self.title = imageName;
        self.tabBarItem.image = [UIImage imageNamed:imageName];
    }
    return self;
}

MixiAppDelegate.h

@interface MixiAppDelegate : UIResponder <UIApplicationDelegate, UITabBarControllerDelegate>
@property (strong, nonatomic) UIWindow *window;
@property (strong, nonatomic) UITabBarController *tabBarController;
@end

MixiAppDelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    UIViewController *vc1 = [[MixiFirstViewController alloc] initWithImageName:@"first"];
    UIViewController *vc2 = [[MixiSecondViewController alloc] initWithNibName:@"MixiSecondViewController" bundle:nil];
    UIViewController *vc3 = [[MixiFirstViewController alloc] initWithImageName:@"third"];
    UIViewController *vc4 = [[MixiFirstViewController alloc] initWithImageName:@"fourth"];
    UIViewController *vc5 = [[MixiFirstViewController alloc] initWithImageName:@"fifth"];
    UIViewController *vc6 = [[MixiFirstViewController alloc] initWithImageName:@"sixth"];

    self.tabBarController = [[UITabBarController alloc] init];
    self.tabBarController.viewControllers = @[vc1, vc2, vc3, vc4, vc5, vc6];
    self.window.rootViewController = self.tabBarController;
    [self.window makeKeyAndVisible];
    return YES;
}

画像ファイルはこちら

tab のバッジ

iOS View Controllerプログラミングガイド から引用

tabBar の上にバッジを表示することが可能です。

self.tabBarItem.badgeValue = @"5";

Storyboardを用いた方法

Storyboardを用いることで、視覚的にTabBarControllerとその中に入るViewControllerをデザインすることができます。 プロジェクトテンプレートから作成するときに"Tabbed Application"を選ぶと、起動時にTabBarControllerが表示されるアプリケーションが作成されます。

またそのUIはMain.storyboardに記載されています。

新しくViewControllerを追加する際は、ViewControllerをstoryboard上に追加し、Tab Bar Controller から controlを押しながらViewControllerへドラッグします

その後、segueは "view controllers" を選択します。

このように追加したViewControllerにSegueが追加されていれば完了です。

演習

• storyboard上のTabBarControllerに対して、新しくViewControllerを追加してください

解答は SampleProjects/2.2/MixiTabSample2 をごらんください