有关storyBoard创建tabBar设置图片显示不正确问题

本篇文章作为我个人学习的记录过程,仅提供一个思路。
如有描述不正确的地方请批评,谢谢。

利用storyBoard采用tabBarController+navigationBar构建项目框架时,在设置tabBarItemimageselectImage的时候,图片不能正常显示。即未被选中时image灰色,选中时selectImage蓝色,而不是显示成我们自己切得图片样式。

最近接手一个项目,采用的是storyBoard创建tabBar和navigationBar的模式,现要将tabBar的图片整体切换为另一组图片,切得图和尺寸都没有问题。最开始只是在storyBoard中设置响应的itemimageselectImage,运行结果很不理想,经过一系列的排除,最终找到了解决方法。具体过程如下所述。

如图在Xcode中设置tabBarItem的imageselectImage

有关storyBoard创建tabBar设置图片显示不正确问题_第1张图片
Xcode设置tabBar的图片.png

imageselectImage图片为:

有关storyBoard创建tabBar设置图片显示不正确问题_第2张图片
image-bingo.png

但是当你运行的时候就会发现,没选中的时候是 灰色的,选中之后是 蓝色的。形状和大小虽然是我们自己设置的图片,但是显示的结果根本不是我们预想的结果!

运行之后的结果变成了下面这样:


image_error
selectImage_error

这主要是storyBoard默认渲染了设置的图片,使用UIImageimageWithRenderingMode:这个方法更改图片的渲染模式,它可以设置的模式包括以下几种:
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。

在这里我们需要设置modeUIImageRenderingModeAlwaysOriginal。设置的方法有很多,我使用的是新建了一个继承UITabBarController的tabBarController,在这个tabBarControllerviewDidLoad方法里面统一设置tabBarItemimageselectImagemode的。

有关storyBoard创建tabBar设置图片显示不正确问题_第3张图片
更改item的image的mode

代码中之所以直接使用了item.selectImage是因为上面说过已经在storyboard中设置了tabBarItemselectImage。所以item.selectImage是有值的。所以,可以直接使用item.selectImage调用imageWithRenderingMode:这个方法。
另外,还可以根据各自的需求在这个MainTabBarViewController中做不同的处理,比如:节假日的活动图或者动态更改tabBar的数量等等。

这样处理之后,再运行app,就可以正常显示我们自己设置的图片了。而禁止渲染效果出现。

运行结果如下:

image_success
selectImage_success

sadf 暂且放在这里,将获取的图片存放在本地并拼接@2x
获取本地缓存中的图片

注:2017-06-12新发现的问题及解决方法:
之前做项目的时候 几乎没有调整Tabbar的图片,一般都是随便拿张图片应付一下,但是这次是必须要调整了,学长按标准切了60X60的图片放上去,结果还是大,我就感觉不对劲了,都说有两套30X30和60X60 现在我是Retina屏的模拟器为什么还是显示的那么大呢,仔细想了一下,可能是我命名的原因,因为虽然我用的是60X60但是我并没有在后面加上@2x ,可能是Xcode自动把这个当成了小图然后自己把这张图放大之后做了图标,于是我就修改了命名,在所有的名字后面加上了@2x 运行之后就正常了

你可能感兴趣的:(有关storyBoard创建tabBar设置图片显示不正确问题)