有关storyBoard创建tabBar设置图片显示不正确问题
本篇文章作为我个人学习的记录过程,仅提供一个思路。
如有描述不正确的地方请批评,谢谢。
利用storyBoard
采用tabBarController+navigationBar
构建项目框架时,在设置tabBarItem
的image
和selectImage
的时候,图片不能正常显示。即未被选中时image
为 灰色
,选中时selectImage
为蓝色
,而不是显示成我们自己切得图片样式。
最近接手一个项目,采用的是storyBoard
创建tabBar和navigationBar
的模式,现要将tabBar
的图片整体切换为另一组图片,切得图和尺寸都没有问题。最开始只是在storyBoard
中设置响应的item
的image
和selectImage
,运行结果很不理想,经过一系列的排除,最终找到了解决方法。具体过程如下所述。
如图在Xcode中设置tabBarItem的image
和selectImage
:
image
和selectImage
图片为:
但是当你运行的时候就会发现,没选中的时候是
灰色
的,选中之后是蓝色
的。形状和大小虽然是我们自己设置的图片,但是显示的结果根本不是我们预想的结果!
运行之后的结果变成了下面这样:
image_error selectImage_error
这主要是storyBoard
默认渲染了设置的图片,使用UIImage
的imageWithRenderingMode:
这个方法更改图片的渲染模式,它可以设置的模式包括以下几种:
UIImageRenderingModeAlwaysOriginal
:// 不使用渲染模式,显示图片原来的样貌
UIImageRenderingModeAlwaysTemplate
:// Always draw the image as a template image, ignoring its color information
UIImageRenderingModeAutomatic
:// Use the default rendering mode for the context where the image is used。
在这里我们需要设置mode
为UIImageRenderingModeAlwaysOriginal
。设置的方法有很多,我使用的是新建了一个继承UITabBarController的tabBarController
,在这个tabBarController
的viewDidLoad
方法里面统一设置tabBarItem
的image
和selectImage
的mode
的。
代码中之所以直接使用了item.selectImage
是因为上面说过已经在storyboard
中设置了tabBarItem
的selectImage
。所以item.selectImage
是有值的。所以,可以直接使用item.selectImage
调用imageWithRenderingMode:
这个方法。
另外,还可以根据各自的需求在这个MainTabBarViewControlle
r中做不同的处理,比如:节假日的活动图
,或者动态更改tabBar的数量
等等。
这样处理之后,再运行app,就可以正常显示我们自己设置的图片了。而禁止渲染效果出现。
运行结果如下:
image_success selectImage_successsadf 暂且放在这里,将获取的图片存放在本地并拼接@2x
获取本地缓存中的图片
注:2017-06-12新发现的问题及解决方法:
之前做项目的时候 几乎没有调整Tabbar的图片,一般都是随便拿张图片应付一下,但是这次是必须要调整了,学长按标准切了60X60的图片放上去,结果还是大,我就感觉不对劲了,都说有两套30X30和60X60 现在我是Retina屏的模拟器为什么还是显示的那么大呢,仔细想了一下,可能是我命名的原因,因为虽然我用的是60X60但是我并没有在后面加上@2x ,可能是Xcode自动把这个当成了小图然后自己把这张图放大之后做了图标,于是我就修改了命名,在所有的名字后面加上了@2x 运行之后就正常了
。