TabBarItems and setting their image sizes?

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?

Solution 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

Solution 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!

Solution 3:

Pretty easy to do this with ios8. In Storyboard, click on each tab item (the individual controller for the tab you want to change the image of.

Set the insets accordingly...

There is this issue though. Fixed with this.

Solution 4:

@LeoDabus provided a good answer.

For resizing the image, a good and easy way to do this is to:

1. Add your image to the 1x, 2x, 3x boxes in Assets.xcassets folder.
2. Then, click on the image in each box and double-finger tap the trackpad/right-click which will reveal the options here:

3. Click on 'Open with External Editor', which will bring you to Preview.
4. Click on 'Tools' then 'Adjust Size'.

5. Adjust the size of your image based on your requirements. Then hit 'Save' and close the window. The image in Xcode should be auto-updated.