UITabBarのデザインカスタマイズ方法(iOS 7/iOS 6.1両対応)

デザインをカスタマイズした UITabBar

iOS 6.1以前と iOS 7以降ではタブバーのカスタマイズ方法が異なるようで、iOS 7に最適化したカスタマイズ方法を用いると iOS 6.1でクラッシュしてしまうため、デバイスのバージョンを判別し処理を分ける必要があります。

下記よりサンプルのダウンロードとソースコードの閲覧が行えます。

サンプルダウンロード

ソースコード

AppDelegate.h

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#import <UIKit/UIKit.h>
#import "FirstViewController.h"
#import "SecondViewController.h"
#import "ThirdViewController.h"

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

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

#pragma mark - public method
- (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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
#import "AppDelegate.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // window初期化
    [self initWindow];

    // rootController初期化
    [self initRootController];

    return YES;
}

#pragma mark - Init Window

// window初期化
- (void)initWindow
{
    CGRect bounds = [[UIScreen mainScreen] bounds];
    _window = [[UIWindow alloc] initWithFrame:bounds];
}

#pragma mark - Init Root Controller

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

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

    // タブメニュー選択時のビュー生成
    FirstViewController  *tabFirst  = [[FirstViewController alloc] init];
    SecondViewController *tabSecond = [[SecondViewController alloc] init];
    ThirdViewController  *tabThird  = [[ThirdViewController alloc] init];

    if ([self isIOS7]) { // iOS 7用のタブバー生成
        // タブのアイコン指定
        tabFirst.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"First"
                                                            image:[[UIImage imageNamed:@"tab_bar_icon1.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]
                                                    selectedImage:[[UIImage imageNamed:@"tab_bar_icon1_o.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];

        tabSecond.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"Second"
                                                             image:[[UIImage imageNamed:@"tab_bar_icon2.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]
                                                     selectedImage:[[UIImage imageNamed:@"tab_bar_icon2_o.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];

        tabThird.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"Third"
                                                            image:[[UIImage imageNamed:@"tab_bar_icon3.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]
                                                    selectedImage:[[UIImage imageNamed:@"tab_bar_icon3_o.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];

        // タブのフォント指定
        UIFont *tabFont = [UIFont fontWithName:@"HelveticaNeue" size:9.0f];

        // タブのタイトル色指定
        NSDictionary *attributesNormal = @{NSFontAttributeName:tabFont, NSForegroundColorAttributeName:[UIColor colorWithRed:0.733f green:0.733f blue:0.733f alpha:1.0f]};
        [[UITabBarItem appearance] setTitleTextAttributes:attributesNormal forState:UIControlStateNormal];

        // タブのタイトル色指定 (選択中)
        NSDictionary *selectedAttributes = @{NSFontAttributeName:tabFont, NSForegroundColorAttributeName:[UIColor colorWithRed:0.886f green:0 blue:0.415f alpha:1.0f]};
        [[UITabBarItem appearance] setTitleTextAttributes:selectedAttributes forState:UIControlStateSelected];
    } else { // iOS 6.1以下用のタブバー生成
        // タブのアイコン指定
        [tabFirst.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"tab_bar_icon1_o.png"]
                          withFinishedUnselectedImage:[UIImage imageNamed:@"tab_bar_icon1.png"]];
        [tabSecond.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"tab_bar_icon2_o.png"]
                           withFinishedUnselectedImage:[UIImage imageNamed:@"tab_bar_icon2.png"]];
        [tabThird.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"tab_bar_icon3_o.png"]
                          withFinishedUnselectedImage:[UIImage imageNamed:@"tab_bar_icon3.png"]];

        // タブのタイトル指定
        [tabFirst setTitle:@"First"];
        [tabSecond setTitle:@"Second"];
        [tabThird setTitle:@"Third"];

        // タブのタイトル色指定
        [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor colorWithRed:0.733f green:0.733f blue:0.733f alpha:1.0f], UITextAttributeTextColor,nil] forState:UIControlStateNormal];

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

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

    // ビューを Controllerに追加
    NSArray *controllers = [NSArray arrayWithObjects:tabFirst, tabSecond, tabThird, nil];
    [(UITabBarController *)_rootController setViewControllers:controllers animated:NO];

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

#pragma mark - Private method

// iOS7以降であるか
- (BOOL)isIOS7
{
    NSString *osversion = [UIDevice currentDevice].systemVersion;
    NSArray *a = [osversion componentsSeparatedByString:@"."];
    return ([(NSString*)[a objectAtIndex:0] intValue] >= 7);
}

@end

お薦めの参考書

絶対に挫折しない iPhoneアプリ開発「超」入門 増補改訂第4版
Swiftについて知りたい開発者の方のみならず、プログラミング未経験者の方にも参考になる内容になっています。Swiftの基礎を一から丁寧に解説されており、この書籍があればネットで調べる手間をかなり省くことができると思います。

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

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)