Swift and Xcode - How to Create Custom Tab Bar Icons

Matt Kelly picture Matt Kelly · May 25, 2015 · Viewed 47.7k times · Source

I have a tabbed application project I am working on in Xcode written in Swift (Xcode 6.3 and Swift 1.2). I am having a lot of trouble with custom Tab Bar icons. I have designed an image in Photoshop (CS6), saved it as a PNG, resized it in Prepo to be 30x30 and imported it into Xcode in the asset library. I then set the tab view controllers icon to that image. However, it doesn't show up.

I have looked at these pages but not found any help:
https://www.youtube.com/watch?v=4qqqoAWNfZA Custom tab bar icon colors http://www.raywenderlich.com/forums/viewtopic.php?f=2&t=19333
http://www.appcoda.com/ios-programming-how-to-customize-tab-bar-background-appearance/ https://www.youtube.com/watch?v=4Tj_SeApUrs

What is the proper process to create custom tab bar icons?

Answer

Matt Kelly picture Matt Kelly · Jun 11, 2015

After a bit of research I resolved the issue, so thought I'd post here in case anyone else has a similar issue. In Photoshop I did the following:

  1. Imported the image I wanted to use as the tab bar icon (its easier if you use a black and white image so that you don't have to remove colour).
  2. Set the background to 'Transparent' rather than white.
  3. Removed all white from the image so that it was just a black image with a transparent background.
  4. Saved the image as a .png.
  5. Resized the image to be a square with dimensions 75x75 pixels (and named [email protected]), 50x50 pixels (and named [email protected]), and 25x25 pixels (and named imageName.png)

In Xcode I did the following:

  1. Dragged the images into Xcode and renamed the image group as icoImageName.
  2. Selected the tab I wanted to set the image for in the storyboard in Xcode and set the 'Image' (under 'Bar Item' in the Inspector Pane) to icoImageName. Note that I did not set the 'Selected Image' under the 'Tab Bar Item' (leave this blank).

Done.

I hope this helps someone. Thanks to everyone for their help as well.