Objective-Cで UITabBarをカスタマイズする方法

Objective-Cで画像を使用し UITabBarをカスタマイズする方法を以下に記載します。

下記よりソースコードのダウンロードが行えます。

ダウンロード

必要な画像の寸法 (Retina用と標準解像度用の2種類必要)

  1. 背景画像: W640H98px (W320H49px) ※サンプル画像: [email protected]
  2. アイコン画像: W60H60px (W30H30px) ※サンプル画像: [email protected]
  3. 選択中のアイコン背景画像: W128H98px (W64H49px) ※サンプル画像: [email protected] この画像はメニューの数に応じて横幅が変わります。例えばメニューが4個の場合は、W160pxになります。

画像の指定方法

背景画像の変更

1
[[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"tab_background.png"]];

選択中背景画像の変更

1
[[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"tab_selection_indicator.png"]];

アイコンの指定方法

1
2
[tabFirstVC.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"tab_icon1-o.png"]
                    withFinishedUnselectedImage:[UIImage imageNamed:@"tab_icon1.png"]];

タイトルの指定方法

1
[tabFirstVC setTitle:@"First"];

タイトル位置(オフセット)の指定方法

1
[[UITabBarItem appearance] setTitlePositionAdjustment:UIOffsetMake(0, -1)];

タイトル色の指定方法

1
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor], UITextAttributeTextColor,nil] forState:UIControlStateNormal];

選択中タイトル色の指定方法

1
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor colorWithRed:0.91f green:1.0f blue:0.74f alpha:1.0f], UITextAttributeTextColor,nil] forState:UIControlStateSelected];

ソースコード

AppDelegate.h

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#import "FirstViewController.h"
#import "SecondViewController.h"
#import "ThirdViewController.h"
#import "FourthViewController.h"
#import "FifthViewController.h"

@interface AppDelegate : UIResponder <UIApplicationDelegate> {
    UITabBarController *tabBarController_;
}

#pragma mark property prototype
@property (strong, nonatomic) UIWindow *window;

#pragma mark method prototype
- (void)switchTabBarController:(NSInteger)selectedViewIndex;

@end

AppDelegate.m

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    //window初期化
    CGRect bounds = [[UIScreen mainScreen] bounds];
    _window = [[UIWindow alloc] initWithFrame:bounds];

    //UITabBarController初期化
    [self initTabBarController];

    return YES;
}

//UITabBarController初期化
- (void)initTabBarController
{
    //基点となる Controller生成
    tabBarController_ = [[UITabBarController alloc] init];

    //タブの背景画像と選択時の背景画像を設定
    [[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"tab_background.png"]];
    [[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"tab_selection_indicator.png"]];

    //タブメニュー選択時のビュー生成
    FirstViewController  *tabFirstVC  = [[FirstViewController alloc] init];
    SecondViewController *tabSecondVC = [[SecondViewController alloc] init];
    ThirdViewController  *tabThirdVC  = [[ThirdViewController alloc] init];
    FourthViewController *tabFourthVC = [[FourthViewController alloc] init];
    FifthViewController  *tabFifthVC  = [[FifthViewController alloc] init];

    //タブのアイコン指定
    [tabFirstVC.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"tab_icon1-o.png"]
                        withFinishedUnselectedImage:[UIImage imageNamed:@"tab_icon1.png"]];
    [tabSecondVC.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"tab_icon2-o.png"]
                         withFinishedUnselectedImage:[UIImage imageNamed:@"tab_icon2.png"]];
    [tabThirdVC.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"tab_icon3-o.png"]
                        withFinishedUnselectedImage:[UIImage imageNamed:@"tab_icon3.png"]];
    [tabFourthVC.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"tab_icon4-o.png"]
                         withFinishedUnselectedImage:[UIImage imageNamed:@"tab_icon4.png"]];
    [tabFifthVC.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"tab_icon5-o.png"]
                        withFinishedUnselectedImage:[UIImage imageNamed:@"tab_icon5.png"]];

    //タブのタイトル指定
    [tabFirstVC setTitle:@"First"];
    [tabSecondVC setTitle:@"Second"];
    [tabThirdVC setTitle:@"Third"];
    [tabFourthVC setTitle:@"Fourth"];
    [tabFifthVC setTitle:@"Fifth"];

    //タブのタイトル位置設定
    [[UITabBarItem appearance] setTitlePositionAdjustment:UIOffsetMake(0, -1)];

    //タブのタイトル色指定
    [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor], UITextAttributeTextColor,nil] forState:UIControlStateNormal];

    //タブのタイトル色指定(選択中)
    [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor colorWithRed:0.91f green:1.0f blue:0.74f alpha:1.0f], UITextAttributeTextColor,nil] forState:UIControlStateSelected];

    //ビューを Controllerに追加
    NSArray *controllers = [NSArray arrayWithObjects:tabFirstVC, tabSecondVC, tabThirdVC, tabFourthVC, tabFifthVC, nil];
    [(UITabBarController *)tabBarController_ setViewControllers:controllers animated:NO];

    //windowに Controllerのビュー追加
    [_window addSubview:tabBarController_.view];
    [_window makeKeyAndVisible];
}

