LoginSignup
29
29

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-05-05

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

はじめに

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

ではさっそく。

目標イメージ

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

コード

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

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の背景や、アイコンを好きなようにカスタム!

29
29
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29
29