iOS标签栏图标模糊

Question

My tab bar icons appear blurry.

I created the icons using Photoshop, and followed the iOS Human Interface Guidelines when I decided the sizes of each icons.

eg icon size: 30x30px png

This only happens with the tab bar. I wonder if this happens because of the resolution of the images or because of programming issues...

Answer 1

You're using icon size 30x30 which I assume is for 1x ( iPhone<4 ). Since iPhone>=4 needs 2x and 3x images so you have to include that also.

Either you use images with naming conventions like

star.png     // 1x = 30x30
star@2x.png  // 2x = 60x60
star@3x.png  // 3x = 90x90

or you can use image.xcassets and put your 1x , 2x and 3x images there and use it.

Reference Xcode Assets Catalogs

Answer 2

Probably because using a device with the retina screen.

Try about changing the icon's filename to xxx@2x.xxx like "facebook_icon@2x.png".

Answer 3

Also, be aware that you can use a PDF file (vector graphics, resolution independent) instead of PNGs, and Xcode will render the appropriate resolutions at build time for you (I don't think you can easily do this for third party icons such as Facebook, but...).

To see how this is done, create a new project using the "Tabbed Application" template, and check the asset catalog for the tab bar icon images. It does just that for the circle and square icons of the "First" and "Second" initial tabs.

Answer 4

使用此行代码在uitabbar中为uitabbaritem设置图像。

tabbaritem.image = [[UIImage imageNamed:@“image”] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];