iOS6 및 iOS7 내비게이션 바와 탭 바를 동일한 평면 디자인으로 만들기

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에서 내비게이션 바 사용자 정의
웹 사이트 제작 · iPhone 앱 개발의 PLUS - 앱의 분위기가 훨씬 높아진다! TabBar 배경 또는 아이콘을 원하는대로 사용자 정의!

좋은 웹페이지 즐겨찾기