IPhone Tab Bar Image Resolution Image?

Question

What is the image resolution for a tab bar item?

And also, please provide other useful information about this tab element image.

Thanks in advance.

Answer 1

The documentation says that the image on the tab bar is usually 30x30, but I found that the best size for adjusting the images is 48x32 pixels. This size still displays and gives you a little more space.

The image is a PNG with transparency, only a mask is used. The user interface makes the mask gray if it is not selected, or blue / chrome.

Answer 2

http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html

Whenever possible, you should use the buttons and icons in the system in navigation bars, toolbars and tabs ... For a complete list of standard buttons and icons and recommendations for their use, see the System buttons and icons section .

Of course, not every task that your application performs is standard. If your application supports custom tasks that users must perform frequently, you need to create your own icons that represent these tasks in the toolbar or navigation bar. Similarly, if your application displays a tab bar that allows users to switch between user-defined application modes or custom subsets of data, you need to create icons in the tab bar that clearly describe these modes or subsets. In this section, you will find some tips on how to create icons that work well in navigation bars, toolbars, and tabs.

Before creating art for your badge, you need to spend some time thinking about what it should convey. When you review projects, look for an icon that:

• Simple and optimized. Too much detail can cause the icon to be inaccurate or illegible.
• It is not easy to make a mistake for one of the system icons. Users should be able to distinguish your custom icon from standard icons at a glance.
• Easy to understand and generally acceptable. Strive to create a character that most users will interpret correctly and that no user will find offensive.

Once you have determined the appearance of your icon, follow these guidelines when creating it:

• Use the PNG format.
• Use pure white with the appropriate alpha.
• Do not turn on the shadow.
• Use anti-aliasing.
• If you decide to add a bevel, make sure it is 90 ° (to help you do this, imagine the light source located at the top of the icon).
• For the toolbar and navigation bar icons, create an icon about 20 x 20 pixels in size.
• For the icons on the tab bar, create an icon about 30 x 30 pixels in size.

Answer 3

This statement is technically incorrect:

"... only the mask is used. The user interface displays the mask in gray when unselected or blue / chrome when selected ..."

You are not applying a mask of any type. Rather, the tab image should be just a monochrome .png image, otherwise only one color will be used .

If you provide a color image, UIKit will quantize it to a monochrome image. In the worst case, the color image will be ~ 8000 bytes, which is ~ 6k waste (retina). The file format must be 24-bit .png with transparency for the quantization to work correctly. Even if it is a color file format, do not use color or you are losing space.

The bottom line should be the right size, with maximum performance and memory usage, use one of the following options:

Standard display
48x32. PNG, 24-bit with transparency (but use only one color) . The worst case size is ~ 500 bytes.
30x30.PNG, 24-bit with transparency (but use only 1 color) . The worst case size is ~ 350 bytes.

Retina display
60x60.PNG, 24-bit with transparency (but use only 1 color) . The worst case size is ~ 2000 bytes.

Answer 4

Check out the "Link to UITabBarItem" link in the SDK documentation