美文网首页TabbariOS架构师之路
iOS-修改系统 TabbarItem 图片、文字颜色

iOS-修改系统 TabbarItem 图片、文字颜色

作者: 一位不愿透露姓名的王先生_ | 来源:发表于2016-07-09 13:33 被阅读6934次
    一、系统 Tabbar 默认颜色(如下图):
    TabbarItem默认渲染颜色.png
    代码详见(如下):
    - (void)viewDidLoad {
        [super viewDidLoad];
    
        HQHomeController *vcHome = [[HQHomeController alloc] init];
        HQHomeNavigationController *navHome = [[HQHomeNavigationController alloc] initWithRootViewController:vcHome];
        vcHome.title = @"首页";
        vcHome.tabBarItem.image = [UIImage imageNamed:@"tabbar_home"];
    
        HQCourseController *vcCourse = [[HQCourseController alloc] init];
        HQCourseNavigationController *navCourse = [[HQCourseNavigationController alloc] initWithRootViewController:vcCourse];
        vcCourse.title = @"健康课程";
        vcCourse.tabBarItem.image = [UIImage imageNamed:@"tabbar_message_center_highlighted"];
    
        HQConsultController *vcConsult = [[HQConsultController alloc] init];
        HQConsultNavigationController *navConsult = [[HQConsultNavigationController alloc] initWithRootViewController:vcConsult];
        vcConsult.title = @"线上资讯";
        vcConsult.tabBarItem.image = [UIImage imageNamed:@"tabbar_discover"];
    
        HQProfileController *vcProfile = [[HQProfileController alloc] init];
        HQProfileNavigationController *navProfile = [[HQProfileNavigationController alloc] initWithRootViewController:vcProfile];
        vcProfile.title = @"个人中心";
        vcProfile.tabBarItem.image = [UIImage imageNamed:@"tabbar_profile"];
    
        self.viewControllers = @[navHome, navCourse, navConsult, navProfile];
    }
    
    设置 tabbarItem 图片(显示图片原始颜色,不让系统渲染成蓝色)如(如下图):
    没有被系统tabbar渲染的图片.png
    代码详见(如下):
        HQHomeController *vcHome = [[HQHomeController alloc] init];
        HQHomeNavigationController *navHome = [[HQHomeNavigationController alloc] initWithRootViewController:vcHome];
        vcHome.title = @"首页";
        vcHome.tabBarItem.image = [UIImage imageNamed:@"tabbar_home"];
    
        // 设置 tabbarItem 选中状态的图片(不被系统默认渲染,显示图像原始颜色)
        UIImage *imageHome = [UIImage imageNamed:@"tabbar_home_highlighted"];
        imageHome = [imageHome imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        [vcHome.tabBarItem setSelectedImage:imageHome];
    
    设置 tabbarItem 文字(显示自定义文字颜色,不让系统渲染成蓝色)如(如下图):
    没有被系统tabbar渲染的文字.png
    代码详见(如下):
        HQHomeController *vcHome = [[HQHomeController alloc] init];
        HQHomeNavigationController *navHome = [[HQHomeNavigationController alloc] initWithRootViewController:vcHome];
        vcHome.title = @"首页";
        vcHome.tabBarItem.image = [UIImage imageNamed:@"tabbar_home"];
        
        // 设置 tabbarItem 选中状态的图片(不被系统默认渲染,显示图像原始颜色)
        UIImage *imageHome = [UIImage imageNamed:@"tabbar_home_highlighted"];
        imageHome = [imageHome imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        [vcHome.tabBarItem setSelectedImage:imageHome];
        
        // 设置 tabbarItem 选中状态下的文字颜色(不被系统默认渲染,显示文字自定义颜色)
        NSDictionary *dictHome = [NSDictionary dictionaryWithObject:[UIColor orangeColor] forKey:NSForegroundColorAttributeName];
        [vcHome.tabBarItem setTitleTextAttributes:dictHome forState:UIControlStateSelected];
    
    简单的封装下(详见代码):
    1. 抽取成一个方法
    • 传入控制器、标题、正常状态下图片、选中状态下图片

    • 直接调用这个方法就可以了

       /**
        * 抽取成一个方法
        * 传入控制器、标题、正常状态下图片、选中状态下图片
        * 直接调用这个方法就可以了
        */
       - (void)controller:(UIViewController *)controller Title:(NSString *)title tabBarItemImage:(NSString *)image tabBarItemSelectedImage:(NSString *)selectedImage
       {
           controller.title = title;
           controller.tabBarItem.image = [UIImage imageNamed:image];
           // 设置 tabbarItem 选中状态的图片(不被系统默认渲染,显示图像原始颜色)
           UIImage *imageHome = [UIImage imageNamed:selectedImage];
           imageHome = [imageHome imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
           [controller.tabBarItem setSelectedImage:imageHome];
           // 设置 tabbarItem 选中状态下的文字颜色(不被系统默认渲染,显示文字自定义颜色)
           NSDictionary *dictHome = [NSDictionary dictionaryWithObject:[UIColor orangeColor] forKey:NSForegroundColorAttributeName];
           [controller.tabBarItem setTitleTextAttributes:dictHome forState:UIControlStateSelected];
       }
      
    回到刚才位置调用一下:
        HQHomeController *vcHome = [[HQHomeController alloc] init];
        HQHomeNavigationController *navHome = [[HQHomeNavigationController alloc] initWithRootViewController:vcHome];
        // 下面注释的代码用这一行就可以替代了
        [self controller:vcHome Title:@"首页" tabBarItemImage:@"tabbar_home" tabBarItemSelectedImage:@"tabbar_home_highlighted"];
        
    //    vcHome.title = @"首页";
    //    vcHome.tabBarItem.image = [UIImage imageNamed:@"tabbar_home"];
    //    
    //    // 设置 tabbarItem 选中状态的图片(不被系统默认渲染,显示图像原始颜色)
    //    UIImage *imageHome = [UIImage imageNamed:@"tabbar_home_highlighted"];
    //    imageHome = [imageHome imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    //    [vcHome.tabBarItem setSelectedImage:imageHome];
    //    
    //    // 设置 tabbarItem 选中状态下的文字颜色(不被系统默认渲染,显示文字自定义颜色)
    //    NSDictionary *dictHome = [NSDictionary dictionaryWithObject:[UIColor orangeColor] forKey:NSForegroundColorAttributeName];
    //    [vcHome.tabBarItem setTitleTextAttributes:dictHome forState:UIControlStateSelected];
    
    对比如图:
    代码封装对比.png
    二、修改 tabBarItem 图片方法二(直接设置文件夹下图片渲染模式)(见下图):
    在图片所在文件夹中设置图片渲染模式为图片原始模式(不被渲染).png

    1.代码中注释了修改图片被渲染的模式
    2.图片文件夹中也是默认渲染模式
    3.效果见下图

    代码中不设置图片渲染模式效果.png

    在图片所在文件夹中设置图片的渲染模式(见下图)

    在文件夹中设置图片渲染模式.png

    特别感谢 Oniityann 大神给我提醒,整理出来,方便大家查看!

    相关文章

      网友评论

      本文标题:iOS-修改系统 TabbarItem 图片、文字颜色

      本文链接:https://www.haomeiwen.com/subject/yfejdttx.html