UITabBarのボタンを大きな画像で表示する

一般的にはtabはアイコン的な画像(30x30)とタイトルのテキストで作成することが多いです。
カスタマイズの手法など探してみても、背景や文字色、アイコン色のカスタマイズの方法が上位に出てきます。

今回は以下のようにtabのボタン全体を画像で表現したかったので、方法をメモ。

[[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"trans.png"]]; // tabの背景透過
[[UITabBar appearance] setShadowImage:[UIImage imageNamed:@"trans.png"]]; // tabの上の線がでないように透過
// タイトル文字が設定されても見えないようにするため、文字色を透過
[[UITabBarItem appearance] setTitleTextAttributes:@{
        NSForegroundColorAttributeName:[UIColor clearColor]
} forState:UIControlStateNormal];
UIViewController *controller1 = [[UIViewController alloc]init] ;
UIViewController *controller2 = [[UIViewController alloc]init] ;
UITabBarController *tabBarController = [[UITabBarController alloc]init] ;

// controller1
[controller1.tabBarItem setSelectedImage:[[UIImage imageNamed:@"tab1_on.png"]
        imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]
];
[controller1.tabBarItem setImage:[[UIImage imageNamed:@"tab1_off.png"]
        imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]
];
[controller1.tabBarItem setImageInsets:UIEdgeInsetsMake(5.5,0,-5.5,0)] ; // 表示位置を調整

// controller2
[controller2.tabBarItem setSelectedImage:[[UIImage imageNamed:@"tab2_on.png"]
        imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]
];
[controller2.tabBarItem setImage:[[UIImage imageNamed:@"tab2_off.png"]
        imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]
];
[controller2.tabBarItem setImageInsets:UIEdgeInsetsMake(5.5,0,-5.5,0)] ; // 表示位置を調整

[tabBarController setViewControllers:@[controller1,controller2]];
self.window.rootViewController = tabBarController ;

デモプロジェクト

sekitaka/ImageTabDemo · GitHub