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:
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.
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.
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.
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)
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With