Penta creation

ホームへ
2012年11月28日

UITabBarのデザインを変更する

UITabBarのデザインを変更する方法をまとめます。

UITabBarのデザインを変更する

変更するのは以下の4点です。

・UITabBarの背景画像
・Selection Indicator Image
・アイコン
・タブのタイトルテキストの位置とカラー

● UITabBarの背景画像を変更する

UITabBarの背景画像は、320px × 49pxの画像(UIImage)をUIAppearanceを使用して下記のように設定します。※Retina用には倍の解像度の画像が必要です。

    [[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"ファイル名"]];

● SelectionIndicatorImageを変更する

Selection Indicator Imageは、タブが選択されている時の、背景画像とアイコンとの間に描画される「選択中」であることを示す画像です。Selection Indicator Imageの画像サイズは、( 320px / タブの個数 ) × 49pxで、こちらもUIAppearanceを使用して、下記のように設定します。
※デフォルトでは、白色半透明の角丸短形が使われています。
※Retina用には倍の解像度の画像が必要です。

   [[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"ファイル名"]];

● アイコンを変更する

アイコンを変更するには、選択時、非選択時の画像を用意し、次のように設定します。
※この方法は、UIAppearanceを使って一括設定することはできません。

   [self.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"選択時の画像ファイル名"] withFinishedUnselectedImage:[UIImage imageNamed:@"非選択時の画像ファイル名"]];

● タブのタイトルテキストの位置とカラーを変更する

タブの画像下に表示されるタイトルテキストの位置を変更するには、UITabBarItemに対してオフセットを指定します。また、カラーを設定するには、setTitleTextAttributesにNSDictionaryで指定します。

    //タブのテキスト位置設定
    [[UITabBarItem appearance] setTitlePositionAdjustment:UIOffsetMake(0, -2)];

    //タブのテキストカラー設定
    [[self tabBarItem] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor],UITextAttributeTextColor,nil] forState:UIControlStateNormal];

UITabBarControllerを継承するMainTabBarControllerのソースコードをまとめると下記になります。
※StoryBoardでこのクラスをTabBarControllerのクラスとして指定します。

MainTabBarController.h

MainTabBarController.hは、UITabBarControllerを継承します。

#import <UIKit/UIKit.h>

@interface MainTabBarController : UITabBarController
@end

MainTabBarController.m

MainTabBarController.mは以下の通りです。

#import "MainTabBarController.h"

@implementation MainTabBarController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //背景画像、SelectionIndicatorImageを設定
    [[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"tabbar_bk.jpg"]];
    [[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"tab_indicator.png"]];
    
    //ViewControllerを取得
    UIViewController *viewController_1 = [self.viewControllers objectAtIndex:0];
    UIViewController *viewController_2 = [self.viewControllers objectAtIndex:1];
    UIViewController *viewController_3 = [self.viewControllers objectAtIndex:2];
    
    //各ViewControllerのtabBarItemを設定
    viewController_1.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"リスト" image:[UIImage imageNamed:@"first.png"] tag:0];
    viewController_2.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"新規登録" image:[UIImage imageNamed:@"second.png"] tag:1];
    viewController_3.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"設定" image:[UIImage imageNamed:@"third.png"] tag:2];
   
    //各ViewControllerのtabBarItemの選択、非選択時の画像設定
    [viewController_1.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"first_o.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"first.png"]];
    [viewController_2.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"second_o.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"second.png"]];
    [viewController_3.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"third_o.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"third.png"]];
    
    //タブのテキスト位置設定
    [[UITabBarItem appearance] setTitlePositionAdjustment:UIOffsetMake(0, -2)];

    //タブのテキストカラー設定
    [[viewController_1 tabBarItem] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor],UITextAttributeTextColor,nil] forState:UIControlStateNormal];
    [[viewController_2 tabBarItem] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor], UITextAttributeTextColor,nil] forState:UIControlStateNormal];
    [[viewController_3 tabBarItem] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor], UITextAttributeTextColor,nil] forState:UIControlStateNormal];
    
}

@end
次の記事へ

ALAssetsLibraryを使う(1)

ページトップへ