Remove spacing between tab bar items (left and right)

Question

How to remove spacing between tab bar items when using the "fill" value on the "item position" option?

I've tried the following:

    let tabBarController = window!.rootViewController as! UITabBarController
    tabBarController.tabBar.itemSpacing = 0
    let numberOfItems = CGFloat(tabBarController.tabBar.items!.count)
    let tabBarItemSize = CGSize(width: tabBarController.tabBar.frame.width / numberOfItems, height: tabBarController.tabBar.frame.height)
    tabBarController.tabBar.selectionIndicatorImage = UIImage.imageWithColor(color: UIColor.secondaryHighlight(), size: tabBarItemSize).resizableImage(withCapInsets: UIEdgeInsets.zero)
    for item in tabBarController.tabBar.items! {
        item.imageInsets = UIEdgeInsetsMake(0, 0, 0, 0)
    }

extension UIImage {

    class func imageWithColor(color: UIColor, size: CGSize) -> UIImage {
        let rect: CGRect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        color.setFill()
        UIRectFill(rect)
        let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return image
    }

}

This result is always this (note the green line on the left of the first tab bar item):

tab bar items

Just a note @user3427013, I saw you remove the `!` from the edit, it is needed for the image to display (markdown syntax). I've added it back for you. — Yuchen, Nov 11 '16 at 22:13
FYI, the typical use case for a tab bar is that the image & text itself change colors when the tab bar item is selected/deselected (for example, the circle and "First" text). You don't normally change the entire tab bar item background color. — AdamPro13, Nov 11 '16 at 23:39
Thanks for your reply @AdamPro13 but the customer requested this UI... I have no other choice than to replicate the photoshop file. — user3427013, Nov 12 '16 at 00:31

score 4 · Answer 1 · edited Aug 20 '17 at 12:52

4

You can play with title offset that affects on image too:

    tabBar.items!.first?.titlePositionAdjustment = UIOffsetMake(30.0, 0.0);
    tabBar.items!.last?.titlePositionAdjustment = UIOffsetMake(-30.0, 0.0);

In this case result will be:
result screenshot

How it work with three items:
three items result screenshot

edited Aug 20 '17 at 12:52

Jon Saw

7,599
6
48
57

answered Nov 12 '16 at 01:26

Artem

391
3
11

It doesn't work. :\ I still get the green line on the first and last tab bar items. – user3427013 Nov 12 '16 at 01:41
@user3427013 Maybe I missed something. I update my answer with photo for three items. Explain please result you try to get. (maybe with some screens) – Artem Nov 12 '16 at 01:56
It seem that problem is in size of your image. You set an image with size of barItem, but after changing offset - size of item will change, but image's size not. – Artem Nov 12 '16 at 01:58
I've added a static value for the size (width and height), but it still didn't work. Thanks for your reply. – user3427013 Nov 12 '16 at 02:46
Try not to set image. Just use system one and see if result will be the same. – Artem Nov 12 '16 at 03:01
Even with 4 elements the spacing between the elements is still there. I initially thought dividing the tab bar's width by 3 would be the problem, but even dividing the width by an even number, the issue is still there. – user3427013 Nov 12 '16 at 13:51
but I need to set an image (CGRect) for the tab bar's selectionIndicatorImage, otherwise the background color (CGRect image) of the selected tab will not show. – user3427013 Nov 12 '16 at 13:52

score 1 · Answer 2 · answered Aug 29 '17 at 17:03

to be able to control the location of all tab bar items "not only the first and last" you can use the items array index like this:

tabBar.items?[1].titlePositionAdjustment = UIOffsetMake(-15.0 , 0.0) tabBar.items?[2].titlePositionAdjustment = UIOffsetMake(15.0 , 0.0)

score 0 · Answer 3 · answered Aug 02 '17 at 22:22

0

    tabBarController?.tabBar.frame.origin.x = -2
    tabBarController?.tabBar.frame.size.width += 2

answered Aug 02 '17 at 22:22

Valeriy

723
6
17

score 0 · Answer 4 · answered Aug 17 '17 at 19:10

0

Sorry for the late answer. Hope this helps!

tabBar.frame.size.width = self.view.frame.width + 4
tabBar.frame.origin.x = -2

answered Aug 17 '17 at 19:10

Aaryam Maheshwary

3
3

Remove spacing between tab bar items (left and right)

4 Answers4