iOS6とiOS7のナビゲーションバーとタブバーを同じフラットなデザインにする

16466 ワード
ios7 ios6 アプリ Objective-C iPhone開発 Objective-C テキストリンク

iOS6とiOS7のナビゲーションバーとタブバーを同じフラットなデザインにする

はじめに

自分で作成したアプリに必要になり、実装してみた忘備録です。
Objective-c初心者です、実装方法が最適でない可能性があるため参考程度にしてください。もっといい方法があったらコメントください。
とりあえず見た目は整えられます。

ではさっそく。

目標イメージ

それぞれデフォルトからフラットな感じにする。
※作成したアプリの一部を抜粋しています。

コード

ナビゲーションバー、タブバーのほとんどはバージョン別で記述する。
タブアイテムの画像の共通の設定方法でいけます。
詳細はコード内コメントを参考にしてください。

ViewController.m
- (void)viewDidLoad
{
    [super viewDidLoad];
    //ステータスバーの色を設定
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

    UIColor *barBackColor = [UIColor colorWithRed:0.000 green:0.424 blue:0.718 alpha:1.0];
    UIColor *textSelectedColor = [UIColor colorWithRed:0.945 green:0.769 blue:0.059 alpha:1.0];
    UIColor *textUnSelectedColor = [UIColor whiteColor];

    //iOS6,7の分岐 true = iOS7以上
    if (floor(NSFoundationVersionNumber) > NSFoundationVersionNumber_iOS_6_1) {
        //ナビゲーションバー,タブバーの背景に色を設定
        [[UINavigationBar appearance] setBarTintColor:barBackColor];
        [[UITabBar appearance] setBarTintColor:barBackColor];

        //タブアイテムの選択,非選択時のテキストの色を設定
        NSDictionary *selectedAttributes = @{NSForegroundColorAttributeName : textSelectedColor};
        NSDictionary *attributesNormal = @{NSForegroundColorAttributeName : textUnSelectedColor};
        [[UITabBarItem appearance] setTitleTextAttributes:selectedAttributes forState:UIControlStateSelected];
        [[UITabBarItem appearance] setTitleTextAttributes:attributesNormal forState:UIControlStateNormal];
    } else {
        //伸縮可能な一色の画像を生成
        UIImage *blueBackImage = [[self imageWithColor:barBackColor] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
        UIImage *clearBackImage = [[self imageWithColor:[UIColor clearColor]] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

        //ナビゲーショバー,ナビゲーショバーボタンの背景に画像を設定
        [[UINavigationBar appearance] setBackgroundImage:blueBackImage forBarMetrics:UIBarMetricsDefault];
        [[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil] setBackgroundImage:clearBackImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

        //タブバーの背景,選択中タブアイテムの背景に画像を設定
        [[UITabBar appearance] setBackgroundImage:blueBackImage];
        [[UITabBar appearance] setSelectionIndicatorImage:clearBackImage];

        //タブアイテムの選択,非選択時のテキストの色を設定
        NSDictionary *itemSelected = [NSDictionary dictionaryWithObjectsAndKeys:textSelectedColor, UITextAttributeTextColor,nil];
        NSDictionary *itemUnSelected = [NSDictionary dictionaryWithObjectsAndKeys:textUnSelectedColor, UITextAttributeTextColor,nil];
        //.hに記述したものを参照 @property IBOutlet UITabBar *myTabBar;
        NSArray *items = [[self myTabBar] items];
        for (UITabBarItem *item in items) {
            [item setTitleTextAttributes:itemSelected forState:UIControlStateSelected];
            [item setTitleTextAttributes:itemUnSelected forState:UIControlStateNormal];
        }
    }

    //タブアイテムの選択,非選択時の画像を設定
    NSArray *items = [[self myTabBar] items];
    [[items objectAtIndex:0] setFinishedSelectedImage:[UIImage imageNamed:@"map.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"map_no.png"]];
    [[items objectAtIndex:1] setFinishedSelectedImage:[UIImage imageNamed:@"list.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"list_no.png"]];
    [[items objectAtIndex:2] setFinishedSelectedImage:[UIImage imageNamed:@"plus.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"plus_no.png"]];
    [[items objectAtIndex:3] setFinishedSelectedImage:[UIImage imageNamed:@"info.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"info_no.png"]];

}

//参考ページ 「お？いけるくさい？」様より引用
- (UIImage *)imageWithColor:(UIColor *)color {
    CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

参考にしたページ

お？いけるくさい？様 - 指定したUIColorとCGRectで、塗りつぶしのUIImageを生成する
Technology-Gym様 - UIAPPEARANCEでナビゲーションバーをカスタマイズする
Webサイト制作・iPhoneアプリ開発のPLUS様 - アプリの雰囲気がグッと高まる！TabBarの背景や、アイコンを好きなようにカスタム！