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

一、系统 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 大神给我提醒,整理出来,方便大家查看!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cloudskyme

MFC自绘按钮的实现

自绘按钮的实现过程 申明自绘属性 进行VM_MESUREITEM事件响应,说明按钮的尺寸 进行VM_DRAWITEM消息的重新响应,说明如何绘制按钮 首先在vc...

38840
来自专栏一“技”之长

iOS中UISearchBar(搜索框)使用总结

初始化:UISearchBar继承于UIView,我们可以像创建View那样创建searchBar

18710
来自专栏企鹅号快讯

前端学习自学笔记:day10

今天是第十天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: 第十天的笔记:HTML AND CSS: 响应式设...

20970
来自专栏一“技”之长

NSTextField控件应用详解 原

    NSTextField用来接收用户文本输入,其可以接收键盘事件。创建NSTextFiled的示例代码如下:

13910
来自专栏GIS讲堂

CSS+JS实现tab标签切换

循环将所有的内容标签隐藏,并将tab标题栏的active样式清除,完了之后设置选中标签的内容显示,并给tab标题栏添加active样式。

95930
来自专栏iOS122-移动混合开发研究院

AwesomeMenu,仿Path主菜单效果

实例下载: 最新源代码点击下载 用法简介: 通过创建菜单各个单元项来创建菜单: UIImage *storyMenuItemImage = [UIImage i...

23560
来自专栏猿人谷

UIButton使用方法汇总

//按钮初始化类方法 UIButton *button1 = [UIButton buttonWithType:UIButtonTypeRoundedRect...

21650
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:在手机应用开发中如何设置全局样式

最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便

14230
来自专栏一“技”之长

IOS UIAlertView(警告框)方法总结

@property(nonatomic,copy) NSString *title;

7110
来自专栏Objective-C

iOS-UINavigationBar 设置背景图片

57950

扫码关注云+社区

领取腾讯云代金券