美文网首页专注iOS开发ios 进阶iOS Development
UITabBarController、TabBar背景颜色设置、

UITabBarController、TabBar背景颜色设置、

作者: ef463f819996 | 来源:发表于2016-02-25 10:22 被阅读37638次

在iOS的开发过程中我们使用最多的框架结构估计就是UITabBarController + UINavigationController架构了,然而在开发过程中,对于许多初学者,甚至对于许多有半年多开发经验的iOS dev来说还是会有很多很棘手的问题,比如设置tabBar的背景颜色、tabBarItem的图标选中时的颜色为蓝色、tabBarItem选中的背景色的设置... 完整代码请关注微信公众号后输入 001 获取。

下面创建项目并搭建UITabBarController + UINavigationController架构,最终的架构如图:

为每个nav的item添加文字、图片和selectedImage。然后运行可以看到如下图:

现在我们来改变tabBar的背景颜色

设置tabBar的背景色

创建类ANTabBarController继承自UITabBarController,并与storyBoard中的TabBarController关联。在viewDidLoad中添加如下代码:[[UITabBar appearance] setBackgroundColor:[UIColor redColor]];,运行结果如图:

但这个红色并不是真正的红色,而是系统处理过的红色,修改首页界面颜色为红色来做个对比:

所以直接通过[[UITabBar appearance] setBackgroundColor:[UIColor redColor]];(此处写错,应该是[[UITabBar appearance] setBarTintColor:[UIColor redColor]];在demo中是写对的,只是这里写错了)。来改变tabar的颜色是不能得到想要的颜色的。如果想要得到想要的颜色需要再另外添加一句:[UITabBar appearance].translucent = NO;这句表示取消tabBar的透明效果。

第二种方法是你可以在tabBar上添加一个有颜色的View:

这样也可以实现相同的效果

还有第三种方法就是使用背景图片:

[[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"tabBarBackgroundImage"]];

[UITabBar appearance].translucent = NO;

但同样需要[UITabBar appearance].translucent = NO;

接下来需要处理的第二个问题就是:tabBarItem

设置tabBarItem

首先很多运用中需要在点击某个item后,需要改变背景色,可以通过tabBar的selectionIndicatorImage属性来实现。

第一种方式就是让美工切出符合的图直接放上去,但这种方式美工需要切多个不同尺寸的图,不方便,如果背景色改变,全部图又要重新切,很麻烦。

第二种方式就是自己画,画好后,如果背景色需要改变只需要修改颜色就可以了,不用切图代码实现:

现在选中颜色已经改变了,如图:

好了,tabBarItem的选中时的背景颜色已经弄好了。解决下一个问题

tabBarItem图标文字颜色修改

应该发现了tabBarItem的图标和文字的默认颜色是灰色,选中颜色是蓝色。这是系统默认给图标、文字修改成了灰色和蓝色。如果要改变选中item的颜色可以直接使用tabBar的tintColor来实现,但是如果图标换成别的颜色了又要重新修改tintColor,很不方便。所以重写一个继承与UITabBarItem的自定义类,在initWithCoder:方法中实现如下代码:

mostColorWithImage:方法是自定义的获取图片主颜色的方法,具体代码:

这样就完成了。

相关文章

网友评论

  • 就是很随意哦:有没有适配过iPhone X ,X 上面 selectionIndicatorImage 往下偏移
  • 4f2931dd00b5:谢谢分享,解决了我改变tab bar背景颜色的问题
  • 超_iOS:tabbar设置背景色后感觉后边还有一个背景view有个颜色. 就想请教下tabbar的层级结构.感觉后边还有一个view.但是没找到
  • Camoufleur:未选中的图标和文字的颜色怎么修改呢?
    952625a28d0d:请问如何实现微信的Tabbar高斯模糊效果?
    Camoufleur:@清蒸鱼跃龙门 iOS10之后新增加了一个API:tabBarController.tabBar.unselectedItemTintColor,如果不适配之前的版本就可以用这个,要适配的话只能使用图片进行设置了,然后设置文字跟图片的颜色一致
    清蒸鱼跃龙门:@Camoufleur 同问
  • xxxixxxx:你好,问下 我要改变选中的背景色 但是selectionIndicatorImage打不出来啊。
    我用的纯代码。
    UITabBarController *_tabBar;
    _tabBar. selectionIndicatorImage 打不出来啊。
    xxxixxxx:@拾荒少年v ...... 是 _tabBar.tabBar.selectionIndicatorImage
  • 张宇航_Ken:`UITabBarItem`的图标的默认颜色貌似比较麻烦。楼主这里是用了image自身的颜色。如果app可以让用户选择自定义的主题颜色,这里就没办法了。请问有没有办法使用类似设置`barTintColor`的方式,在运行时设置图标颜色的方法?
    ef463f819996:@张宇航_Ken 你的想法挺好的,在这里我没有这样实现,不过该想法是可以实现的,得自己另外再封装了。
  • Pusswzy:您有地方写错了, 改变tabBar颜色的代码应该是[tabBar setBarTintColor:LHZColor(243, 243, 248)]; 而不是backgroundColor, 希望您能给改了
    Pusswzy:@Anchlate 哈哈哈 这都过了多久了
    ef463f819996:@Pusswzy 是的,在文章里写错了,在demo中是对的,哈哈,已经改了
    ef463f819996:@Pusswzy 你说的应该是方法二,你说的没错,改变tabbar背景颜色的是tincolor,在方法二中并没有直接去改变tabbar的背景色,只是添加了一个有颜色View在其上,以达到外观颜色为所需的颜色,仅此而已
  • fylq:赞一个
  • 7c1702fdd5d6:还是很感谢你,我都准备重写tabBar了
    ef463f819996:@啰啰嗦嗦啰嗦啰嗦 恩恩 :+1:
  • 7c1702fdd5d6:我已经解决了,重写下setNeedsStatusBarAppearanceUpdate,在这个方法里面调用[self drawTabBarBackGroud:size]。同时,info.plist里面添加View controller-based status bar appearance设置为YES,就可以了。
    承宇:@啰啰嗦嗦啰嗦啰嗦 你这个不是控制栏的设置么,怎么会跟tabBarItem有关?
    ef463f819996:@啰啰嗦嗦啰嗦啰嗦 解决了就好
  • 7c1702fdd5d6:你好,我按照你的设置,设置tabBarItem。可是一直报CGContextSetRGBFillColor: invalid context这个错误,并且不会一直显示,你怎么解决的呢?
    ef463f819996:@啰啰嗦嗦啰嗦啰嗦 刚看到你的留言。

本文标题:UITabBarController、TabBar背景颜色设置、

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