how to customize tabbar items which is added on storyboard

Question

I made UITabbar controller and make 5 tabbar buttons on Storyboard.

But I cannot control image sizes and colors in tabbar items. And I want to customize button colors and shapes using PNG files, not using default colors.

But the below code is not working at well except tabbar tintcolor.

class MainView: UITabBarController {

override func viewDidLoad() {
    super.viewDidLoad()

    tabBar.barTintColor = UIColor.white

}

override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
    switch item.tag{
    case 0:
        print(item.tag)
        UITabBar.setItems(item[0]) = UITabBarItem(title: "Magzine", image: UIImage(named: "exhibiter.png"), selectedImage: UIImage(named: "exhibiterselected.png"))
    case 1:
        print("")
    case 2:
        print("")
    case 3:
        print("")
    case 4:
        print("")
    default:
        break
    }
}

override func viewWillAppear(_ animated: Bool) {
    UIApplication.shared.isStatusBarHidden = false
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
}

}

Set the both default and select image in your storyboard with your tabbar item and then set image render mode to origin check this answer for reference http://stackoverflow.com/a/38560183/6433023 — Nirav D, Feb 04 '17 at 05:51
You can manage the tab bar items such selected and unselected state by using storyboard. Remember! If you want to set the custom images to the tab bar item? and your images must be contain the suffixes. Which is the required from the system. — Mannopson, Feb 04 '17 at 06:10

score 3 · Accepted Answer · answered Feb 04 '17 at 05:49

you can use like this

class TabBarViewController: UITabBarController {

    required init(coder aDecoder: NSCoder) {

    super.init(coder: aDecoder)!

override func viewDidLoad() {
    super.viewDidLoad()

    UITabBar.appearance().tintColor = UIColor(red: 254/255.0, green: 105/255.0, blue: 51/255.0, alpha: 100.0)

    for i in 0 ..< self.tabBar.items!.count {

        switch i {

        case 0:

            tabBar.items?[0].title = "Home"
            let firstTab = self.tabBar.items![i] as UITabBarItem
            learnTab.image = UIImage(named: "Homedeselected")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
            firstTab.selectedImage = UIImage(named: "Homedeselected")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
            firstTab.imageInsets = UIEdgeInsetsMake(-1, 0, 1, 0)
            firstTab.titlePositionAdjustment = UIOffsetMake(0, -4)


        case 1:

            tabBar.items?[1].title = "Request"
            let secondTab = self.tabBar.items![i] as UITabBarItem
            secondTab.image = UIImage(named: "RequestDeselected")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
            secondTab.selectedImage = UIImage(named: "Requestselected")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
            secondTab.imageInsets = UIEdgeInsetsMake(-1, 0, 1, 0)
            secondTab.titlePositionAdjustment = UIOffsetMake(0, -4)

        case 2:

            tabBar.items?[2].title = "Renew"
            let thirdTab = self.tabBar.items![i] as UITabBarItem
             thirdTab.image = UIImage(named: "RenewDeSelected")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
            thirdTab.selectedImage = UIImage(named: "RenewSelected")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
            thirdTab.imageInsets = UIEdgeInsetsMake(-1, 0, 1, 0)
            thirdTab.titlePositionAdjustment = UIOffsetMake(0, -4)

        case 3:

            tabBar.items?[3].title = "ReSell"
            let forthTab = self.tabBar.items![i] as UITabBarItem
            forthTab.image = UIImage(named: "ReSellDeSelected")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
            forthTab.selectedImage = UIImage(named: "ReSellSelected")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
            forthTab.imageInsets = UIEdgeInsetsMake(-1, 0, 1, 0)
            forthTab.titlePositionAdjustment = UIOffsetMake(0, -4)

        case 4:

            tabBar.items?[4].title = "ReCycle"
            let fifthTab = self.tabBar.items![i] as UITabBarItem
            fifthTab.image = UIImage(named: "ReCycleDeSelected")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
            fifthTab.selectedImage = UIImage(named: "ReCycleSelected")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
            fifthTab.imageInsets = UIEdgeInsetsMake(-2, 0, 2, 0)
            fifthTab.titlePositionAdjustment = UIOffsetMake(0, -5)

        default:
            break
        }
    }
}

override func tabBar(tabBar: UITabBar, didSelectItem item: UITabBarItem) {




    }

}

Thank you! But for using "ImageInsets", the button size is changed whenever I touched it. Do you know any way to solve this issue? — 김동현, Feb 04 '17 at 08:57
This is not the button sizes, it's an image size! Make sure you're correctly imported all of the needed PNG images. As because an iOS can recognize the same type image names as such: " example@2x.png " or " example@3x.png ". Good luck — Mannopson, Feb 04 '17 at 11:01

how to customize tabbar items which is added on storyboard

1 Answers1