28
votes

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?

4
When I run the app i the sim, the tab bar icon is blank when the tab is selected, and is a grey square when a different tab is selected.Matt Kelly

4 Answers

60
votes

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.

4
votes

It sounds like you have everything set up properly in xCode. The problem IS the png file you are using.

Download this image, http://i.stack.imgur.com/zluev.png , and see if the problem persists.

According to an answer on UITabBarItem images just appear as a grey block:

The standard tabbar icons in iOS are rendered solely from the alpha channel. Colors are ignored completely. Instead of colors you can use different alpha values that lead to a different shade of gray (or blue if selected)

Make the background of your icons transparent.

1
votes

Did you create the tab view in interface builder? If so, since you added the images as an asset they should show up in the 'Image' property of each tab button under the inspector sidebar. Also, I know you've already posted a ton of tutorials, but this one is pretty up to date and explains it thoroughly: http://codewithchris.com/ios-tab-bar-app/

0
votes

enter image description here

class ViewController: UIViewController {

    @IBOutlet var btnHome : UIButton!
    @IBOutlet var btnInvoice : UIButton!
    @IBOutlet var btnSettings : UIButton!
    @IBOutlet var btnMyOrder : UIButton!
    @IBOutlet var btnLogout : UIButton!

    @IBOutlet weak var viewContainer: UIView!

    var navController : UINavigationController!

    var selectedIndex : Int! = 0

    var arrTabColor  = [UIColor(red: 35.0/255.0, green: 93.0/255.0, blue: 175.0/255.0, alpha: 1.0),
                        UIColor(red: 29.0/255.0, green: 86.0/255.0, blue: 167.0/255.0, alpha: 1.0),
                        UIColor(red: 35.0/255.0, green: 93.0/255.0, blue: 175.0/255.0, alpha: 1.0),
                        UIColor(red: 29.0/255.0, green: 86.0/255.0, blue: 167.0/255.0, alpha: 1.0),
                        UIColor(red: 35.0/255.0, green: 93.0/255.0, blue: 175.0/255.0, alpha: 1.0)]

    var arrTabIdentiFierVC       = ["FirstVC","SecondVC","FirstVC","FirstVC","SecondVC"]


    // MARK: - Life Cycle

    override func viewDidLoad()
    {
        super.viewDidLoad()
        setTabbarImage(0)

        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func setTabBarClicked(_ storyIdentifier : String,identifier : String)
    {
        let aStoryboard  = UIStoryboard.init(name: storyIdentifier, bundle: nil)
        let newViewController = aStoryboard.instantiateViewController(withIdentifier: identifier)

        navController = UINavigationController(rootViewController: newViewController)
        self.addChildViewController(navController)

        navController.view.frame = viewContainer.frame
        newViewController.view.frame = viewContainer.frame

        self.viewContainer.addSubview(navController.view)
        newViewController.didMove(toParentViewController: self)


    }

    func setTabbarImage(_ selectedIndex : Int!)
    {
        btnHome.backgroundColor = arrTabColor[0]
        btnInvoice.backgroundColor = arrTabColor[1]
        btnSettings.backgroundColor = arrTabColor[2]
        btnMyOrder.backgroundColor = arrTabColor[3]
        btnLogout.backgroundColor = arrTabColor[4]

        let selectedColor = UIColor(red: 40/255, green: 142/255, blue: 206.0/255, alpha: 1.0)

        if selectedIndex == 0
        {
            btnHome.backgroundColor = selectedColor

        }
        else if selectedIndex == 1
        {
            btnInvoice.backgroundColor = selectedColor

        }
        else if selectedIndex == 2
        {
            btnSettings.backgroundColor = selectedColor

        }
        else if selectedIndex == 3
        {
            btnMyOrder.backgroundColor = selectedColor
        }
        else if selectedIndex == 4
        {
            btnLogout.backgroundColor = selectedColor

        }
    }

    // MARK: - Action Method
    @IBAction func HomeClicked(_ sender : AnyObject?)
    {

        setTabbarImage(0)

        setTabBarClicked("Main",identifier: arrTabIdentiFierVC[0])

    }
    @IBAction func InvoiceClicked(_ sender : AnyObject?)
    {
        setTabbarImage(1)

        setTabBarClicked("Main",identifier: arrTabIdentiFierVC[1])

    }
    @IBAction func SettingClicked(_ sender : AnyObject?)
    {
        setTabbarImage(2)
        setTabBarClicked("Main",identifier: arrTabIdentiFierVC[2])


    }
    @IBAction func MyorderClicked(_ sender : AnyObject?)
    {
        setTabbarImage(3)
        setTabBarClicked("Main",identifier: arrTabIdentiFierVC[3])

    }
    @IBAction func logoutClicked(_ sender : AnyObject?)
    {
        setTabbarImage(4)


        let alert = UIAlertController(title: "", message: "Are you sure want to logout?", preferredStyle: UIAlertControllerStyle.alert)

        let CancelAction = UIAlertAction(title: "NO", style: .default) { (action:UIAlertAction!) in

        }
        alert.addAction(CancelAction)

        let OKAction = UIAlertAction(title: "YES", style: .default) { (action:UIAlertAction!) in

          //  var isNav : Bool! = false

            //for objChild in (self.parent?.childViewControllers)!
           // {
//                if objChild.isKind(of: LoginVC.self)
//                {
//                    self.navigationController!.popToViewController(objChild, animated: true)
//                    CommonMethods.removeCustomObject(Constants.kUserProfile)
//                    
//                    isNav = true
//                    break
//                    
//                }
           // }
           // if !isNav
           // {
//                CommonMethods.removeCustomObject(Constants.kUserProfile)
//                let aNavController = (AppDelegate.getDelegate().window!.rootViewController! as! UINavigationController)
//                let storyboard = UIStoryboard(name: "Main", bundle: nil)
//                var aVCObj = UIViewController()
//                aVCObj = storyboard.instantiateViewController(withIdentifier: "LoginVC")
//                var aMutArr = aNavController.viewControllers
//                aMutArr.insert(aVCObj, at: 0)
//                aNavController.viewControllers = aMutArr
//                aNavController.popToRootViewController(animated: true)
          //  }
        }
        alert.addAction(OKAction)
        self.present(alert, animated: true, completion: nil)
    }

    // MARK: - Action Method


}