skip to Main Content

My tab bar icons appear blurry.

enter image description here

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

e.g. 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…

4

Answers


  1. Probably because using a device with the retina screen.

    Try about changing the icon’s filename to [email protected] like “[email protected]”.

    Login or Signup to reply.
  2. 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
    [email protected]  // 2x = 60x60
    [email protected]  // 3x = 90x90
    

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

    Reference Xcode Assets Catalogs

    Login or Signup to reply.
  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.

    Login or Signup to reply.
  4. Use this line of code to set image for uitabbaritem in uitabbar .

    tabbaritem.image = [[UIImage imageNamed:@“image”] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search