One of the more perplexing parts of using tab bar controllers is customizing tabs. If you understand some of the properties of an image, You can do some major customization.
Download the example file. If you open the main storyboard you’ll see three view controllers. You may see Question marks in the image like this:

If you do, Click on Assets to make sure the assets are there and then head back to the storyboard. Zoom out to see all three.

I’ll make a new tab bar controller. Marquee select all three controllers, and then from the menu bar select Editor>Embed> Tab Bar controller. All three are now in the tab bar controller, which I’ll spread out a little.

Zoom to the bottom of the tab bar controller and you’ll see the three icons I already added to this project. Two have writing in them and the third is a solid square.

In the properties for that tab bar controller, check Is Initial view controller. Set your simulator to iPhone X and run.

This app is a reference guide to the three ways you can use Icons: square, circle or background. While running, you’ll see that the square and circle are solid when running, and the background is always solid.

That text is too small to see well, So I made a larger version on each tab as an image view. Stop the app.

Images in the tab bar are by default template images. A template image is a monochrome image using the tint color. Any solid areas are rendered solid while transparent areas are rendered the background. Only the alpha channel of an image is used for the color. Go to the SquareViewController. The image in the image view is an image with transparent ares for the text. In viewDidLoad, I can change the rendering mode of the image by changing the rendering mode property of the image like this:

imageView.image = imageView.image?.withRenderingMode(.alwaysTemplate)

Run this and the yellow square in the app is now the tint color.

Stop the app. You can use rendering mode to change to a tab bar image as an .original rendering mode. Tab bar items are stored within the view controller in the tabBarItem property, so under the line we just typed, add this:

tabBarItem.image = tabBarItem.image?.withRenderingMode(.alwaysOriginal)

Nothing seems to happen, but Click the circle tab and you’ll see a yellow square.

Stop the app and go to the storyboard. Select the tab for the circle and you’ll see the three attributes for the images to the tab bar.

The Image listed under the Bar Item is Circle Template. Under that is Landscape, a compact version of the tab bar for landscape on compact height devices, where I put Circle Compact Template for the image. These set the image when the tab is not selected.  Under Tab Bar Item is the one I want to concentrate on:Selected Image. This is an image that’s meant to display when the bar item is selected.  Circle is an original rendered as a template, so we get a solid circle.

This is true of our Square too.

When we ran the app the square was selected as the initial controller, but it was still in a template rendering mode. Change the code in the square to this:

 tabBarItem.selectedImage = tabBarItem.selectedImage?.withRenderingMode(.alwaysOriginal)

Copy this line and paste it into the code for the other two controllers’ viewDidLoad. Run again.

This time the square is yellow with writing, click the circle and it is red. The background show s a gradient. The non selected tabs are the tint color.

This was a simple example. You can use this trick in a variety of ways, from having a single selection image for all your tabs to having color icon tabs for all your images. There’s plenty of combinations that give you more flexibility on how to make tab icons.

The Whole Code

You can find this code at GitHub here. You can also find a video demo of this tip on LinkedIn learning.

SquareViewController.swift

//
//  SquareViewController.swift
//
//  A Demo for iOS Development Tips Weekly
//  by Steven Lipton (C)2018, All rights reserved
//  For videos go to http://bit.ly/TipsLinkedInLearning
//  For code go to http://bit.ly/AppPieGithub
//

import UIKit

class SquareViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    override func viewDidLoad() {
        super.viewDidLoad()
        imageView.image = imageView.image?.withRenderingMode(.alwaysTemplate)
        tabBarItem.selectedImage = tabBarItem.selectedImage?.withRenderingMode(.alwaysOriginal)
        // Do any additional setup after loading the view.
    }

}

CircleViewController.swift

//
//  CircleViewController.swift
//
//  A Demo for iOS Development Tips Weekly
//  by Steven Lipton (C)2018, All rights reserved
//  For videos go to http://bit.ly/TipsLinkedInLearning
//  For code go to http://bit.ly/AppPieGithub
//

import UIKit

class CircleViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    override func viewDidLoad() {
        super.viewDidLoad()

         tabBarItem.selectedImage = tabBarItem.selectedImage?.withRenderingMode(.alwaysOriginal)
    }

}

BackgroundViewController.swift

 

//
//  BackgroundViewController.swift
//
//  A Demo for iOS Development Tips Weekly
//  by Steven Lipton (C)2018, All rights reserved
//  For videos go to http://bit.ly/TipsLinkedInLearning
//  For code go to http://bit.ly/AppPieGithub
//

import UIKit

class BackgroundViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    override func viewDidLoad() {
        super.viewDidLoad()

        tabBarItem.selectedImage = tabBarItem.selectedImage?.withRenderingMode(.alwaysOriginal)
    }

}