Change Tab Bar Image based on iOS version using new system image aqi.medium

Hi All,

I am new to coding and have a question that I think might be easy to answer but am not sure. I have created a Storyboard based, Tabbed application with 3 tabs.

Tab 1: Dashboard

Tab 2: Air Quality Map

Tab 3: Fire Map

For Tab 2 (Air Quality Map) I want to use the new system image aqi.medium as the tab bar image. However that image is only available in iOS 14 or later. So I created the function below to change the image based on iOS version and put it in the viewDidLoad method of the View Controller for Tab 2 (Air Quality Map). This function works however...

The problem is that when the App is first launched no tab bar image is displayed on the screen, however the tab title, "Air Quality Map", is shown. Only after the user selects the Air Quality map tab is the tab bar image displayed.

The question is how do I get the correct system tab bar image to be displayed upon app launch depending on the iOS version of the User's device?

Tab 2 (Air Quality Map) View Controller:

import Foundation
import UIKit
import MapKit
import CoreLocation

class AirQualityMapViewController: UIViewController, CLLocationManagerDelegate {
   
  @IBOutlet weak var mapView: MKMapView!
   
      var locationManager = CLLocationManager()
       
      override func viewDidLoad() {
        super.viewDidLoad()
        
        checkLocationServices()
        mapView.showsUserLocation = true
        setTabBarImage ()
      }
   
  func setTabBarImage () {
    if #available(iOS 14.0, *) {
      tabBarItem.image = UIImage(systemName: "aqi.medium")
    }
    else {
      tabBarItem.image = UIImage(systemName: "globe")
    }
  }
Answered by kbonnet in 681319022

Good news. I found a very easy workaround that does not involve coding.

I downloaded the SF Symbols app to my computer and exported the medium.aqi image (which is only compatible with iOS 14 or later) to my hard drive. Then I renamed the image to "globe" which is a compatible image across multiple iOS versions. Finally I added the image named "globe" to my xcode assets folder and linked the image to the tab bar using Interface Builder.

Now the medium.aqi image is displayed whenever I use the "globe" image.

-viewDidLoad isn't called until the view controller's view is loaded, which for all but the default tab will often not be until after you switch to that tab.

You should setup these images when you first configure your tab bar controller (such as in -scene:willConnectToSession:options: or -applicationDidFinishLaunchingWithOptions:).

Accepted Answer

Good news. I found a very easy workaround that does not involve coding.

I downloaded the SF Symbols app to my computer and exported the medium.aqi image (which is only compatible with iOS 14 or later) to my hard drive. Then I renamed the image to "globe" which is a compatible image across multiple iOS versions. Finally I added the image named "globe" to my xcode assets folder and linked the image to the tab bar using Interface Builder.

Now the medium.aqi image is displayed whenever I use the "globe" image.

Change Tab Bar Image based on iOS version using new system image aqi.medium
 
 
Q