15

I have taken a view controller & embedded it in a navigation Controller and again this has been embedded in a tab bar controller. when I am trying to set a image via story board, the image does not appear on a tab bar icon. Here image name is 25.

enter image description here

enter image description here

What can I do? How can I do it programmatically? what should I take proper image size for this purpose?

Nimantha
  • 6,405
  • 6
  • 28
  • 69
KhanShaheb
  • 714
  • 2
  • 11
  • 26

5 Answers5

22

In your MainTabbarViewController

Bind the outlet of your tabbar:

@IBOutlet weak var myTabBar: UITabBar?
 
 override func viewDidLoad() {
      super.viewDidLoad()
      
      myTabBar?.tintColor = UIColor.white
      tabBarItem.title = ""
      
      setTabBarItems()
      
 }

set the tabbar items here defined method below:

func setTabBarItems(){
      
      let myTabBarItem1 = (self.tabBar.items?[0])! as UITabBarItem
      myTabBarItem1.image = UIImage(named: "Unselected")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
      myTabBarItem1.selectedImage = UIImage(named: "Selected ")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
      myTabBarItem1.title = ""
      myTabBarItem1.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
      
      let myTabBarItem2 = (self.tabBar.items?[1])! as UITabBarItem
      myTabBarItem2.image = UIImage(named: "Unselected")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
      myTabBarItem2.selectedImage = UIImage(named: "Selected")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
      myTabBarItem2.title = ""
      myTabBarItem2.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
      
      
      let myTabBarItem3 = (self.tabBar.items?[2])! as UITabBarItem
      myTabBarItem3.image = UIImage(named: "Unselected")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
      myTabBarItem3.selectedImage = UIImage(named: "Selected")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
      myTabBarItem3.title = ""
      myTabBarItem3.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
      
      let myTabBarItem4 = (self.tabBar.items?[3])! as UITabBarItem
      myTabBarItem4.image = UIImage(named: "Unselected")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
      myTabBarItem4.selectedImage = UIImage(named: "Selected")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
      myTabBarItem4.title = ""
      myTabBarItem4.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
      
 }
Abhinandan Pratap
  • 2,142
  • 1
  • 18
  • 39
Azharhussain Shaikh
  • 1,654
  • 14
  • 17
14

add AppDelegate class :

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool
{
    window=UIWindow(frame: UIScreen.main.bounds)
    self.window?.rootViewController = setTabbar()
    self.window?.makeKeyAndVisible()
    window?.backgroundColor=UIColor.white
    return true
}

func setTabbar() -> UITabBarController
{
    let storyboard = UIStoryboard(name: "Main", bundle: nil)
    let tabbarcntrl = UITabBarController()

    let Home = storyboard.instantiateViewController(withIdentifier: "HomeView") // 1st tab bar viewcontroller
    let Followed = storyboard.instantiateViewController(withIdentifier: "FollowedView") // 2nd tab bar viewcontroller
    let Message = storyboard.instantiateViewController(withIdentifier: "MessageView") // 3rd tab bar viewcontroller

    // all viewcontroller embedded navigationbar
    let nvHome = UINavigationController(rootViewController: Home)
    let nvFollowed = UINavigationController(rootViewController: Followed)
    let nvMessage = UINavigationController(rootViewController: Message)

    // all viewcontroller navigationbar hidden
    nvHome.setNavigationBarHidden(true, animated: false)
    nvFollowed.setNavigationBarHidden(true, animated: false)
    nvMessage.setNavigationBarHidden(true, animated: false)

    tabbarcntrl.viewControllers = [nvHome,nvFollowed,nvMessage]

    let tabbar = tabbarcntrl.tabBar
    tabbar.barTintColor = UIColor.black
    tabbar.backgroundColor = UIColor.black
    tabbar.tintColor = UIColor(red: 43/255, green: 180/255, blue: 0/255, alpha: 1)

    //UITabBar.appearance().tintColor = UIColor.white
    let attributes = [NSFontAttributeName:UIFont(name: "Montserrat-Light", size: 10)!,NSForegroundColorAttributeName:UIColor.white]
    let attributes1 = [NSFontAttributeName:UIFont(name: "Montserrat-Light", size: 10)!,NSForegroundColorAttributeName:UIColor(red: 43/255, green: 180/255, blue: 0/255, alpha: 1)]

    UITabBarItem.appearance().setTitleTextAttributes(attributes, for: .normal)
    UITabBarItem.appearance().setTitleTextAttributes(attributes1, for: .selected)


    let tabHome = tabbar.items![0]
    tabHome.title = "Home" // tabbar titlee
    tabHome.image=UIImage(named: "icon_home.png")?.withRenderingMode(.alwaysOriginal) // deselect image
    tabHome.selectedImage = UIImage(named: "icon_home.png")?.withRenderingMode(.alwaysOriginal) // select image
    tabHome.titlePositionAdjustment.vertical = tabHome.titlePositionAdjustment.vertical-4 // title position change

    let tabFoll = tabbar.items![1]
    tabFoll.title = "Followed"
    tabFoll.image=UIImage(named: "icon_fold.png")?.withRenderingMode(.alwaysOriginal)
    tabFoll.selectedImage=UIImage(named: "icon_fold.png")?.withRenderingMode(.alwaysOriginal)
    tabFoll.titlePositionAdjustment.vertical = tabFoll.titlePositionAdjustment.vertical-4

    let tabMsg = tabbar.items![3]
    tabMsg.title = "Message"
    tabMsg.image=UIImage(named: "icon_mail.png")?.withRenderingMode(.alwaysOriginal)
    tabMsg.selectedImage=UIImage(named: "icon_mail.png")?.withRenderingMode(.alwaysOriginal)
    tabMsg.titlePositionAdjustment.vertical = tabMsg.titlePositionAdjustment.vertical-4

    return tabbarcntrl
}
Jayesh Miruliya
  • 3,279
  • 2
  • 25
  • 22
7

Set both images- for select/selected state

See This

iDeveloper
  • 2,339
  • 2
  • 24
  • 38
  • I did like you but same problem. Is it a bug or problem of my computer I could not understand. Is their any naming convention of image,image size? – KhanShaheb Sep 27 '16 at 04:45
  • when I am using icon from iconbeast or icons8 they are finely displayed but when I am using my image they are not supported. Any idea? – KhanShaheb Sep 27 '16 at 05:20
  • [See This](https://github.com/mho000/MHImageTabBar) and check what was error in your code – iDeveloper Sep 27 '16 at 05:36
7

You are doing all the things in right way But the only problem is your tabbaritem image is not in correct size .Just look this table for actual size of tabbaritem images.

enter image description here

Sumit Jangra
  • 651
  • 5
  • 16
0

In swift 4 and 5 you can use the below extension. Remember one thing always pass the same number of images , selected images and title but if you do not want to set title then pass nil in title.

extension UITabBarController{        
        func setUpImagaOntabbar(_ selectedImage : [UIImage], _ image : [UIImage], _ title : [String]?){
            
            for (index,vals) in image.enumerated(){
                
                if let tab = self.tabBar.items?[index]{
                    
                    tab.image = image[index]
                    tab.image = selectedImage[index]
                    if let tile = title[index]{
                       tab.title = title[index]
                      }
                    
                }
            }
        }
    }
froggomad
  • 1,747
  • 2
  • 17
  • 40
Talha Rasool
  • 1,126
  • 14
  • 12