How to customize tintColor and resize UITabBarItem

Question

The issues that I would like to change "Tintcolor" for each tabs. But the below code doesn't work at all.

And I added the button image and want to resize it using "UIEdgeInsetsMake". But the button is resized weirdly whenever I touched the button. I don't know why.

And I am using Swift 3.

   class MainView: UITabBarController {

    var TabFirst = UITabBarItem()
    var TabSecond = UITabBarItem()
    var TabThird = UITabBarItem()
    var TabForth = UITabBarItem()
    var TabFifth = UITabBarItem()

    override func viewDidLoad() {
        super.viewDidLoad()

        tabBar.barTintColor = UIColor.white

        TabFirst = self.tabBar.items![0]
        TabFirst.image = UIImage(named: "btn_1-1")!//.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
        TabFirst.imageInsets = UIEdgeInsetsMake(12, 10, 11, 11)
        tabBar.items?[0].title = "length"

        TabSecond = self.tabBar.items![1]
        TabSecond.image = UIImage(named: "btn_2-1")!//.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
        tabBar.items?[1].title = "length"

        TabThird = self.tabBar.items![2]
        TabThird.image = UIImage(named: "btn_3-1")!//.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
        tabBar.items?[2].title = "length"

        TabForth = self.tabBar.items![3]
        TabForth.image = UIImage(named: "btn_4-1")!//.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
        tabBar.items?[3].title = "length"

        TabFifth = self.tabBar.items![4]
        TabFifth.image = UIImage(named: "btn_5-1")!//.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
        tabBar.items?[4].title = "length"

    }



    override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {

        switch item.tag{
        case 0:
            print("FirstTab")
            UITabBar.appearance().tintColor = UIColor(red: 255/255.0, green: 67/255.0, blue: 99/255.0, alpha: 1.0)

        case 1:
            print("SecondTab")
            UITabBar.appearance().tintColor = UIColor(red: 237/255.0, green: 193/255.0, blue: 53/255.0, alpha: 1.0)

        case 2:
            print("ThirdTab")
            UITabBar.appearance().tintColor = UIColor(red: 70/255.0, green: 183/255.0, blue: 128/255.0, alpha: 1.0)

        case 3:
            print("ForthTab")
            UITabBar.appearance().tintColor = UIColor(red: 12/255.0, green: 195/255.0, blue: 199/255.0, alpha: 1.0)

        case 4:
            print("FifthTab")
            UITabBar.appearance().tintColor = UIColor(red: 105/255.0, green: 72/255.0, blue: 170/255.0, alpha: 1.0)

        default:
            break
        }
    }

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

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

}

http://stackoverflow.com/questions/27890936/changing-selectedimage-on-uitabbaritem-in-swift You should change the selected image instead but if you want to tint : http://stackoverflow.com/questions/20783193/setting-tint-color-for-selected-tab-in-uitabbar — , Feb 04 '17 at 08:56
@Sneak I only would like to change TintColor, not the way to change images. And is there any way to change it by using programming code? not using storyboard menus? And I also really want to solve RESIZING problems. — Frozen Sea, Feb 04 '17 at 09:02

score 0 · Accepted Answer · edited May 23 '17 at 12:08

0

EDIT: You are missing breaks in your switch statement:

switch item.tag{

Also, you are doing a switch on the tag and I don't see anywhere you have tagged them accordingly in your code. You should get the index of the item instead.

I am not a Swift coder, this is how you do it in Objective-C to give you a hint:

NSInteger indexOfTab = [[self.tabBar items] indexOfObject:item];

Then you do your switch statement of indexOfTab.

Here is the Swift version.:

override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
    print("the selected index is : \(tabBar.items.index(of: item))")
}

If you want to individually change the "tintColor" , you should set a custom selectedImage instead.

Beware:

By default, unselected and selected images are automatically created from the alpha values in the source images. To prevent system coloring, provide images with alwaysOriginal.

As far as the documentation goes, there are no "tintColor" property for a UITabBarItem.

However, the UITabBar itself has a tintColor property. But this is not setting anything individually.

Tint Color

You can specify a custom tint color for the bar background using the Tint (barTintColor) field. The default background tint color is white.

Use the Image Tint (selectedImageTintColor) field to specify the bar item’s tint color when that tab is selected. By default, that color is blue.

Regarding your resize methods, you should resize your original image instead, or check this question if it does fit your needs. However, the UITabBar and UITabBarItem customizations are limited to what you can read in the documentations.

If you want to further customize things individually, I suggest you search for or create a custom solution instead.

edited May 23 '17 at 12:08

Community

1
1

answered Feb 04 '17 at 09:11

Thank you for your answer! So I should use images with alwaysOriginal. But how about Image size issues? I cannot understand the tabbar items are resized whenever I touched it. If I don't use "UIEdgeInsetsMake(12, 10, 11, 11)", they aren't resized. But the images doesn't fit on Tabbar area at all. That's why I used this code for fitting them. Do you have any idea about it? – Frozen Sea Feb 04 '17 at 09:22
@FrozenSea I Updated my answer with the resize issues. You should create your images in correct size to begin with, instead of doing wierd resizing in code with edgeinsets etc. Look here for a complete guide on how to correct your image sizes: https://developer.apple.com/ios/human-interface-guidelines/graphics/image-size-and-resolution/ , please mark as answered if this answers your questions :) GL – Feb 04 '17 at 09:24
@FrozenSea BTW. A Quick look at your code, you are missing breaks in your switch statements. switch item.tag{ , maybe thats why you cant change the tint colors. – Feb 04 '17 at 09:31
I tried to add "break" for switch method. But it didn't work. Is there any way to change "Item.title" color ? – Frozen Sea Feb 04 '17 at 09:39
@FrozenSea You must always have breaks in your switch statements. Check here for the title customizations: http://stackoverflow.com/questions/28198060/settitletextattributes-doesnt-work-for-uitabbaritem-when-it-is-unselected-in-sw – Feb 04 '17 at 09:42
@FrozenSea I have updated my answer one final time, check the answer , I think you are doing your switch statement wrong and therefore you never fire the correct tab item (?). Tahts all I can help with, GL – Feb 04 '17 at 09:50
I tried to use only images for changing item's colors. But image would be really low quality if I made it as low pixel as Apple site mentioned. So I would like to make high pixel images and then resize it using programming code. Is there any way for it? – Frozen Sea Feb 04 '17 at 10:13
@FrozenSea You need to read the documentation and learn how image scaling works for different screens. This is basically 3 sizes of the same picture for 1x (normal size) 2x (retina) 3x (iphone + etc), and iOS will handle it for you and choose the correct scale. This is nothing I can explain more in details here you really need to look through the link and make sure you understand how it works. You can look for guides on google too. – Feb 04 '17 at 10:19

How to customize tintColor and resize UITabBarItem

1 Answers1