TabBarItems and setting their image sizes?

Question

I am currently adding images to each one of my tab bar items. One image I like has a size that is much bigger then the area of the bar item. When I set the image of the bar item in the storyboard and run the emulator... the bar button with that image covers the entire screen.

Now I thought there was some automatic way of allowing the images to resize for each bar button. This is sadly not the case. Is there a way when the tab bar loads that I can resize the images within each tab bar?

Answer 1

You should prepare 3 images icons for each tab bar item (1x, 2x and 3x).

First create the 3x at 75w 75h pixels (maximum: 144 x 96) and save it as [email protected].

Then resize it to 50w 50h pixels (maximum: 96 x 64) and save it as [email protected].

Finally resize it to 25w 25h pixels (maximum: 48 x 32) and save it as iconTab0.png.

Now all you need is to select those 3 images at your finder and drag them to your image assets.

Human Interface Guidelines

Answer 2

Another option is to create a vector image PDF. What you do is resize your vector image to the smallest size (22x22) and export it to a PDF file. You can do this with Adobe Illustrator, Sketch and many other vector image editing tools.

Then you add the PDF file to your assets folder and in the Properties Inspector set "Scale Factors" to "Single Vector". That should do it!