Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Swift and Xcode - How to Create Custom Tab Bar Icons

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?

like image 905
Matt Kelly Avatar asked May 25 '15 00:05

Matt Kelly


People also ask

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.

How do I add an image to the tab bar in iOS?

iOS UITabBarController Changing Tab Bar Item Title and Icon For a custom icon, add the required images to the assets folder and set the 'System Item' from earlier to 'custom'. Now, set the icon to be shown when the tab is selected from the 'selected image' drop down and the default tab icon from the 'image' drop down.


1 Answers

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.

like image 108
Matt Kelly Avatar answered Sep 29 '22 13:09

Matt Kelly