美文网首页
有关storyBoard创建tabBar设置图片显示不正确问题

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

作者: 文刂丽 | 来源:发表于2017-05-24 14:57 被阅读503次

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

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

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

    如图在Xcode中设置tabBarItem的imageselectImage

    Xcode设置tabBar的图片.png

    imageselectImage图片为:

    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的。

    更改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设置图片显示不正确问题

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