Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What size should TabBar images be?

I have icons for a tabBar of size 100.

I checked at Apple's Human Interface Guidelines of 2013 and it says the image size should be 30x30 / 60x60.

But as the height of tab bar controller is 50, I kept the size of the image at 50x50.

Now, when I run the project, I see the ugly design below:

enter image description here

Any idea what size images I should use so that the design will be perfect?

Note: I am not writing text also (e.g. Home, Search, etc). The text of the tab button is there in the image itself.

like image 614
Fahim Parkar Avatar asked Aug 05 '13 22:08

Fahim Parkar


People also ask

What is tabBar in Swift?

The tab bar interface displays tabs at the bottom of the window for selecting between the different modes and for displaying the views for that mode. This class is generally used as-is, but may also be subclassed. Each tab of a tab bar controller interface is associated with a custom view controller.

How do I create a custom tab bar in Swift?

Implement a view controller that can hold some other view controllers. Show one of those view controllers. Show a tab bar at the bottom of the screen over the shown view controller. Switch between the various view controllers when the user taps on a tab bar button.


2 Answers

According to the Apple Human Interface Guidelines:

@1x : about 25 x 25 (max: 48 x 32)

@2x : about 50 x 50 (max: 96 x 64)

@3x : about 75 x 75 (max: 144 x 96)

like image 191
rsc Avatar answered Oct 10 '22 23:10

rsc


30x30 is points, which means 30px @1x, 60px @2x, not somewhere in-between. Also, it's not a great idea to embed the title of the tab into the image—you're going to have pretty poor accessibility and localization results like that.

like image 20
garrettmurray Avatar answered Oct 11 '22 00:10

garrettmurray