//タブ切り替え
- (void)switchTabBarController:(NSInteger)selectedViewIndex
{
    UITabBarController *controller = (UITabBarController *)tabBarController_;
    controller.selectedViewController = [controller.viewControllers objectAtIndex:selectedViewIndex];
}

関連記事

お薦めの参考書

本気ではじめるiPhoneアプリ作り Xcode 7.x+Swift 2.x対応
iOSアプリ開発をこれから始める方に最もお薦めな一冊です。解り辛い点は図解入りで解説されており、プログラミングの動作の仕組みから詳しく知ることができます。基本から通信処理まで押さえられており、アプリ公開の手順についても解説されています。

   このエントリーをはてなブックマークに追加

About

Masaki Hirokawa (@dolice_apps)

デザインエンジニア 廣川政樹の開発ブログ。Objective-Cや Javaなど iPhone/Androidアプリ開発に関する技術情報を掲載しています。

iPhone apps

  • リラックス・ヒーリング(無料)
  • 望みが叶う!引き寄せの法則アプリ(無料)
  • ミステリー - 怖い話や不思議な体験、都市伝説まとめ
  • 浮世絵壁紙 - 美しい日本画ギャラリー(無料)
  • 綺麗な壁紙HD iPhone 7/7 Plus/SE & iPod対応(無料)
  • クールな壁紙HD iPhone 7/7 Plus/SE & iPod対応(無料)

Android apps

  • 浮世絵壁紙 - 美しい日本画ギャラリー
  • 綺麗な高画質壁紙

Objective-C Classes

Tag Cloud

ActionScript(9) ActionScript3(7) Ad(4) Adfurikun(2) AdMob(9) Android(10) Animation(17) AppDelegate(3) ARC(1) ArrayList(1) AVAudioPlayer(4) AVAudioSession(1) AVFoundation(3) Banner(2) Bitmap(1) Camera(4) CGAffineTransform(4) CGBlendMode(2) CGContextRef(1) CGImageRef(1) Classes(44) CLLocationManager(1) ConnectivityManager(1) ContentResolver(1) CoreLocation(2) Delegate(3) Device(7) Display(1) DisplayMetrics(1) Download(101) Facebook(6) Foundation(72) Framework(2) Google Analytics(1) Handler(1) iAd(6) ImageView(1) In-AppPurchase(1) iOS(12) iOS 7(15) iOS 7.1(3) iOS 8(1) iPad(7) iPhone(21) iPhone 6(4) Java(7) JavaScript(2) LINE(4) Localize(1) Magazine(1) MediaStore(1) MFComposeViewController(1) Nend(1) NetworkInfo(1) NSArray(23) NSCalendar(3) NSData(2) NSDate(7) NSDateComponents(2) NSDateFormatter(2) NSDictionary(12) NSEnumerator(1) NSIndexSet(1) NSInteger(6) NSMutableArray(17) NSMutableDictionary(5) NSMutableOrderedSet(7) NSMutableString(4) NSMutableURLRequest(1) NSNotificationCenter(1) NSNumber(1) NSObject(1) NSOrderedSet(7) NSRange(2) NSSelectorFromString(1) NSSet(6) NSString(19) NSTimer(4) NSTimeZone(1) NSURL(7) NSURLConnection(1) NSURLRequest(2) NSUserDefaults(7) NSXMLParser(2) Objective-C(222) PHP(1) Products(14) QuartzCore(3) RSS(2) Runnable(1) Sample(51) Screensaver(9) SDK(2) ShareCompat(1) Social(10) StoreKit(1) Twitter(6) UIAccelerometer(3) UIActionSheet(1) UIActivityIndicator(1) UIActivityIndicatorView(3) UIActivityViewController(1) UIAlertView(5) UIApplication(7) UIButton(4) UIColor(3) UIDatePicker(5) UIDevice(6) UIDeviceOrientation(1) UIEvent(6) UIImage(15) UIImagePickerController(4) UIImageView(12) UIKit(58) UILabel(7) UINavigationBar(4) UINavigationItem(1) UIPasteboard(4) UIScreen(1) UIScrollBar(1) UIScrollView(1) UISlider(3) UIStoryboardSegue(3) UISwitch(1) UITabBar(3) UITableView(4) UITextField(2) UIView(11) UIViewAnimationTransition(1) UIViewController(4) UIWebView(5) WindowManager(1) Xcode(48) Xcode 5(8) Xcode 5.1(2)