Tab bar item with two images

Question

I'm trying to make a tab bar like this , where the middle item has a background image (the black shield), and on top displays an image from the server, how can I achieve this? I'm using storyboard and this is what i've got so far Is it possible to make my image appear as if it were inside the shield logo and how could I do that? Or if I use the team logo as tab bar item image could I add some sort of background view to make it look as similar as possible to the first image?

Thanks

Answer 1

Maybe this will help someone out there, so here's how I achieved that look. I used the shield image as tab icon, and then I added the image on top of the tabBar in TabBarController.swift like so:

    let button = UIButton(type: .custom)
button.frame = CGRect(x: 0.0, y: 0.0, width: 45, height: 45)
 button.center = tabBar.center
 button.sd_setBackgroundImage(with: URL(string: UserPreferencesManager.getFavoriteTeamImage()), for: .normal, completed: nil)
        button.sd_setBackgroundImage(with: URL(string: UserPreferencesManager.getFavoriteTeamImage()), for: .highlighted, completed: nil)
  button.addTarget(self, action: #selector(btnTouched), for:.touchUpInside)
          view.addSubview(button)

and fot the btnTouched function:

  @objc func btnTouched(){
    self.selectedIndex = 2
}

having the image on top of the tabBar gives the illusion of being part of the center item, but gets in the way when users touch that tab, hence the btnTouched function, to perform what the tab is supposed to do.